AppsThemesSupport
Guides

Section schema

Suggest Edits

[Sections support the section-specific Liquid tag {% schema %}, which is where you define the following attributes of a section:

📘

Caution

Each section can only have a single {% schema %} tag, which must contain valid JSON only. The tag can be placed anywhere within the section file, but it can’t be nested inside another Liquid tag. Having more than one tag, or placing it inside another Liquid tag, will result in an error.

The {% schema %} tag is a Liquid tag. However, it doesn’t output it’s contents, or render any Liquid included inside it.

name

The name attribute should be the same with section filename.
The cname attribute in presets object determines the section title that is shown in the theme editor. 

{% schema %}
{
  "name": "rich_text"，
  "presets": [
    "name": "rich text"
    "cname": {
        "en-US"： "Rich text"
    }
  ]
}
{% endschema %}

settings

You can create section specific settings to allow merchants to customize the section with the settings object:

{% schema %}
{
  "name": "Slideshow"
  "class": "slideshow",
  "settings": [
    {
      "type": "text",
      "id": "header",
      "label": "Header"
    }
  ]
}
{% endschema %}

Section title

The theme editor creates section titles based on the setting input types. If you want to explicitly set which input will control this title, then you can set that input’s id attribute to title:

{% schema %}
{
  "name": "Slideshow",
  "tag": "section",
  "class": "slideshow",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Slideshow"
    }
  ]
}
{% endschema %}

blocks

You can create blocks for a section. Blocks are reusable modules of content that can be added, removed, and reordered within a section.

Blocks have the following attributes:

AttributeDescriptionRequired
typeThe block type. This is a free-form string that you can use as an identifier. You can access this value through the type attribute of the Liquid block object.Yes
nameThe block name, which will show as the block title in the theme editor.Yes
limitThe number of blocks of this type that can be used.No
settingsAny settings that you want for the block.No

The following is an example of including blocks in a section:

{% schema %}
{
  "name": "Slideshow",
  "class": "slideshow",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Slideshow"
    }
  ],
  "blocks": [
     {
       "name": "Slide",
       "type": "slide",
       "limit": 1,
       "settings": [
         {
           "type": "image_picker",
           "id": "image",
           "label": "Image"
         }
       ]
     }
   ]
}
{% endschema %}

max_blocks

There’s a limit of 16 blocks per section. You can specify a lower limit with the max_blocks attribute:

{% schema %}
{
  "name": "Slideshow",
  "tag": "section",
  "class": "slideshow",
  "max_blocks": 5,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Slideshow"
    }
  ],
  "blocks": [
     {
       "name": "Slide",
       "type": "slide",
       "settings": [
         {
           "type": "image_picker",
           "id": "image",
           "label": "Image"
         }
       ]
     }
   ]
}
{% endschema %}

presets

Section presets are default configurations of sections that allow merchants to easily add a section to a JSON template through the theme editor. They aren't related to theme styles that are defined in settings_data.json.

The presets object has the following attributes:

AttributeDescriptionRequired
nameThe preset name, which will show in the Add section portion of the theme editor. Yes
settingsA list of default values for any settings you might want to populate. Each entry should include the setting name and the value.No
blocksA list of default blocks that you might want to include. Each entry should be an object with attributes of type and settings. The type attribute value should reflect the type of the block that you want to include, and the settings object should be in the same format as the settings attribute above.No

The following is an example of including presets in a section:

{% schema %}
{
  "name": "Slideshow",
  "tag": "section",
  "class": "slideshow",
  "max_blocks": 5,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Slideshow"
    }
  ],
  "blocks": [
     {
       "name": "Slide",
       "type": "slide",
       "settings": [
         {
           "type": "image_picker",
           "id": "image",
           "label": "Image"
         }
       ]
     }
   ]
  "presets": [
     {
       "name": "Slideshow",
       "settings": [
         {
           "title": "Slideshow"
         }
       ],
       "blocks": [
         {
           "type": "image",
           "settings": []
         },
         {
           "type": "image",
           "settings": []
         }
       ]
     }
   ]
}
{% endschema %}

templates

You can restrict a section to certain templates by specifying those templates through the templates attribute.

For example:

{% schema %}
{
  "name": "Slideshow",
  "tag": "section",
  "class": "slideshow",
  "max_blocks": 5,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Slideshow"
    }
  ],
  "blocks": [
    {
      "name": "Slide",
      "type": "slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "settings": [
        {
          "title": "Slideshow"
        }
      ],
      "blocks": [
        {
          "type": "image",
          "settings": []
        },
        {
          "type": "image",
          "settings": []
        }
      ]
    }
  ]
}
{% endschema %}

Updated about 3 years ago