Schema Studio
Liquid schema generator for Online Store 2.0
Visually design Shopify section schema JSON with settings, blocks, and presets that keep your Liquid templates flexible and maintainable.
Overview
What is a Liquid schema generator?
Schema-first development
Some teams design merchant controls before writing markup—especially for complex bands with fifteen toggles, range sliders, and grouped headers. The Liquid schema generator is for that contract-first workflow, not just post-conversion cleanup.
Who needs a visual schema builder
Developers who find JSON trailing-comma errors costly, tech leads standardizing setting types across a module library, and anyone adding blocks/presets to an existing section without regenerating markup from HTML.
When to start in schema generator
Extending an existing section with new settings, defining block types before Liquid exists, or fixing invalid JSON that broke the entire section in the editor. Also when adding help_text, visible_if, or max_blocks after converter export.
When schema generator is not enough
It does not replace Liquid markup—you still wire section.settings in HTML. It does not migrate merchant data when you rename setting ids (treat ids as stable columns). Full HTML restructuring still needs the converter.
Schema mistakes that break the editor
Trailing commas. Duplicate ids across blocks. text type for URLs. Missing presets. block types in preset that are not defined in blocks array. Range min/max that allow values your CSS cannot support.
Schema design workflow
List merchant-editable fields → pick types (text, richtext, url, image_picker) → group with header settings → define blocks for repeatables → seed preset with two block rows → copy JSON into section.liquid → match every id in Liquid exactly.
Validation before deploy
Paste JSON through external validator. Confirm preset block types exist. Test image_picker blank state in editor. Verify richtext fields render inside .rte wrapper in Liquid. Cross-check Section Schema Explained blog article.
Capabilities
Everything you need for robust schema design
Use the Liquid schema generator to design safe, expressive section controls that match the way merchants actually work.
Visual schema builder
Add text, richtext, image_picker, url, checkbox, select, and range settings without hand-writing JSON.
Block definitions
Define block types for FAQs, cards, slides, and rows with per-block settings and labels.
Schema validation
Catch invalid IDs, missing presets, and structural issues before schema ever reaches your theme.
Dawn-style patterns
Model your schema after Shopify’s Dawn theme so sections behave predictably in Online Store 2.0.
Schema that matches your CSS
Design settings that map cleanly to your class names and utility choices—no disconnected controls.
Ready to paste JSON
Copy clean, formatted JSON directly into your section.liquid file or use it inside the converter.
Process
How the Liquid schema generator works
Design schema alongside your HTML and Liquid templates so sections stay flexible long after launch.
- 01
Paste or reference HTML
Start from existing section markup or a new layout designed in your favorite tools.
- 02
Analyze editable fields
Decide what merchants should be able to change—headings, media, CTAs, spacing, or colors.
- 03
Generate schema
Use the visual builder to add settings and blocks, then copy the JSON into your section.liquid file.
- 04
Wire into Liquid
Replace hardcoded values with section.settings and block.settings references and ship.
Related
Related tools and guides
Guide
HTML to Liquid Converter
Free guide — generate Liquid and schema directly from HTML snippets.
Open tool →Tool
Open converter workspace
Paste HTML and generate Liquid + schema in the browser.
Open tool →Tool
Shopify Schema Generator
Work in the full schema studio for complex section definitions.
Open tool →Reference
Liquid Cheat Sheet
Look up common schema patterns and Liquid snippets.
Open tool →Guide
HTML to Shopify Section
Connect your schema designs to real Liquid templates.
Open tool →Blog
Schema architecture articles
Learn how to design maintainable schema for clients and teams.
Open tool →Share
Share this guide
Found this useful? Share it with other Shopify developers.
Convert HTML to Shopify Liquid
Paste HTML & generate Liquid with schema, blocks, and scoped CSS. No signup required.