← Back to guides
ArchitectureSchemaSchema · Published 2026-06-08 · 3 min read

How Shopify Schema Works

Understand how Shopify section schema connects Liquid templates to the theme editor—settings, blocks, presets, and JSON structure explained for developers.

Share with Shopify developers — useful guides spread faster in theme dev communities.

Schema is the bridge between code and merchants

{% schema %} JSON at the bottom of each section file defines sidebar fields merchants edit—settings, blocks, presets. Stable setting ids preserve merchant data across theme deploys; invalid JSON prevents the section from appearing in the editor at all.

How the theme editor reads schema

When a merchant opens the theme editor, Shopify parses each section's schema and renders form fields in the sidebar. Each setting id becomes section.settings.your_id in Liquid. Each block type becomes a template for rows merchants add, remove, and reorder.

Schema changes require theme code deploys. Merchant edits to setting values live in theme JSON—not in your schema file—so stable setting ids are critical.

Settings: section-level controls

Settings apply to the whole section—module heading, background color, collection picker, padding range. Common types: text, richtext, image_picker, url, collection, product, range, checkbox, select, color.

{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "Featured collection"
}

Blocks: repeatable rows

Blocks power FAQs, sliders, feature cards, and tabs. Schema defines block types; Liquid loops section.blocks. Merchants manage rows in the editor. See Dynamic Blocks Guide and How to Build Dynamic Blocks.

Presets and discovery

Presets surface sections in the Add section panel. A preset needs a name and can seed default settings and blocks. Custom sections without presets are invisible to merchants on JSON templates.

Defaults and merchant-first UX

Default values in schema pre-fill settings on new section instances. Good defaults mean merchants see a usable layout immediately—placeholder copy, sample images, two FAQ rows—not empty fields.

Schema best practices

  • Keep setting counts manageable; group with header settings.
  • Use descriptive ids—heading not field_1.
  • Match setting types to content; richtext for formatted body copy.
  • Set max_blocks on repeatables to protect editor performance.
  • Validate JSON before commit; trailing commas break parsing.

From schema theory to practice

Generate schema from HTML with HTML to Liquid Converter, then open the converter workspace, refine visually in Schema Generator, and study patterns in Schema Guide. Read Section Schema Explained for a complementary walkthrough.

Schema JSON is versioned with your theme

Deploying schema changes requires theme release. Merchant edits to setting values live in template JSON on Shopify servers—stable setting ids preserve data across deploys; renames wipe merchant content. Treat ids like database columns.

blocks, presets, and default block arrays

"presets": [{
  "name": "FAQ",
  "blocks": [
    { "type": "faq_item", "settings": { "question": "Shipping times?" } },
    { "type": "faq_item", "settings": { "question": "Returns?" } }
  ]
}]

Seed two block rows so merchants see repetition working immediately—reduces "empty section" support tickets.

Theme editor rendering pipeline

Shopify parses schema → builds sidebar fields → writes values to template JSON → hydrates section.settings and block.settings at render. If sidebar fields look wrong, fix schema—not Liquid first.

Troubleshooting

  • Invalid JSON → section absent from editor
  • Missing preset → cannot add section dynamically
  • Wrong block type in preset → validation error on insert

Topic cluster

Schema

Section schema, settings, blocks, and theme editor integration.

Convert HTML to Shopify Liquid

Paste HTML & generate Liquid with schema, blocks, and scoped CSS. No signup required.

Share

Share this guide

Found this guide useful? Share it with other Shopify developers on LinkedIn, X, or Reddit.