Build your own

A blank canvas section: nest nothing but Group blocks to lay out rows and columns, then fill them with content blocks.

Styling

  • Color scheme

This section also uses the standard Framing text settings described in Theme settings. The only block you can add directly to the section is Group; everything else nests inside a group. See how to build custom layouts with nested sections for a walkthrough.

Group blocks

Each Group is a flexible row or column container. Nest another Group inside a Group to build more complex layouts.

Layout

Setting What it does
Direction Horizontal or Vertical.
Width on desktop Applies inside a horizontal group. Auto splits the row equally with its siblings; fixed widths are shares of the row, so pick widths that total 100% for exact proportions.
Width on mobile Applies inside a horizontal group with Stack on mobile turned off. Stacked tiles are always full width.
Gap -2 is no gap, 0 is default, 3 is much larger.
Allow wrapping Horizontal groups only. Lets children flow onto a new line when they run out of room.
Vertical alignment Horizontal groups: Top, Center, Bottom, or Stretch.
Vertical alignment (Vertical groups) Top, Center, Bottom, Space between, or Space around.

Mobile

  • Stack on mobile - horizontal groups only.
  • Reverse order on mobile

Styling

  • Content style, plus advanced Space above / Space below overrides.

Content blocks

Add any of the following inside a Group:

Block What it does
Heading Choose a heading tag.
Text A simple text block.
Button(s) Optionally show a second button alongside the first.
Image Adjustable image width, plus an Image shape crop (Square, Pill, Arch, or Circle) with an optional border in the theme's border style.
Collapsible row Great for FAQs, shipping info, and other tab-style content.
Icon with text Choose an icon (or upload a custom one) and a label. Has its own Content style and color scheme.
Stars Set a rating from 1 to 5.
Countdown Set an end date and time, plus a message to show once it's expired.
Newsletter A signup form.
Rotating element A rotating badge of text or an image.
Custom liquid Add your own Liquid code.