+880 1756-702340 +880 9613-842340

shopifyengine.com@gmail.com

Purbo Kamal Kasna Rangpur, Bangladesh.

Shopify Theme Sections Tutorial

Sections are Liquid files that allow you to create reusable modules of content that can be customized by merchants. They can also include blocks which allow merchants to add, remove, and reorder content within a section.


Location

Section files are located in the sections directory of the theme:

└── theme
    ...
    ├── templates
    ├── sections
    ...


Section schema

Sections support the {% schema %}{% endschema %} Liquid tag. This tag allows you to define various attributes of a section, such as the section name, any section blocks, and settings to allow for theme editor customization options.

Section JSON schema example

{% schema %}
{
  "name": "Slideshow",
  "tag": "section",
  "class": "slideshow",
  "limit": 1,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Slideshow"
    }
  ],
  "max_blocks": 5,
  "blocks": [
     {
       "name": "Slide",
       "type": "slide",
       "settings": [
         {
           "type": "image_picker",
           "id": "image",
           "label": "Image"
         }
       ]
     }
  ],
  "presets": [
    {
      "name": "Slideshow",
      "settings": {
        "title": "Slideshow"
      },
      "blocks": [
        {
          "type": "slide"
        },
        {
          "type": "slide"
        }
      ]
    }
  ],
  "locales": {
    "en": {
      "title": "Slideshow"
    },
    "fr": {
      "title": "Diaporama"
    }
  },
  "enabled_on": {
    "templates": ["*"],
    "groups": ["footer"]
  }
}
{% endschema %}


Schema attributes description

Attribute Type Description

name

String

The display name of the section in the Shopify theme editor.

tag

String (optional)

Defines the HTML tag for the section (e.g., "section", "div").

class

String (optional)

Adds a CSS class to the section for styling purposes.

limit

Integer (optional)

Specifies the maximum number of times the section can be added to a template.

settings

Array of objects

Defines the customizable settings available in the Shopify theme editor.

blocks

Array of objects (optional)

Defines modular blocks that can be used within the section. Each block can have its own settings.

max_blocks

Integer (optional)

Specifies the maximum number of blocks that can be added inside the section.

presets

Array of objects

Defines default settings for the section when added via the theme editor.

default

Mixed (optional)

Provides default values for settings, ensuring they have an initial state.

locales

Object (optional)

Enables localization support for text-based settings.

enabled_on

Object (optional)

Defines where the section can be used, such as specific templates or page types. Example: { "templates": ["product", "collection"] }

disabled_on

Object (optional)

Prevents the section from being used on specific templates or page types. Example: { "templates": ["cart"] }


tag

By default, when Shopify renders a section, it’s wrapped in a <div> element with a unique id attribute:

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

If you don’t want to use a <div>, then can use following are the accepted values:

  • article

  • aside

  • div

  • footer

  • header

  • section

Example

{% schema %}
{
  "name": "Slideshow",
  "tag": "section"
}
{% endschema %}


class

Definition

{% schema %}
{
  "name": "Slideshow",
  "tag": "section",
  "class": "slideshow"
}
{% endschema %}

HTML output

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


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:

Attribute Required Description

type

Yes

The 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 block object.

name

Yes

The block name, which will show as the block title in the theme editor.

limit

No

The number of blocks of this type that can be used.

settings

No

Settings of the block

Example Definition

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


How to render blocks

{% for block in section.blocks %}
  {% case block.type %}
    {% when 'slide' %}
      <div class="slide" {{ block.shopify_attributes }}>
        {{ block.settings.image | image_url: width: 2048 | image_tag }}
      </div>
    ...
  {% endcase %}
{% endfor %}
Share