Sections and Schema Blocks

Sections are the building blocks of a Liquid theme. Each section is a self-contained UI module with its own markup, styles, and configurable settings defined in a schema block.

What Is a Section?

A section is a Liquid file stored in the sections/ folder (e.g., sections/hero.liquid). It renders a distinct area of a page — a hero banner, a featured product grid, a newsletter signup form, a testimonials carousel, and so on. Sections can be included in templates or added dynamically through the Visual Editor.

The Schema Block

Every section file ends with a {% schema %} block — a JSON object that describes the section's metadata and configurable settings. The schema has this structure:

{%- schema -%}
{
  "name": "Section Display Name",
  "class": "optional-css-class",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Hello World"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Slide Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Default Hero",
      "blocks": [
        { "type": "slide" }
      ]
    }
  ]
}
{%- endschema -%}

name — The display name shown in the Visual Editor.
class — An optional CSS class added to the section wrapper element.
settings — An array of configurable fields for the section as a whole.
blocks — Repeatable sub-elements within the section (e.g., slides in a slideshow, items in a list).
presets — Default configurations that appear in the "Add Section" picker in the Visual Editor.

Settings Types Reference

Type	Description	Output
`text`	Single-line text input	String
`richtext`	Rich text editor with formatting	HTML string
`image_picker`	Image upload or selection from media library	Image URL
`color`	Color picker with hex value	Hex string (e.g., `#ff0000`)
`select`	Dropdown with predefined options	Selected option value
`checkbox`	Boolean toggle	`true` / `false`
`range`	Numeric slider with min/max/step	Number
`url`	URL input with link picker	URL string

How Settings Appear in the Visual Editor

When a merchant opens the Visual Editor and selects a section, the settings defined in the schema are rendered as a form in the sidebar. Text settings become input fields, color settings become color pickers, image_picker settings show the media library browser, and so on. Changes are reflected in the preview in real time.

Using Snippets

Snippets are reusable Liquid partials stored in the snippets/ folder. Use them to avoid duplicating code across sections:

<!-- Render a snippet with no arguments -->
{%- render 'price' -%}

<!-- Pass variables to a snippet -->
{%- render 'image', image: product.featured_image, size: '400x400' -%}

<!-- Render a snippet for each item in a collection -->
{%- for product in collection.products -%}
  {%- render 'product-card', product: product -%}
{%- endfor -%}

Snippets are isolated — they cannot access variables from the parent template unless you explicitly pass them as arguments.

Example: Minimal Section

Here is a complete, minimal section that displays a promotional banner with configurable heading, description, and background color:

<section class="promo-banner" style="background-color: {{ section.settings.bg_color }};">
  <div class="promo-banner__content">
    <h2>{{ section.settings.heading }}</h2>
    <div class="promo-banner__text">{{ section.settings.description }}</div>
    {%- if section.settings.button_url != blank -%}
      <a href="{{ section.settings.button_url }}" class="btn">
        {{ section.settings.button_label | default: 'Shop Now' }}
      </a>
    {%- endif -%}
  </div>
</section>

{%- schema -%}
{
  "name": "Promo Banner",
  "class": "section-promo",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Special Offer"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description",
      "default": "<p>Get 20% off all items this weekend.</p>"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#f5f5f5"
    },
    {
      "type": "url",
      "id": "button_url",
      "label": "Button Link"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button Label",
      "default": "Shop Now"
    }
  ],
  "presets": [
    {
      "name": "Promo Banner"
    }
  ]
}
{%- endschema -%}