Shopify Sections and Blocks: Complete Theme Customization Guide

Shopify's section and block architecture is the system that determines how you build and customize your store's pages. Understanding it deeply — how sections work, what blocks do, how templates organize them, and how dynamic sources connect data — is the difference between a store that looks like a template and one that looks custom-built.

Since Online Store 2.0 launched in 2021, this architecture has been Shopify's most powerful customization tool. Yet most merchants use only a fraction of its capabilities because the system is not well explained in Shopify's documentation.

This guide covers everything from the fundamentals to advanced techniques.

What Are Sections in Shopify?

A section is a modular, self-contained content block that represents a distinct area of a page. Each section has its own settings, its own Liquid template, its own CSS and JavaScript (optional), and can be independently added, removed, repositioned, and configured through the theme editor.

Examples of sections:

• Hero banner with image, heading, and call-to-action button
• Featured product grid showing selected products
• Testimonials carousel with customer quotes
• Newsletter signup form
• Rich text content area
• Image with text overlay
• Collapsible FAQ accordion
• Multi-column feature highlights

The critical concept: sections are self-contained. Each section defines what settings it needs, what blocks it accepts, and how it renders. Adding a section to a page does not affect other sections.

What Are Blocks Inside Sections?

Blocks are smaller, repeatable components that exist within a section. If a section is a container, blocks are the items inside it.

Blocks can be added, removed, and reordered by merchants in the theme editor without touching code. A section defines the maximum and minimum number of blocks it accepts, and the types of blocks available.

For example, a "Features" section might accept up to 6 blocks of type "feature_card," each with settings for an icon, heading, description, and link.

What Changed with Online Store 2.0?

Online Store 2.0 (OS 2.0) was a fundamental architecture upgrade. Here is what changed:

Before OS 2.0:

• Sections only worked on the homepage
• Product, collection, and other pages used fixed template files
• Adding content to non-homepage pages required editing Liquid code
• Apps injected code into theme.liquid or snippet files
• No page-level template customization

After OS 2.0:

• Sections work on every page (product, collection, blog, cart, custom pages)
• JSON templates define page layouts and can be customized per page
• App blocks integrate into sections through the theme editor
• Dynamic sources connect metafields to section settings
• Multiple templates per page type (e.g., different product page layouts for different product types)

If your theme was built before 2021 and has not been updated, you are missing these capabilities. Shopify's Dawn theme (free) and most modern premium themes are fully OS 2.0 compatible.

How Do JSON Templates Work?

JSON templates are the mechanism that enables sections on every page. Instead of Liquid template files that contain HTML code, OS 2.0 uses JSON files that define which sections appear on a page and their settings.

A product page JSON template looks like this:

{
  "sections": {
    "main": {
      "type": "main-product",
      "settings": {
        "show_vendor": true,
        "show_sku": true
      },
      "blocks": {
        "title": { "type": "title" },
        "price": { "type": "price" },
        "variant_picker": { "type": "variant_picker" },
        "buy_buttons": { "type": "buy_buttons" },
        "description": { "type": "description" }
      },
      "block_order": ["title", "price", "variant_picker", "buy_buttons", "description"]
    },
    "related_products": {
      "type": "related-products",
      "settings": {
        "heading": "You may also like",
        "products_to_show": 4
      }
    }
  },
  "order": ["main", "related_products"]
}

The JSON template defines the sections, their settings, their blocks, and the order everything appears. When a merchant customizes a page in the theme editor, Shopify updates this JSON file — no Liquid code changes needed.

Creating alternate templates: You can create multiple JSON templates for the same page type. For example, product.json for standard products and product.with-size-guide.json for apparel products that need a size chart section. Assign templates to specific products in the Shopify admin.

How Do You Use Dynamic Sources?

Dynamic sources connect metafield data to section and block settings without code. This is one of OS 2.0's most powerful and underused features.

How it works: When editing a section in the theme editor, text fields, image fields, and URL fields show a small "Connect dynamic source" icon. Clicking it lets you select a metafield as the source for that setting.

Example uses:

Dynamic sources mean a single section template can display different content for different products, collections, or pages — all without code changes. The merchant enters data in metafields, and the section pulls it automatically.

