What is Shopify section schema?
Shopify section schema is the JSON configuration inside a Liquid section file that tells Shopify which settings, blocks, presets and editor controls the section supports. It is added inside {% schema %} and {% endschema %} tags so merchants can customize theme sections without editing code.
| Schema property | Purpose | Example |
|---|---|---|
name | Shows the section name in the theme editor. | "name": "Collage" |
tag | Changes the wrapper HTML tag Shopify renders. | "tag": "section" |
class | Adds a CSS class to the section wrapper. | "class": "featured-collage" |
settings | Creates editable controls such as text, images and colors. | "type": "text" |
blocks | Lets merchants add repeatable content items. | "type": "slide" |
max_blocks | Limits how many blocks merchants can add. | "max_blocks": 5 |
If you need this implemented in a live theme, PRP Webs provides Shopify development services, Shopify Plus development and ongoing Shopify maintenance support.
What are Schema Tags?
Schema tags allow an individual to define various attributes of a section which include names, blocks, and settings of the section.
Every section in the Shopify liquid theme can have only one {% schema %} tag. And this consist only JSON attributes in the content. The schema tag can be placed in the section file, but remember that you can’t place it in any other Liquid file.
What does the Content of {% schema %} include?
-
name:
The name attribute of the schema tag determines the section title which is shown in the theme editor.
Take a look at the below-mentioned schema:
{% schema %}
{
"name": "Collage"
}
{% endschema %}
-
tag:
When Shopify renders a section, it wraps a particular HTML tag, that is, <div>, as a section wrapper. If you don’t want to use <div>, then the accepted values include article, aside, section, footer, and header.
Have a look at the following schema tag!
-
class:
When Shopify renders a section, the class attribute is added in the HTML tag.
This is how the class tag is added to the schema tag:
{% schema %}
{
"name": "Collage",
"tag": "section",
"class": "Collage"
}
{% endschema %}
-
limit:
In Shopify, there’s no specific limit on the number of times a particular section is to be added to a template.
You can specify the limit by this attribute:
{% schema %}
{
"name": "Collage",
"tag": "section",
"class": "Collage",
"limit": 1
}
{% endschema %}
-
settings:
One can create a different section for specific settings that lets merchants to customize the section.
Here is an example of settings in the schema tag:
{% schema %}
{
"name": "Collage",
"tag": "section",
"class": "Collage",
"settings": [
{
"type": "text",
"id": "header",
"label": "Header"
}
]
}
{% endschema %}
Now, let’s explore the next property of Schema Tag, that is, BLOCKS.
BLOCKS
Blocks are modules of content that can be added, removed, or reordered an innumerable number of times. The blocks are created within a section and possess the following attributes:
- type
- name
- limit
- settings
{% schema %}
{
"name": "Collage",
"tag": "section",
"class": "Collage",
"settings": [
{
"type": "text",
"id": "title",
"label": "Collage"
}
],
"blocks": [
{
"name": "Slide",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
]
}
{% endschema %}
MAX_BLOCKS
There is a limit of up to 50 blocks per section. You can use the attribute max_blocks for specifying the limit of blocks.
{% schema %}
{
"name": "Collage",
"tag": "section",
"class": "Collage",
"max_blocks": 5,
"settings": [
{
"type": "text",
"id": "title",
"label": "Collage"
}
],
"blocks": [
{
"name": "Slide",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
]
}
{% endschema %}
PRESETS
These are default configurations of the sections that allow you to add a section through the theme editor. But, do not get confused with the theme styles as these aren’t related to it.
The attributes of presets are as follows:
- name
- settings
- blocks
Below is the mentioned example of presets in a section:
{% schema %}
{
"name": "Collage",
"tag": "section",
"class": "Collage",
"max_blocks": 5,
"settings": [
{
"type": "text",
"id": "title",
"label": "Collage"
}
],
"blocks": [
{
"name": "Slide",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
],
"presets": [
{
"name": "Slideshow",
"settings": {
"title": "Slideshow"
},
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
}
]
}
]
}
{% endschema %}
default
When you’re willing to render a section statically, then you can use a default configuration, named as default. It has the same attributes as presets.
The below-mentioned is an example of default in a section:
{% schema %}
{
"name": "Collage",
"tag": "section",
"class": "Collage",
"max_blocks": 5,
"settings": [
{
"type": "text",
"id": "title",
"label": "Collage"
}
],
"blocks": [
{
"name": "Slide",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
],
"default": {
"settings": {
"title": "Collage"
},
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
}
]
}
}
{% endschema %}
locales
With locales object, one can provide their own translated strings in the section. It is one of the useful features that can be installed on various themes or shops.
The example of locales object are as follows:
{% schema %}
{
"name": "Collage",
"tag": "section",
"class": "Collage",
"max_blocks": 5,
"settings": [
{
"type": "text",
"id": "title",
"label": "Collage"
}
],
"blocks": [
{
"name": "Slide",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
],
"default": {
"settings": {
"title": "Collage"
},
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
}
]
},
"locales": {
"en": {
"title": "Collage"
},
"fr": {
"title": "Diaporama"
}
}
}
{% endschema %}
With this, we have come to an end to the guide of schema tags in Shopify. If you need further assistance on your ongoing Shopify project or have some doubts, feel free to contact us!
Shopify Section Schema FAQs
What is Shopify section schema?
Shopify section schema is a JSON block inside a Liquid section file that defines the editable settings, blocks and presets available in the Shopify theme editor.
What does the tag property do in Shopify section schema?
The tag property changes the HTML wrapper that Shopify renders for the section, such as section, div or article.
How do you add a class in Shopify section schema?
Add the class property inside the schema JSON. Shopify applies that class to the section wrapper so you can target it with CSS.
What does max_blocks mean in Shopify?
max_blocks controls the maximum number of blocks a merchant can add to a section from the Shopify theme editor.
Why does Shopify say a section file requires a schema tag?
This error appears when a section file does not include a valid {% schema %} and {% endschema %} block, or when the JSON inside the schema is invalid.
Where do presets go in Shopify section schema?
Presets go inside the schema JSON. They make a section available from the theme editor so merchants can add it to templates.
Related: Looking for professional help? Explore our Shopify development services.
Related: Looking for professional help? Explore our custom Shopify theme development.