Online Store 2.0 in practice: sections, blocks and JSON templates

Online Store 2.0 changed how Shopify themes are built. If you learned theme development before it, or you are coming to Shopify from another platform, the key is one idea: merchants compose pages out of sections, and developers define what sections can do.

JSON templates

In the old model, a template such as product.liquid hard-coded the page. In Online Store 2.0, templates can be JSON files. A JSON template doesn't contain markup. It lists which sections appear on the page, in what order, with what settings.

That means a merchant can add, remove and reorder sections on any page through the theme editor, not just the homepage. As a developer, your job moves from writing pages to writing good sections.

Anatomy of a section

A section is a Liquid file with markup and a schema that tells the theme editor what is configurable:

<section class="feature-row">
  <h2>{{ section.settings.heading }}</h2>

  {% for block in section.blocks %}
    <div class="feature" {{ block.shopify_attributes }}>
      {% case block.type %}
        {% when 'feature' %}
          <h3>{{ block.settings.title }}</h3>
          <p>{{ block.settings.text }}</p>
      {% endcase %}
    </div>
  {% endfor %}
</section>

{% schema %}
{
  "name": "Feature row",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Why choose us" }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        { "type": "text", "id": "title", "label": "Title" },
        { "type": "textarea", "id": "text", "label": "Text" }
      ]
    }
  ],
  "presets": [{ "name": "Feature row" }]
}
{% endschema %}

A few details here matter more than they look.

block.shopify_attributes is what lets the theme editor highlight and select the right block when the merchant clicks it. Forget it and the editor feels broken.

presets is what makes a section appear in the editor's "Add section" list. Without a preset, a section can only be used where a template already includes it.

Settings need defaults. An empty section looks broken in the editor and in production. Sensible defaults mean it looks right the moment it is added.

Blocks are the real flexibility

Sections give merchants layout control; blocks give them content control inside a section. Good block design is where theme work is won or lost. A "feature row" where the merchant can add any number of features, reorder them and delete them is far more useful than one with exactly three hard-coded slots.

The trade-off is that flexibility has a maintenance cost. Every setting you expose is something you must support, test and keep working across theme updates. I add settings when a real need appears, not speculatively.

App blocks

Online Store 2.0 also lets apps ship app blocks: pieces of app functionality a merchant drops into a section from the editor, with no developer editing theme code. For developers building apps, this is the clean way to put UI on the storefront. For theme developers, it means leaving space for them: sections that accept app blocks make the store easier to extend without touching the theme.

Habits that keep themes healthy

• Work on a duplicate theme. Edit and preview there, publish when it is checked.
• Keep sections self-contained. A section that carries its own markup, styles and schema is easy to move, reuse and delete.
• Prefer theme settings to custom code. If a change can be a setting, make it one, so the merchant can maintain it without calling you.
• Hand over a short change summary. What changed, in which files, how to verify it.

Online Store 2.0 isn't new anymore, but a surprising number of stores still run themes that don't use it well. The gap between "technically 2.0" and "built to be edited by the merchant" is where a lot of the value is.