How Do App Blocks Work?

App blocks allow third-party Shopify apps to integrate into your theme's section architecture, rather than injecting code directly into your theme files.

Before app blocks: Installing a review app meant the app injected code into your product template file. Uninstalling left orphaned code. Moving the review display required editing Liquid. Multiple apps injecting into the same template created conflicts.

With app blocks: The review app provides an app block that you add to your product page template through the theme editor. You position it exactly where you want it. Removing it is a click — no code cleanup needed. It coexists cleanly with other sections and blocks.

Finding app blocks: In the theme editor, click "Add section" or "Add block" and look for app blocks in the list. Only apps that support OS 2.0 app blocks will appear. Many popular apps have been updated to support this integration.

Benefits for store management:

• Add and remove app functionality without editing code
• Reposition app content by dragging sections
• No leftover code when uninstalling apps
• Cleaner theme code with fewer custom snippet files

How Do You Create Custom Sections?

For functionality not covered by your theme's built-in sections, you can create custom sections:

Step 1: In the theme code editor, create a new file in the sections/ directory (e.g., sections/custom-trust-badges.liquid).

Step 2: Define the section's Liquid template, schema, and optional CSS/JavaScript:

<section class="trust-badges">
  <div class="trust-badges__container">
    {% for block in section.blocks %}
      <div class="trust-badge" {{ block.shopify_attributes }}>
        {% if block.settings.icon != blank %}
          {{ block.settings.icon | image_url: width: 80 | image_tag }}
        {% endif %}
        <h3>{{ block.settings.heading }}</h3>
        <p>{{ block.settings.text }}</p>
      </div>
    {% endfor %}
  </div>
</section>

{% schema %}
{
  "name": "Trust Badges",
  "settings": [
    {
      "type": "text",
      "id": "section_heading",
      "label": "Section Heading",
      "default": "Why Shop With Us"
    }
  ],
  "blocks": [
    {
      "type": "badge",
      "name": "Trust Badge",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Badge Icon"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Free Shipping"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Description",
          "default": "On all orders over $50"
        }
      ]
    }
  ],
  "max_blocks": 6,
  "presets": [
    {
      "name": "Trust Badges",
      "blocks": [
        { "type": "badge" },
        { "type": "badge" },
        { "type": "badge" }
      ]
    }
  ]
}
{% endschema %}

Step 3: The presets array makes the section available in the theme editor's "Add section" menu. Without presets, the section can only be referenced directly in JSON templates.

How Do Sections Affect SEO and AI Visibility?

The section architecture directly impacts your store's search performance:

Content structure. Sections that use proper heading hierarchy (H2s, H3s), semantic HTML, and descriptive content improve how search engines understand your pages. A product page with sections for description, specifications, FAQs, and reviews creates a content-rich page that ranks for more keywords.

Page weight. Each section can include its own CSS and JavaScript. Sections with heavy animations, carousels, or embedded videos add page weight. Keep sections lean — load heavy resources only when the section is visible (intersection observer pattern).

AI-readable content. AI search engines parse your rendered HTML for product information. Sections that display metafield data (specifications, materials, compatibility) in clean, labeled HTML give AI systems the structured information they need to recommend your products.

What Are the Steps to Master Shopify Sections and Blocks?

1. Verify you are on an OS 2.0 theme — check if your Templates folder contains JSON files (not just Liquid files)
2. Explore your theme's section library — open the theme editor and click "Add section" on each page type to see what is available
3. Create alternate templates for different product types, collection styles, or page layouts
4. Connect metafields to dynamic sources — create product metafields for data you want displayed through sections
5. Replace app code injections with app blocks — check if your installed apps support OS 2.0 app blocks
6. Build custom sections for functionality your theme does not include (trust badges, comparison tables, feature highlights)
7. Audit section performance — remove or simplify sections that add significant page weight without conversion value
8. Test across devices — verify sections render correctly on mobile, tablet, and desktop

Shopify's section and block system is the most powerful customization tool available without going headless. Merchants who master it can build sophisticated, conversion-optimized pages that rival custom-coded storefronts — all through the visual theme editor. The investment in understanding this system pays dividends every time you need to update a page, launch a campaign, or test a new layout.