Free tool
Shopify section schema generator
Add the settings and blocks your section needs and get a valid {% schema %} block to paste into your theme — or a starter .liquid file with the markup already reading every setting. Everything runs in your browser; nothing you type is sent anywhere.
Section
Settings
Blocks
{% schema %}
{
"name": "Feature highlights",
"tag": "section",
"class": "feature-highlights",
"max_blocks": 6,
"settings": [
{ "type": "header", "content": "Content" },
{ "type": "text", "id": "heading", "label": "Heading", "default": "Why customers switch" },
{ "type": "richtext", "id": "intro", "label": "Intro", "default": "<p>Three reasons, in plain words.</p>" },
{ "type": "header", "content": "Style" },
{ "type": "color", "id": "accent", "label": "Accent colour", "default": "#5d4787" },
{ "type": "range", "id": "columns", "label": "Columns on desktop", "min": 2, "max": 4, "step": 1, "default": 3 },
{ "type": "select", "id": "layout", "label": "Layout", "options": [{"value": "grid", "label": "Grid"},{"value": "carousel", "label": "Carousel"}], "default": "grid" },
{ "type": "checkbox", "id": "show_border", "label": "Show card borders", "default": true }
],
"blocks": [
{
"type": "feature",
"name": "Feature",
"settings": [
{ "type": "image_picker", "id": "icon", "label": "Icon" },
{ "type": "text", "id": "title", "label": "Title", "default": "Ships in 24 hours" },
{ "type": "textarea", "id": "text", "label": "Text", "default": "Order by 3pm and it leaves the same day." }
]
}
],
"presets": [
{ "name": "Feature highlights", "blocks": [{"type": "feature"}] }
]
}
{% endschema %}What a section schema does
Every Shopify section ends in one {% schema %} tag holding a JSON object. It is how the theme editor knows what to show: the section's name, the settings merchants can change, the blocks they can add and reorder, and the preset that puts the section in the Add section list.
The Liquid above the schema reads those values — section.settings.heading, block.settings.image — so the schema is the contract between the code and the person editing the store. Get it wrong and Shopify refuses to save the file.
Setting types at a glance
text- A single line of text — headings, button labels.
textarea- Plain text over several lines.
richtext- Formatted text with bold, italic and links. Its default must be wrapped in <p>.
inline_richtext- Formatting without paragraphs — for a heading with one bold word.
image_picker- An image from the store's files. It cannot have a default.
url- A link to a product, collection, page or any web address.
checkbox- An on/off switch. The default is true or false.
number- A number typed into a field.
range- A slider with a min, max and step — at most 101 steps.
select- A dropdown of options you define.
color- A colour picker.
font_picker- A font from Shopify's library. A default is required.
product / collection- Pick a product or collection and read its data in Liquid.
header / paragraph- Not settings — headings and notes that organise the sidebar.
Why Shopify rejects a schema
The messages the theme editor shows when a section will not save, and what causes them:
Invalid JSON in tag 'schema'
A trailing comma, a single quote or a missing bracket. The schema is strict JSON — and it cannot contain Liquid.
Setting IDs must be unique
Two settings share an ID. Block settings only need to be unique within their block.
Invalid default value
The default does not fit the type — a range default outside its min and max, or a select default that is not one of its options.
The section doesn't appear under Add section
It has no presets. A section without a preset can only be included from code.
Questions, answered
What is {% schema %} in Shopify?
It is the tag at the end of a section file that holds a JSON object describing the section — its name, settings, blocks and presets. The theme editor reads it to build the sidebar merchants use to customise the section.
Where do I paste the schema?
At the bottom of the section's .liquid file in your theme's sections folder, after the markup. A section can only have one {% schema %} tag.
Why doesn't my section show up in the theme editor?
Almost always because the schema has no presets. Add a preset with the section's name and it will appear under Add section. On a vintage theme, sections can only be added to the home page.
Is this generator free?
Yes, with no account. It runs entirely in your browser, and nothing you type leaves your device.
Can it write the rest of the section too?
The starter file gives you markup that reads every setting. For a finished, styled section — layout, CSS, JavaScript and all — describe it to Klorr and it writes the whole file.
Want the whole section, not just the schema?
Describe a section in plain English and get Shopify Liquid code, a full schema and theme-editor settings. Works in any Online Store 2.0 theme. No app needed.
Liquid code generator →