> For the complete documentation index, see [llms.txt](https://help.brickspacelab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.brickspacelab.com/slab/advanced-customizations/making-changes/creating-custom-sections.md).

# 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](/slab/advanced-customizations/making-changes/using-custom-liquid.md) or a [custom block](/slab/advanced-customizations/making-changes/creating-custom-blocks.md) 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:

{% code overflow="wrap" %}

```
Using the shopify-liquid-themes skill, create a new section called [your section name]. It should [describe the layout and what it contains, e.g. "display a two-column layout with a heading and body text on the left and an image on the right, with settings for spacing and background color"].
```

{% endcode %}

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:**

{% code overflow="wrap" %}

```
Using the shopify-liquid-themes skill, create a new section called testimonials. It should display a heading above a grid of quote blocks. Include a setting for the number of columns (2, 3, or 4). Accept only a custom testimonial block type that has settings for the quote text, author name, and author title.
```

{% endcode %}

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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.brickspacelab.com/slab/advanced-customizations/making-changes/creating-custom-sections.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.