Customizing Shopify Themes the Online Store 2.0 Way

"Customizing a Shopify theme" used to mean editing Liquid and hoping. Online Store 2.0 changed the model completely: pages are JSON templates, content lives in sections and blocks that merchants rearrange in the editor, and data comes from metafields. If you customize the old way — hardcoding into .liquid — you build something the merchant can't touch and the next theme update overwrites. Here's the model that survives.

Pages are JSON, not Liquid

In a 2.0 theme, templates/product.json is not markup — it's a list of which sections appear and in what order. The editor writes to this file. That means the unit of customization is the section, and every section you build must expose its settings through a {% schema %} block so the merchant can configure it without code:

<!-- sections/trust-badges.liquid -->
<div class="trust-badges" style="--cols: {{ section.settings.columns }}">
  {% for block in section.blocks %}
    <div class="badge" {{ block.shopify_attributes }}>
      {{ block.settings.icon }}
      <span>{{ block.settings.label }}</span>
    </div>
  {% endfor %}
</div>

{% schema %}
{
  "name": "Trust badges",
  "settings": [
    { "type": "range", "id": "columns", "label": "Columns", "min": 2, "max": 5, "default": 4 }
  ],
  "blocks": [
    { "type": "badge", "name": "Badge", "settings": [
      { "type": "text", "id": "icon",  "label": "Icon (emoji or HTML)" },
      { "type": "text", "id": "label", "label": "Label" }
    ]}
  ],
  "presets": [{ "name": "Trust badges" }]
}
{% endschema %}

The presets key is what makes the section draggable into any page. {{ block.shopify_attributes }} is mandatory — it wires the block to the editor so clicking it in the preview selects it. Skip it and the merchant can't edit what they see.

Blocks are the reuse unit — don't hardcode repeating content

Any content that repeats (badges, FAQs, feature rows, logos) belongs in blocks, not in a fixed loop over hardcoded values. Blocks give the merchant add/remove/reorder for free. The rule of thumb: if you catch yourself copy-pasting a markup fragment three times in a section, it should have been a block.

Metafields: dynamic content without touching code

Hardcoding a "Materials" or "Care instructions" line into the product template is the classic un-editable trap. Instead, define a product metafield and bind a setting to it as a dynamic source. In the section schema you expose a text setting; in the editor the merchant clicks the dynamic-source icon and points it at product.metafields.custom.materials. Now every product renders its own value and the merchant edits data, not theme code:

{% if product.metafields.custom.materials %}
  <p class="materials">{{ product.metafields.custom.materials | metafield_tag }}</p>
{% endif %}

metafield_tag renders the value with the right markup for its type (rich text, list, measurement) — safer than piping a raw metafield through | escape and guessing.

App blocks: let apps drop into your theme without edits

Theme app extensions expose app blocks that merchants add through the editor — no more pasting an app's snippet into theme.liquid and forgetting to remove it when they uninstall. When you build custom sections, add { "type": "@app" } to the block list so app blocks can sit inside your section. This is also why a modern theme rarely needs manual snippet installs.

Customize in a way updates won't destroy

• Never edit vendor sections in place — copy to a new file, or your changes vanish on the next theme update. Keep custom sections clearly namespaced.
• Use settings_schema.json for global tokens (brand color, fonts, radius) and read them via CSS variables, so a rebrand is one editor change, not a find-and-replace.
• Prefer theme app extensions over Liquid edits for anything an app provides — uninstall stays clean.

The test of a good Shopify customization isn't how it looks on launch day — it's whether the merchant's marketing team can change the hero, reorder the sections, and swap a badge six months later without opening the code editor.WS24 — how we hand a theme back to a client

Online Store 2.0 rewards customization that pushes decisions out of Liquid and into sections, blocks, and metafields. Build it that way and the theme is genuinely editable, upgrade-safe, and ready for the merchant to own — which is the whole point.