Section schema

Every section can include a single {% schema %} tag containing a JSON object. This schema tells the theme editor the section's name, what settings and blocks it exposes, and which templates it can be added to.

{% schema %}
{
  "label": "Featured products",
  "settings": [],
  "blocks": []
}
{% endschema %}

Note: The schema must be valid JSON. Only one {% schema %} tag is allowed per section, and it can't contain Liquid.

Attributes

Attribute	Type	Description
label	string	Required. The section name shown in the theme editor. Can be a t: locale key.
tag	string	The HTML element the section is wrapped in. One of article, aside, div, footer, header, or section. Defaults to section.
class	string	A class added to the section wrapper element.
limit	integer	The maximum number of times the section can be added to a single template. Defaults to 25, and can't exceed 25.
max_blocks	integer	The maximum number of blocks the section can hold. Defaults to 25, and can't exceed 25.
settings	array	Setting definitions for the section, read through section.settings.
blocks	array	The block types the section accepts.
templates	array	The template types the section can be added to from the editor. When omitted, the section is available on all templates.

settings

An array of setting schema objects. Each entry renders an input (or a display element) in the theme editor.

"settings": [
  { "type": "header", "content": "Layout" },
  {
    "type": "select",
    "id": "layout",
    "label": "Layout",
    "options": [
      { "value": "grid", "label": "Grid" },
      { "value": "carousel", "label": "Carousel" }
    ],
    "default": "grid"
  },
  {
    "type": "range",
    "id": "products_per_row",
    "label": "Products per row",
    "min": 2,
    "max": 5,
    "step": 1,
    "default": 4
  }
]

Values are read in Liquid through section.settings:

{% if section.settings.layout == 'carousel' %}
  ...
{% endif %}

See Input settings and Display settings for the available types.

blocks

An array of the block types a section accepts. Each block has its own settings array.

"blocks": [
  {
    "type": "product",
    "label": "Product",
    "limit": 12,
    "settings": [
      { "type": "product", "id": "product", "label": "Product" }
    ]
  }
]

Property	Type	Description
type	string	Required. Identifier for the block type, referenced as block.type in Liquid.
label	string	Required. The block name shown in the editor. Can be a t: locale key.
limit	integer	The maximum number of blocks of this type allowed in the section. Defaults to 50, and can't exceed 50.
settings	array	Setting definitions for the block, read through block.settings.

Iterate blocks in the section markup, branching on block.type:

{% for block in section.blocks %}
  {% case block.type %}
    {% when 'product' %}
      <div {{ block.youcan_attributes }}>
        {{ block.settings.product.title }}
      </div>
  {% endcase %}
{% endfor %}

See Blocks for the full rendering and theme-editor details.

templates

Lists the template types a section can be added to from the theme editor. Omit it to make the section available everywhere.

"templates": ["index", "product", "page"]

Example

{% schema %}
{
  "label": "Featured collection",
  "tag": "section",
  "class": "featured-collection",
  "limit": 2,
  "max_blocks": 4,
  "templates": ["index", "collection"],
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Featured collection" },
    { "type": "collection", "id": "collection", "label": "Collection" },
    { "type": "range", "id": "products_to_show", "label": "Products to show", "min": 2, "max": 12, "step": 1, "default": 6 }
  ],
  "blocks": [
    {
      "type": "cta",
      "label": "Call to action",
      "limit": 1,
      "settings": [
        { "type": "text", "id": "label", "label": "Button label" },
        { "type": "url", "id": "link", "label": "Button link" }
      ]
    }
  ]
}
{% endschema %}