Shopify Section Schema Explained

What is Section Schema?

In Shopify Online Store 2.0, the {% schema %} tag is what makes a section editable. It defines the settings, blocks, and presets that appear in the Shopify Theme Customizer.

The Anatomy of a Schema

A basic schema contains a name, an array of settings, and an array of presets.

{% schema %}
{
  "name": "Custom Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading text",
      "default": "Welcome to our store!"
    }
  ],
  "presets": [
    {
      "name": "Custom Banner"
    }
  ]
}
{% endschema %}

Connecting Schema to Liquid

Once you define a setting in the schema with a specific id, you can output it anywhere in your section's HTML using {{ section.settings.your_id }}.

<div class="banner">
  <h2>{{ section.settings.heading }}</h2>
</div>

Why Presets Matter

If you don't include a presets array, your section will not appear in the "Add section" list in the theme editor on JSON templates (like the homepage or product pages). Always include a preset if you want merchants to use your section dynamically.

Automate It

Setting Types Worth Knowing First

Start with text, richtext, image_picker, checkbox, and select. Each type stores data differently—images return an image object, checkboxes return true/false, and richtext outputs HTML.

Blocks vs Section Settings

Section settings are global to the section (one heading, one background color). blocks repeat—slides, FAQs, feature columns. If merchants need to add more than one item, use blocks. See Flat vs Block Sections for when to skip blocks.

Writing JSON manually is tedious. Use the HTML to Liquid Converter to generate valid schemas from markup, or the Schema Generator for quick JSON.