How to Turn Any Website Section into a Shopify Section (Liquid, 2026)

There are two very different things people mean by "turning a website section into a Shopify section", and the gap between them is where most of the work lives.

The first is: make it appear on the page. That is easy. Paste the markup into a Custom Liquid block and you are done in two minutes.

The second is: make it a section a merchant can edit. That is the real job, and it is not about the markup at all. It is about the schema.

Why Custom Liquid is not enough

Drop a section's HTML into Custom Liquid and the store looks right. Then the client emails: "can we change the heading to say Free shipping over £50?"

Now someone opens the code editor, finds the text inside the markup, edits it carefully, and hopes nothing else breaks. Repeat for every image, every price, every link. You have built something that only you can maintain, which is the opposite of what a theme is for.

The same is true of pasting markup straight into a template file. It renders. It is not a section.

What a real Shopify section is

A section is a .liquid file in your theme's sections folder that contains two things:

The markup, using Liquid to pull values in rather than hard-coding them:

<h2>{{ section.settings.heading }}</h2>

A schema block at the bottom that declares what those values are:

{% schema %}
{
  "name": "Feature row",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Why shop with us" },
    { "type": "color", "id": "bg", "label": "Background" }
  ],
  "blocks": [
    { "type": "feature", "name": "Feature", "settings": [
      { "type": "image_picker", "id": "icon", "label": "Icon" },
      { "type": "text", "id": "title", "label": "Title" }
    ]}
  ],
  "presets": [{ "name": "Feature row" }]
}
{% endschema %}

Those three parts each do a job:

• Settings become fields in the theme customizer sidebar. This is what makes the heading editable without code.
• Blocks are the repeatable parts. A three-feature row is one block type; the merchant adds a fourth feature by clicking Add block, not by copying markup.
• Presets put the section in the Add section menu. Without one, the file exists but nobody can place it.

Getting from captured HTML to that structure is the actual conversion. Deciding which parts become settings, which repeated group becomes a block, and what the sensible defaults are.

Four routes, and what each leaves you with

The middle two are what most people do today. A bought section is quick but it is someone else's design, which defeats the point if you started from a layout you liked. Hand-writing the file gives you exactly what you want and costs an afternoon.

Three things that go wrong

Global CSS. A section that adds unscoped styles will fight the theme. Keep the CSS inside the section file and scope it to the section's own class, so deleting the section deletes its styles.

Hard-coded content that should be a setting. If a value is something a merchant would ever want to change, it belongs in the schema. Headings, button labels, links, colors, images. When in doubt, make it a setting.

No blocks for repeated items. Three features written as three copies of the same markup means the merchant cannot add a fourth. One block type used three times means they can.

Doing it with PocketUI

PocketUI is a Chrome extension that saves parts of live websites as real code: structure, authored CSS, hover and focus states, breakpoints. The same capture can go to Figma, out as HTML, Tailwind, React or Vue, or to a page builder.

1. Find the section you want on any site.
2. Capture it. Drag over it in the extension.
3. Export it as a Shopify section. The capture is written as a .liquid file with a schema block, blocks for the repeated parts, and a preset.
4. Add the file to your theme's sections folder.
5. Place it from the customizer with Add section.
6. Fill in your own content from the sidebar.

Clearly: the Shopify export is not live yet. Figma and the code exports work today; Shopify, Elementor, Webflow and Bricks are in development and go to early-access members first. Right now, capture the section as clean HTML and CSS and write the schema around it by hand. That still removes the slowest part, which is reading values out of DevTools one at a time.

On copying another store

The layout is fair game to learn from and rebuild. The product photography, the copy, the logo and the brand colors are not yours. Take the structure, replace the content, and the result is your store rather than a copy of someone else's.