How Shopify sections work

Sections are the building blocks of OS 2.0 themes

A Shopify section is a self-contained .liquid file with markup, optional scoped CSS, and a JSON schema block. Merchants add, remove, reorder, and configure sections in the theme editor without touching code. JSON templates—index.json, product.json—declare which sections appear on each page type.

JSON templates explained

JSON templates replace monolithic Liquid template files. Each template file lists section instances by key, references the section type (filename), and stores default settings. The order array controls render sequence on the storefront.

{
  "sections": {
    "hero": { "type": "image-banner", "settings": {} },
    "featured": { "type": "featured-collection", "settings": { "collection": "frontpage" } }
  },
  "order": ["hero", "featured"]
}

Schema connects sections to the editor

Schema defines what merchants can change. settings arrays hold section-level fields; blocks arrays define repeatable row types. presets expose sections in the Add section panel. Read /shopify-schema-guide for setting types and validation rules.

Blocks and repeatable content

Blocks let merchants scale content—FAQ rows, slides, feature cards. Liquid loops {% for block in section.blocks %} render each row. block.shopify_attributes links editor selection to DOM nodes. /dynamic-shopify-blocks-guide covers block patterns in depth.

Presets and merchant discovery

Without presets, custom sections are invisible in the Add section UI. A preset names the section and can seed default blocks and settings. Ship multiple presets when one section supports distinct layouts—hero vs split hero, FAQ vs compact FAQ.

Section groups

Section groups bundle shared areas—header and footer—across templates. Header groups contain logo, menu, and announcement sections. When adding announcement bars, confirm whether your theme expects them in the header group or as page-level sections.

Dynamic vs static section placement

• Static placement — developer adds section to JSON template in code.
• Dynamic placement — merchant adds section via editor; requires presets.
• App blocks — apps inject into @app block slots inside compatible sections.

From architecture to implementation

Use /shopify-section-tutorial for step-by-step shipping workflow, /converter to generate sections from HTML, and theme guides like /html-to-dawn-theme for deployment on specific themes. /shopify-liquid-examples provides copy-ready Liquid for common components.