Theme blocks and Custom section

Build your own layouts with the Custom section and the Group, Heading, Text, Button and Image theme blocks.

Most sections have their own blocks, described in Sections. Theme blocks are different: they are shared building blocks that you combine freely inside the Custom section. A Group block can hold other blocks, so you can nest them to build columns and rows.

Custom section

Click Add section and choose Custom section. It starts with a Heading, a Text and a Button block.

Width Page, Narrow: Page uses the page width. Narrow suits text.
Alignment Start, Center: The alignment of the blocks and their text.
Color scheme: The colors of the section.
Spacing None, Compact, Normal: The vertical space around the section.

The Custom section accepts all theme blocks below and app blocks from your installed apps.

Group

A container for other blocks. Use it to place blocks side by side or to give a part of the section its own colors.

Direction Vertical, Horizontal: Stacks the blocks inside or places them in a row.
Space between blocks Small, Medium, Large: The gap between the blocks inside.
Alignment Start, Center, End: The alignment of the blocks inside.
Stack on phones: A horizontal group becomes vertical on phones.
Color scheme: Leave empty to use the section colors.

A Group accepts all theme blocks, including other groups, and app blocks.

Heading

Heading: Put a word in italics to highlight it in the theme style.
Size Small, Medium, Large, Extra large: The visual size.
HTML tag Heading 2, Heading 3, Paragraph: The level of the heading for search engines and screen readers. Keep one main heading per page for search engines. The size and the tag are independent: a large heading can be a Heading 3.

Text

Text: Paragraphs, lists and links.
Size Small, Regular, Large: The text size.
Use a softer color: A lighter tone of the text color, for secondary information. Check that it stays readable on your background.

Button

Label, Link: The button text and destination. Write a label that says where the button goes.
Style Filled, Outline, Text link: Filled uses the primary button colors. Outline uses the secondary style.

Image

Image: Add alternative text to the image in the Shopify file library, unless it is purely decorative.
Shape Original, Square, Portrait, Landscape: Original keeps the shape of your image.
Link: Optional. Makes the image a link.

Layout examples

Two buttons side by side

Add a Group and set Direction to Horizontal.
Inside the group, add two Button blocks. Set the first to Filled and the second to Outline.

Image next to text

Add a Group with Direction set to Horizontal and Stack on phones turned on.
Inside it, add an Image block and a second Group with Direction set to Vertical.
In the second group, add a Heading, a Text and a Button.

A colored box inside a section

Add a Group and choose a Color scheme different from the section.
Add a Heading and a Text inside it.