Section
The section and block objects for visual editor settings and dynamic content.
Sections are the building blocks of a theme. Each section has its own template, settings, and optional blocks. The visual editor lets merchants add, remove, and rearrange sections without touching code.
The section object
The section object is available inside every section template. It gives you access to the section's settings and metadata.
| Property | Type | Description |
|---|---|---|
section.id | string | A unique ID used for DOM targeting and scoped styles |
section.settings | object | The values the merchant set in the visual editor |
section.blocks | array | The dynamic blocks inside this section |
<section data-section-id="{{ section.id }}">
<h2>{{ section.settings.heading }}</h2>
</section>Settings
Settings are defined in the section's {% schema %} block. The visual editor reads the schema and builds a settings panel. When the merchant changes a value, it appears in section.settings.
{% schema %}
{
"name": "Hero Banner",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Welcome"
},
{
"type": "select",
"id": "height",
"label": "Section height",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "medium"
}
]
}
{% endschema %}Access these values in the template:
<div class="hero hero--{{ section.settings.height }}">
<h1>{{ section.settings.heading }}</h1>
</div>See the Section Schema page for all setting types.
Blocks
Blocks are repeated, sortable items inside a section. A slideshow section might have one block per slide. A feature grid might have one block per feature.
| Property | Type | Description |
|---|---|---|
block.id | string | The unique block ID |
block.type | string | The block type (defined in the schema) |
block.settings | object | The values for this block |
Loop over blocks in your template:
{% for block in section.blocks %}
<div class="slide" data-block-id="{{ block.id }}">
{% if block.type == 'image_slide' %}
{{ block.settings.image | image_tag }}
<p>{{ block.settings.caption }}</p>
{% elsif block.type == 'video_slide' %}
<video src="{{ block.settings.video_url }}" autoplay muted loop></video>
{% endif %}
</div>
{% endfor %}Block schema
Define blocks in the section schema alongside settings:
{% schema %}
{
"name": "Slideshow",
"blocks": [
{
"type": "image_slide",
"name": "Image Slide",
"settings": [
{ "type": "image_picker", "id": "image", "label": "Image" },
{ "type": "text", "id": "caption", "label": "Caption" }
]
},
{
"type": "video_slide",
"name": "Video Slide",
"settings": [
{ "type": "url", "id": "video_url", "label": "Video URL" }
]
}
]
}
{% endschema %}The merchant can add, remove, and reorder blocks in the visual editor. Your template handles the rest.
Scoped styles and scripts
Each section can include its own CSS and JavaScript. They are scoped so they do not affect other parts of the page.
{% stylesheet %}
.hero { padding: 4rem 2rem; text-align: center; }
.hero--small { min-height: 300px; }
.hero--medium { min-height: 500px; }
.hero--large { min-height: 700px; }
{% endstylesheet %}
{% javascript %}
const section = document.querySelector('[data-section-id="{{ section.id }}"]');
// Section-specific logic here
{% endjavascript %}See the Template Tags page for more on stylesheet and javascript tags.