Custom section

A blank canvas you fill with the theme's own building blocks.

The section itself is almost nothing — a colour scheme and an optional background image. Everything inside it is blocks you add and arrange: headings, text, images, buttons, and groups to lay them out together.

• Reach for it when nothing else fits. Every other section has a shape it is good at. This one has none, which is the point.
• It is not code. You are dragging the same blocks you use everywhere else in the theme, so it stays editable by whoever comes after you.
• It starts filled in — a heading, a line of text and an image, grouped — so you begin by editing a layout rather than staring at an empty band.

Try it

Everything below is theme blocks. Change the heading and its size, retype the text, switch the group from a column to a row, and use the screen-size and light/dark buttons in the preview header to check a phone and dark mode.

←Custom section

Color scheme

←Group block

Layout direction

HorizontalVertical

Alignment

LeftCenterRight

Padding

32px

←Heading block

Heading

Level

Heading 1Heading 2Heading 3Heading 4

Controls the HTML heading tag. Affects SEO, not visual size.

Size

DisplayLargeMediumSmall

Alignment

LeftCenterRight

←Text block

Text

<p>Combine headings, text, images, and buttons to build a layout that fits your story.</p>

Text style

TitleSubtitleNormal text

Controls visual size only. Use this block next to a heading block for paired hero content.

Storefront preview

Make it your own

Combine headings, text, images, and buttons to build a layout that fits your story.

Nothing here is special to this section — a Group holding a Heading, a Text and an Image. Those are the theme's own blocks, and you can add, remove and reorder them freely.

How it works

Add the Custom section, then add blocks from the editor's sidebar and drag them into the order you want. The section renders them in exactly that order.

Nest blocks inside a Group block to lay them out together: a group is either a column (blocks stacked, aligned left, centre or right) or a row (blocks side by side), with its own padding. Groups can hold groups, which is how you build two-column arrangements without touching code.

Spacing works differently inside a group. Blocks placed straight into the section are spaced apart automatically. Blocks inside a Group are stacked flush against each other — that is what makes a group read as one unit — so if you want air between them, give each one its own nested group and set that group's Padding. It is the one thing about this section that surprises people.

If you remove every block, the section shows an "Add blocks to build this section." placeholder — but only inside the theme editor. On your live storefront an empty custom section renders nothing visible at all.

Section settings

Setting	What it does
Color scheme	Paints the section — the background behind your blocks and the ink they inherit.
Background	An image behind the whole section, edge to edge, with your blocks composed on top. Leave it unset for a flat background from the colour scheme.

The blocks you can use

Any theme block. The ones that do most of the work here:

Block	What it gives you
Group	A column or a row holding other blocks, with padding and alignment. This is how you build a layout rather than a stack.
Heading	A heading whose size and HTML level are set separately, so display-scale type can still be a correct <h2> for search engines.
Text	A paragraph, at title, subtitle or normal weight.
Image	A picture with its own aspect ratio, maximum width, alt text and optional link.
Button	A link styled as a primary, secondary or ghost button, optionally full width.

The background image

The background is purely decorative: it is hidden from screen readers, loads lazily, and is served at up to 2000px wide for large screens. It covers the section and crops from the centre, so keep the subject central.

Anything a visitor must be able to read belongs in a block, not baked into the image — text in a picture cannot be translated, cannot be read aloud, and gets cropped on a phone.

Presets

Available in every preset. The section has no styling of its own beyond the colour scheme; the blocks inside it take the type and button treatment of whichever preset the store is running.

Responsive & accessibility

• The blocks are responsible for their own behaviour. They are the same blocks used across the theme, so what they do here is what they do everywhere.
• A group set to "row" stays a row at every width — it does not wrap. For an arrangement that should stack on a phone, use stacked groups or one of the purpose-built sections instead.
• Heading level is yours to set. Only one <h1> should exist per page, and on most pages it is already spoken for, so leave headings here at <h2> or lower unless you know otherwise.
• The background image is hidden from assistive technology, and carries no alt text, because it is decoration.
• One colour scheme paints the section, so the ink your blocks inherit can never land in a low-contrast combination — in light mode or dark.

Tips

• Try the purpose-built section first. Rich text is faster for a heading, a paragraph and a button; Image with text already does picture-beside-words properly, and both are responsive without you thinking about it.
• Use one group per idea. A flat pile of ten blocks is much harder for the next person to edit than three groups of three.
• Give a group Padding rather than adding empty text blocks for spacing — and remember blocks inside a group sit flush, so air between two of them means nesting each in a group of its own.
• If your layout is starting to need code, use Custom Liquid deliberately rather than fighting the blocks.

Related sections

• Rich text — a heading, a paragraph and a button, without composing anything.
• Image with text — a picture beside words, done properly and responsively.
• Custom Liquid — when you would rather write raw HTML or Liquid than compose blocks.