Online Store 2.0 Theme Development: Custom Sections and Blocks

Most Shopify stores want a storefront that looks like theirs, not like the template everyone else uses, but without giving up the thing that makes Shopify pleasant: the ability for the owner to rearrange and edit pages in the theme editor without a developer. For a long time those two goals fought each other, a custom design meant hard-coded pages only a developer could touch. Online Store 2.0 changed that, and it is the sweet spot for stores that want a bespoke look short of going fully headless.

The key is building your design as sections and blocks that the merchant can add, remove, and reorder on any page through the editor. This guide covers how that works and how to build it. It assumes some comfort with Liquid and JSON, the templating Shopify themes use.

The old theme model confined editable sections mostly to the homepage. Online Store 2.0 made every page template section-based, defined in JSON, so a merchant can compose product pages, collection pages, and more from sections in the editor, not just the home page. It also introduced app blocks, which let apps drop functionality into a page without editing theme code, and leaned into metafields for content. The upshot for development is that you build reusable, configurable sections, and the merchant assembles pages from them, which is what keeps a custom theme both bespoke and editable.

A section is a Liquid file with a {% schema %} block that declares its editable settings. Those settings become the controls the merchant sees in the theme editor, and presets make the section available to add to pages.

{% comment %} sections/featured-promo.liquid {% endcomment %}
<div class="promo" style="text-align: {{ section.settings.align }}">
  <h2>{{ section.settings.heading }}</h2>
  <a href="{{ section.settings.link }}">{{ section.settings.cta }}</a>
</div>

{% schema %}
{
  "name": "Featured promo",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading" },
    { "type": "text", "id": "cta", "label": "Button text" },
    { "type": "url", "id": "link", "label": "Button link" },
    { "type": "select", "id": "align", "label": "Alignment",
      "options": [{ "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }] }
  ],
  "presets": [{ "name": "Featured promo" }]
}
{% endschema %}

That one file gives the merchant a fully editable, reusable section, with no code edits needed to use it.

When a section contains a list of similar items, logos, features, testimonials, you model them as blocks. Blocks are defined in the same schema and let the merchant add, remove, and reorder individual items inside the section, each with its own settings. You loop over section.blocks in Liquid to render them, so a single "logo wall" section can hold however many logos the merchant chooses, arranged however they like, all from the editor.

Online Store 2.0 templates are JSON files that list which sections a page uses and in what order. Because the page is data, the merchant rearranges it in the editor and you keep the design in version-controlled section files. App blocks extend this: a well-built app can expose a block that the merchant drops into a page, so functionality is added without pasting snippets into theme code, which is cleaner and far less fragile than the old approach of hardcoding app embeds.

Sections become genuinely powerful when their content comes from metafields rather than being typed into each section. A product page section can read a product's custom metafields, specs, ingredients, a size guide, so the layout is built once and every product fills it with its own structured data. This pairs theme development with native data modeling: you build the presentation as a section, and the data lives in metafields, which is the clean, app-free way to show rich custom content across a whole catalog.

Online Store 2.0 sits between a stock theme and a fully headless build, and choosing it is about how far you need to go. A custom theme gives you a bespoke, on-brand storefront that the merchant can edit, with far less complexity than headless and none of the rebuild of checkout and infrastructure. Go headless only when you need performance or experiences a theme genuinely cannot deliver. For most stores that want to look custom and stay editable, a well-built 2.0 theme is the right tool, and there is a separate guide on the headless path when you truly need it.

• Build your design as reusable sections with a {% schema %} of editable settings.
• Add presets so merchants can add sections to any page from the editor.
• Model repeatable items as blocks and loop over section.blocks to render them.
• Keep templates as JSON so pages are composable and version-controlled.
• Use app blocks instead of hardcoding app embeds into theme code.
• Drive section content from metafields so one layout serves the whole catalog.
• Reserve headless for needs a custom theme genuinely cannot meet.

What is Online Store 2.0?

It is Shopify's theme architecture that makes every page template section-based, defined in JSON, rather than limiting editable sections to the homepage. It also added app blocks and stronger metafield support. For merchants it means they can compose and rearrange product, collection, and other pages in the theme editor, and for developers it means building reusable, configurable sections that the merchant assembles, so a custom theme stays editable instead of being locked to a developer.

How do I make a custom design that the store owner can still edit?

Build the design as sections with schema settings. Each section is a Liquid file whose {% schema %} declares editable controls, headings, images, links, layout options, that appear in the theme editor, plus presets so it can be added to pages. Repeatable items become blocks the merchant can add and reorder. The result is a bespoke look where the owner edits content and arrangement themselves, without touching code or needing a developer for routine changes.

What is the difference between a section and a block?

A section is a self-contained, configurable area of a page, a featured promo, a product gallery, a logo wall, with its own settings. A block is a repeatable item inside a section, like an individual logo, feature, or testimonial, that the merchant can add, remove, and reorder. You define both in the section's schema and loop over section.blocks in Liquid to render the blocks, which lets one section hold a variable list of items the merchant controls.

Should I build a custom theme or go headless?

Build a custom Online Store 2.0 theme when you want a bespoke, on-brand storefront that the merchant can still edit, with much less complexity than headless and no need to rebuild checkout and hosting. Go headless only when you need performance or a shopping experience a theme genuinely cannot deliver, and have the development resources to maintain it. For most stores that want to look custom and stay editable, a well-built 2.0 theme is the right and far cheaper choice.

How do I show custom product data in a theme section?

Drive the section's content from metafields. Define the custom data as product metafields, then read them in the section's Liquid so the layout is built once and each product supplies its own values, specs, ingredients, a linked size guide. This keeps the presentation in a reusable section and the data native in Shopify, which is the clean, app-free way to display rich, structured content consistently across an entire catalog.

If you want a storefront that looks custom but stays editable for your team, tell me how you want it to look and work and I will map out the sections and blocks to build it.