Create custom sections

What is a section?

A section is a full-width content area that merchants can add to any page template from the theme editor. Sections act as containers — they hold blocks, control the overall layout, and expose their own settings for things like spacing, background color, and visibility.

Every page in a Slab-powered store is built from sections stacked vertically. The built-in Section type covers most layouts, but custom sections let you build entirely new content areas with their own block types and configuration options.

When to create a custom section

Sections are the right choice when you need:

• A standalone content area with a distinct layout not covered by the built-in Section type.
• A set of blocks that only make sense within a specific container (e.g. a pricing table where each column is a block with a price, feature list, and call-to-action).
• Section-level settings that control the container as a whole (background media, column count, spacing).

If you only need a small piece of dynamic or interactive content within an existing section, custom liquid or a custom block is simpler.

How sections are structured

A section file lives in the sections/ folder (compiled from src/sections/ if you are using the development toolkit) and follows this pattern:

• Liquid markup with {{ section.shopify_attributes }} on the root element (required for the theme editor)
• Blocks rendered via {% content_for 'blocks' %} inside the layout
• {% schema %} — JSON defining the section's name, accepted block types, settings, and presets

Accepted block types are declared in the schema's "blocks" array. Use { "type": "@theme" } to accept all theme blocks, { "type": "@app" } for app blocks, or list specific block types to restrict what merchants can add.

Generating a custom section with AI

The Slab repo includes the shopify-liquid-themes agent skill, which knows the full section structure, schema conventions, and Slab's Tailwind and Alpine.js patterns. Open your coding agent (e.g. Cursor) in the Slab repo and prompt:

The agent will generate a complete section file with correct schema JSON, Tailwind utility classes, and {% content_for 'blocks' %} for the dynamic block area.

Example — a testimonials section with configurable quote blocks:

Once the file is generated, place it in the sections/ folder. The section will appear in the theme editor's Add section picker under its preset category.