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. |
| 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. |