Introducing the Shopify Section Schema Builder

If you’ve ever built a Shopify theme, you know the pain: writing section schema JSON by hand. One missing comma, a typo in a setting type, or forgetting that collection_list has a max limit of 50—and you’re debugging for an hour. That’s why we built the Shopify Section Schema Builder.

The Problem with Manual Schema Writing

Section schemas are the backbone of customizable Shopify sections. They define what merchants can configure in the theme editor. A typical schema might look like this:

{
  "name": "Featured Collection",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Featured Products"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "label": "Products to show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 4
    }
  ],
  "presets": [
    {
      "name": "Featured Collection"
    }
  ]
}

Now imagine building a complex section with 15 settings, multiple blocks, presets with default values, and localized strings for multiple languages. That’s where things get messy:

• Syntax errors: One wrong bracket and the entire section breaks
• Validation rules: Did you know range settings can have at most 101 steps? Or that product_list limits max out at 50?
• Duplicate IDs: Easy to accidentally reuse an ID across settings and blocks
• No preview: You don’t see your schema until you push it to the theme

Enter the Schema Builder

Our Shopify Section Schema Builder is a visual tool that solves all of these problems. Here’s what it does:

1. Visual Form-Based Editing

Instead of writing JSON, you fill out forms. Select a setting type from a dropdown, enter the ID and label, configure options—and the schema writes itself.

Every setting type is supported:

• Basic inputs: text, textarea, number, range, checkbox, radio, select
• Specialized: color picker, color background (with gradient builder!), color schemes, font picker
• Media: image picker, video, video URL
• Resources: article, blog, collection, product, page, link list
• Advanced: URL, rich text, inline rich text, HTML, Liquid code
• Layout: headers and paragraphs for organizing the editor UI

2. Real-Time JSON Preview

As you build your schema, the JSON output updates instantly. You see exactly what will go in your {% schema %} tag. No surprises, no guessing.

The preview is syntax-highlighted and shows the complete schema including settings, blocks, presets, locales, and enabled_on/disabled_on restrictions.

3. Built-In Validation

The builder catches errors before they become problems:

• Duplicate ID detection: The ID field shows an error if you try to use an ID that’s already in use
• Range validation: Ensures min < max, validates step count (max 101 steps), and auto-calculates valid default values
• Limit validation: collection_list and product_list warn you when the limit exceeds 50
• URL validation: Checks that URL defaults are valid (full URLs or relative paths like /collections)
• Rich text validation: Ensures default content uses only allowed HTML tags

4. Visual Gradient Builder

The color_background setting type accepts CSS gradients. Instead of typing linear-gradient(90deg, #000 0%, #fff 100%) by hand, use our visual builder:

• Pick colors with a color picker
• Add and remove color stops
• Adjust positions with sliders
• Set gradient angle
• See a live preview of the gradient

5. Rich Text Editor

For richtext and inline_richtext default values, we provide a visual editor with:

• Bold, italic, underline formatting
• Headings (H1-H6)
• Bullet and numbered lists
• Link insertion
• The output automatically follows Shopify’s HTML requirements (proper <p> and <ul> wrapping)

6. Block Management

Create and configure blocks with their own settings. Drag and drop to reorder. Each block gets:

• Type identifier
• Display name
• Optional limit (max instances)
• Its own settings array

7. Preset Configuration

Presets are pre-configured versions of your section. The builder lets you:

• Set default values for any section setting
• Add blocks with their own default values
• Reorder preset blocks
• Auto-fill from schema defaults

8. Localization Support

For sections that need translation, the Locales panel lets you:

• Add translations for any supported language
• Set a “main” locale that other locales follow (for key structure)
• Auto-generate keys from your section name, setting labels, and block names
• Sync new settings to existing locales when you update the schema
• Drag and drop to reorder locales

9. Template Restrictions

Use the enabled_on or disabled_on settings to control where your section appears:

• Allow on specific templates (product, collection, index, etc.)
• Restrict to section groups (header, footer, aside)
• Add custom section group types

10. Save, Load, and Export

• Auto-save: Your work is automatically saved to browser storage
• Named saves: Save multiple schemas with names for easy access
• Export: Download your schema as a JSON file
• Import: Load an existing schema to edit it

Who Is This For?

• Theme developers building new sections who want to move faster
• Agency developers who build multiple themes and need consistency
• Solo developers who don’t have time to debug JSON typos
• Beginners learning Shopify theme development who want to understand schema structure

Try It Now

The Schema Builder is free to use at /tools/schema-builder. No sign-up required.

Build your next section schema in minutes, not hours. And when you’re ready to go deeper, check out our Schema Types Deep Dive lesson for a comprehensive reference of every setting type.

Have feedback or feature requests? We’re continuously improving the tool based on developer needs. Let us know what would make your workflow even better.