Skip to main content

Section Schema Builder

Visually build complete Shopify section schemas — settings, blocks, and presets

Build the theme-editor contract, not storefront markup

The builder creates the JSON object used inside a section's {% schema %} tag. It does not create the Liquid markup that reads each setting. Keep the generated IDs aligned with references such as section.settings.heading and block.settings.image.

Add Setting

Adding to:Section
Text
Visual
Media
Selection
Resources
Metaobjects
Labels
Section Settings0 settings

Add settings from the Add Setting panel on the left, or start from a template:

Generated Schema

Shopify section schema essentials

Section schema is strict JSON: double-quoted property names and strings, no comments, and no trailing commas. Shopify reads it to build editor controls.

Choose setting types by returned value

text / textarea
Plain strings. Escape them when outputting into HTML.
richtext / inline_richtext
Formatted content. Render as HTML in a compatible container.
image_picker
An image object used with image filters, not a raw URL string.
url
A destination selected or entered in the editor.
checkbox, range, select
Boolean, numeric, or enumerated design controls.

Blocks and presets solve different problems

Blocks define repeatable merchant-managed items and their settings. The Liquid must loop over section.blocks and include block.shopify_attributes on a suitable wrapper.

Presets make a section available in the Add section picker and can pre-populate block instances. A preset does not define a new block type.

Valid schema with settings, blocks, and a preset

{
  "name": "Feature list",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "checkbox",
      "id": "show_icons",
      "label": "Show icons",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Feature list",
      "blocks": [
        {
          "type": "feature"
        },
        {
          "type": "feature"
        }
      ]
    }
  ]
}

Common invalid-schema causes

  • A comment, single-quoted string, or trailing comma makes the schema invalid JSON.
  • A duplicate setting ID creates ambiguous stored values.
  • A select default does not match an option value, or a range default falls outside its bounds.
  • A preset names a block type that is not declared in blocks.
  • The schema sits outside its section file or more than one schema tag is present.

Test the generated schema

  1. Paste the JSON into a JSON parser before wrapping it in schema tags.
  2. Run Theme Check against the containing section file.
  3. Preview it through Shopify CLI in a development theme.
  4. Add the section, exercise every control, and reload the editor to confirm values persist.
  5. Add, remove, and reorder blocks; then verify the storefront and editor selection state.

Use the invalid-schema debugging guide, the input setting reference, and Shopify's official section schema documentation when a platform rule is unclear.