Section — the primary container

Section Live

sections/section.liquid

The top-level container component. Wraps every other piece of content on a template. Controls background, padding, container width, optional heading + kicker + intro, optional top and bottom borders, and an anchor ID for in-page navigation. The starting point — every other section in the theme inherits this base, and most pages stack several of these to form their layout. Change the controls on the left, watch the preview update, copy the resulting schema and rendered HTML.

§ 01 · Interactive playground

Configure the section. See it render.

Settings on the left mirror what the merchant sees in the Shopify theme editor. Adjust any control and the preview updates instantly. Schema JSON and rendered Liquid output update below in real time too.

§ 02 · Output

Schema & Liquid — ready to commit.

The exact {% schema %} JSON to paste into the section's Liquid file, with the current settings as defaults. The rendered Liquid below shows the HTML the theme will output with the current values. Both update live as you change settings — copy and ship.

Section schema (JSON)

Rendered HTML

§ 03 · Liquid file

The section's Liquid.

The actual sections/section.liquid file structure. The schema block at the bottom is what the playground generates above; the markup block at the top is what produces the rendered HTML.

sections/section.liquid

§ 04 · Notes

Use, accessibility, related components.

When to use

Use Section for everything.

Every top-level page region — homepage features, PDP sections, support content, editorial pages.
When you need consistent rhythm — Section's padding scale matches across the site.
When the merchant needs to add/remove/reorder regions in the theme editor.
When you want a stable place for the kicker + heading + intro pattern.
Don't use it inside another Section — use Flexible Columns or Rows for nested layout.