A Group is a box that holds other blocks and arranges them. Use it to put things side by side, build columns, or give part of a section its own background and border.
Where you can use groups
Many sections accept a Group block: the footer, newsletter, hero, slideshow slides, FAQ, before and after, reviews, contact, 404, order confirmation, collapsible rows, and the text area of product lists such as featured products and collections. Each section decides which blocks can go inside its groups, and how many groups it takes.
To add one in the builder, select the section, click Add new block, and pick Group. Then drag other blocks into it. Some sections (footer, newsletter, reviews) also let you put a group inside a group.
Layout
- Width: Fill takes the free space and shares it equally with other Fill groups next to it. Fit is only as wide as its content. Custom sets a Custom width in percent.
- Direction: Vertical stacks the blocks, Horizontal puts them side by side. Side by side blocks wrap to a new line when there is not enough room.
- Stack vertically on mobile (Horizontal only): on phones the blocks stack instead.
- Position: places the blocks up and down (Top, Center, Bottom).
- Alignment: places the blocks left to right (Left, Center, Right).
- Space between: spreads the blocks out with equal space between them. It is offered in the direction the blocks flow: in Position for a vertical group, in Alignment for a horizontal group.
Appearance
- Use parent color scheme: on by default, so the group uses the section colors. Turn it off and pick a Color scheme to give the group its own background and text colors.
- Border: None or Solid. Solid adds Border thickness (1 to 20 pixels) and Border opacity. The color is the scheme's border color.
- Corner radius: rounds the corners, from 0 to 100 pixels.
- Background overlay: adds a color layer on top of the background. Set the Overlay color and Overlay style: Solid, or Gradient that fades to clear, with a Gradient direction of Up or Down. Useful to make text readable over a hero image.
Spacing
Gap is the space between the blocks inside the group (0 to 100 pixels). Padding is the space between the group edge and its blocks, on each side.
Recipes
- Two buttons side by side in a hero: put both in a Horizontal group with a small gap.
- Three footer columns: a Horizontal group with three Fill items inside, and Stack vertically on mobile on.
- A card: a Vertical group with its own color scheme, a Solid border, a corner radius, and padding.
- Text left, button right: a Horizontal group with Alignment set to Space between.
Good to know
- One column is wider than you want: two Fill groups share the space equally. Set one to Custom and give it a percentage.
- The group does not show: a group with no blocks, or with only hidden blocks, is not shown on your store.
- Group not in the block list: that section does not take groups, or its group limit is reached.
- Text, Button, and Divider settings are in Group, Text, Button, and Divider blocks: how do the layout component settings work?.