Shopify Online Store 2.0 Theme Architecture: The Developer's Complete Reference

Online Store 2.0 shipped in June 2021 and fundamentally rewired how Shopify themes work. JSON templates replaced Liquid templates as the default. Sections became available on every page, not just the homepage. App blocks replaced the messy script injection pattern. And native metafields eliminated the need for third-party metafield apps.

Five years later, most developers understand the concept. But we still see agencies delivering themes where the product page is a product.liquid file with hardcoded sections, the blog template has no block support, and metafields still require a third-party app. That's a 1.0 theme in a 2.0 folder structure.

This is the reference we give every new developer joining our Shopify development team at Innovatrix. It covers the architectural decisions that actually save time on production builds — not the theory, the practice.

---

The Quick Test: Is Your Theme Actually 2.0?

Open your theme's /templates folder. If you see product.liquid instead of product.json, you are running legacy architecture — regardless of what the theme claims.

A proper 2.0 theme has:

• /templates/*.json files (not .liquid)
• /sections/ directory with modular, reusable sections
• {% schema %} blocks in every section with proper presets
• App block support via @app block type in schemas
• No {% include %} tags (deprecated — use {% render %})

---

JSON Templates vs. Liquid Templates

This is the single most important architectural change in 2.0.

Liquid templates (legacy): The template file contains HTML and Liquid code directly. The layout is hardcoded by the developer. Merchants cannot rearrange sections or add new ones.

{%- comment -%} templates/product.liquid — LEGACY, avoid this {%- endcomment -%}
<div class="product-page">
  {% section 'product-hero' %}
  {% section 'product-description' %}
  {% section 'related-products' %}
</div>

JSON templates (2.0): The template file is a JSON data file that lists which sections appear and in what order. Merchants can add, remove, and reorder sections through the theme editor.

{
  "sections": {
    "main": {
      "type": "main-product",
      "settings": {}
    },
    "recommendations": {
      "type": "product-recommendations",
      "settings": {
        "heading": "You may also like"
      }
    }
  },
  "order": ["main", "recommendations"]
}

Why this matters for your business: Every layout change on a Liquid template requires a developer. At ₹500-1,500 per edit (typical agency rate), a mid-size store making 8-20 layout changes per year spends ₹4,000-30,000 annually on changes that merchants could make themselves with a proper 2.0 theme. We've seen this pattern across our 50+ builds — the ROI of a 2.0 architecture pays for itself within months.

---

Sections Everywhere: What It Enables (and What It Breaks)

Before 2.0, sections only worked on the homepage. Every other page was a rigid Liquid template.

Now, every page type — product, collection, cart, blog, article, custom pages — supports sections. Merchants can build entirely different layouts for different product templates, collection templates, and page templates.

What this enables:

• Campaign-specific landing pages (create a new product template, add marketing sections)
• A/B testing different product page layouts without code changes
• Different collection page designs for different categories (a "Lookbook" collection template vs. a "Grid" collection template)
• Seasonal homepage redesigns in 10 minutes instead of a developer sprint

What it breaks in older themes:

• Themes with hardcoded CSS that assumes a specific section order will break when merchants rearrange sections
• JavaScript that targets specific DOM elements by position (.product-page > div:nth-child(2)) will fail
• Sections that depend on data from other sections can't guarantee their siblings exist

Our rule: Every section must be self-contained. It should function correctly regardless of which other sections are on the page, what order they appear in, or how many instances exist. This is the fundamental architectural principle of 2.0.

---

The Section/Block/Setting Hierarchy

Understanding the three-level hierarchy is essential for building maintainable themes.

Sections are the top-level containers. Each JSON template can have up to 25 sections. Sections define the overall layout unit (hero banner, product grid, testimonial carousel).

Blocks live inside sections and represent repeatable content units. Each section can contain up to 50 blocks. Blocks are the individual items within a section (a single testimonial, a single feature card, a single FAQ item).

Settings exist on both sections and blocks. They're the configuration fields merchants interact with in the theme editor (text inputs, colour pickers, image selectors, range sliders).

{% schema %}
{
  "name": "Testimonials",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Section Heading",
      "default": "What Our Customers Say"
    }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        {
          "type": "richtext",
          "id": "quote",
          "label": "Quote"
        },
        {
          "type": "text",
          "id": "author",
          "label": "Author Name"
        },
        {
          "type": "image_picker",
          "id": "avatar",
          "label": "Author Photo"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Testimonials",
      "blocks": [
        { "type": "testimonial" },
        { "type": "testimonial" },
        { "type": "testimonial" }
      ]
    }
  ]
}
{% endschema %}

Rendering blocks in Liquid:

<div class="testimonials">
  <h2>{{ section.settings.heading }}</h2>
  {% for block in section.blocks %}
    <div class="testimonial">
      <blockquote>{{ block.settings.quote }}</blockquote>
      
        {% if block.settings.avatar %}
          {{ block.settings.avatar | image_url: width: 60 | image_tag: class: 'avatar' }}
        {% endif %}
        {{ block.settings.author }}
      
    </div>
  {% endfor %}
</div>

Note the {{ block.shopify_attributes }} — this outputs data-shopify-editor-block attributes that enable the theme editor to identify and highlight individual blocks. Always include this on your block container element.

---

App Blocks vs. Theme App Extensions

This is the distinction most developers get wrong.

Theme App Extensions are the developer-side framework. App developers build extensions using Shopify CLI that define app blocks, app embed blocks, and app snippets.

App Blocks are the merchant-facing result. They appear in the theme editor as draggable blocks that merchants can add to sections — just like native theme blocks.

The critical benefit: when a merchant uninstalls an app, its app blocks are automatically removed from the theme. No orphaned `