Skip to main content

Section blocks

Sections can define blocks locally within their schema. Use section blocks to create customizable content layouts within a specific section. You can only use section blocks within the section where they're defined. You can't nest other blocks in section blocks, so you can't use them to create hierarchy.

To learn more about section blocks, refer to the blocks property of the section schema.


Anchor to Define blocks within sectionsDefine blocks within sections

In your section's schema, add a blocks array. Each object in the array represents a block that's local to the section.

The following is an example:

{
"name": "Example section",
"blocks": [
{
"type": "heading",
"name": "Heading",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Hello, world!"
}
]
}
]
}

In this example, the Example section includes the Heading block. The block has the following data:

  • type: A property that represents a unique identifier for the block
  • settings: An array that contains the customizable options for the block.

In your section's Liquid file, you can loop over the blocks of the section and render each block based on its type. You can access the settings of the block using the block Liquid tag. The following is an example:

{% for block in section.blocks %}
{%- case block.type -%}
{%- when "heading" -%}
<h1>{{ block.settings.heading }}</h1>
{% endcase %}
{% endfor %}

In this example, the for loop iterates over each block in the section, and the block.settings.heading expression outputs the heading of each block.

Caution

Don't rely on the literal value of a block's ID when you iterate over blocks. The ID is dynamically generated and is subject to change. The following is an example of relying on a literal value of a block's ID, which may break functionality in your theme if the ID changes:

{% for block in section.blocks %}
{%- if block.id == 'J6d9jV' -%}
<h1>{{ block.settings.heading }}</h1>
{% endif %}
{% endfor %}

Was this page helpful?