How to Create Shopify Section Schema?

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!

<div id="shopify-section-[id]" class="shopify-section">
  // Output of the section content
</div>

• 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!