Theme blocks

Most sections come with their own fixed kinds of block: a slideshow has slides, a footer has columns. A few of Masthead's sections work differently. They are open containers that you fill with theme blocks: ten small building blocks that can be added in any order, repeated, and nested inside each other. This is how you build a layout the theme didn't plan for, without touching code.

Sections that take theme blocks

• Image banner
• Image with text
• Newsletter
• Editorial product spread
• Promo banner
• Rich text

In these sections, click Add block and choose any theme block. The section decides where its blocks sit, for example over the image in an image banner or beside the image in an image with text. The blocks decide what is said there.

Every other section keeps its own blocks, described on that section's page. A section uses one kind or the other, never both.

How nesting and groups work

Added straight to a section, blocks stack one under another. To do more than that, use a Group block. A group is a block that holds other blocks:

• Side by side. Set a group's Direction to Horizontal and its blocks sit in a row, wrapping onto new lines on small screens.
• Columns. Put two or three vertical groups inside one horizontal group. Each inner group is a column with its own blocks.
• Panels. Turn on Use a background and the group gets its own color scheme, padding and optional background image, like a card inside the section.
• Spacing. Space between blocks sets one even gap between everything inside the group, so you rarely need spacers.

To put a block inside a group in the theme editor:

1. Add a Group block to the section.
2. In the left sidebar, click Add block directly under that group, indented beneath it, and choose a block.
3. Or drag an existing block onto the group. Blocks inside a group are shown indented under it.

When you add a group, the editor offers 3 starting points: Group, Heading, text and button and Two columns. The last two come filled with blocks, to save you the first few clicks.

Heading

A heading, with an optional eyebrow line above it. When section numbers are on, the eyebrow line starts with the section's number, for example No. 03.

Text

A paragraph or more of formatted text, from body copy to large statements or small capitals.

Buttons

One or two buttons, side by side. A button with no label is not shown.

Image

An image cropped to a shape you choose, with an optional caption set under it like a photo credit, and an optional link.

Video

A video with a play button. Use a video uploaded to Shopify, or a YouTube or Vimeo link. A YouTube or Vimeo video is only loaded when the customer presses play, so it does not slow the page.

Product

One product, shown as the theme's product card with quick add. It follows your theme settings under Product cards.

Collection

One collection, shown as a card with the collection's image and title, linking to the collection.

Accordion row

One collapsible row: a heading that opens to show text. Place several rows one after another and they read as a single accordion.

Spacer

Empty space between two blocks, with a separate height on mobile.

Group

A container for other blocks. A group stacks its blocks or sets them side by side, controls the spacing and alignment between them, and can have its own background. Groups can be placed inside groups.

Image sizes

Tips

• Start simple: a heading, a text block and a buttons block cover most sections. Reach for groups when you want things side by side.
• Keep one heading per section at Automatic heading level. If you stack several headings, set the smaller ones to a lower level so the page keeps a clear outline for search engines and screen readers.
• Check nested layouts on mobile. A horizontal group wraps when it runs out of room, which may change the order you had in mind.