Group
A container that lays out its child blocks in a row or a column. You can set its size, colour scheme, border, background image or video, overlay, and an optional link over the whole group.
Where it is used
This is a standalone block. It accepts any theme block or app block as children. It can be added inside the Popup link block (popup-link.liquid) and the Marquee block (marquee.liquid), and it appears in the default content of the index.json and page.about.json templates.
Settings
View the block guide .
| Setting | Options | Description |
|---|---|---|
| Link | Makes the whole group clickable and sends shoppers to this URL. Buttons and links placed inside the group keep working on their own. | |
| Open link in new tab | Opens the group link in a new browser tab. Only has an effect when a link is set. | |
| Inherit color scheme | When on, the group uses the color scheme of the section around it. Turn it off to pick a separate color scheme for this group. | |
| Color scheme | Edit color schemes in Theme settings. |
Layout
| Setting | Options | Description |
|---|---|---|
| Direction | • Vertical | Vertical stacks the blocks in a column. Horizontal places them side by side in a row. |
| Stack vertically on mobile | Stacks the blocks in a column on smaller screens and returns them to a row on larger screens. Only available when Direction is Horizontal. | |
| Enable content wrap | Lets blocks move onto a new line when they do not fit in one row. Only available when Direction is Horizontal. | |
| Vertical position for horizontal layout | • Top | Aligns the blocks to the top, center or bottom of the row. Only available when Direction is Horizontal. |
| Vertical position for vertical layout | • Top | Places the blocks at the top, center or bottom of the group, or spreads them apart with Space between. Most visible when the group is taller than its content. Only available when Direction is Vertical. |
| Horizontal alignment for vertical layout | • Left | Aligns the stacked blocks to the left, center or right of the group. Only available when Direction is Vertical. |
| Horizontal alignment for horizontal layout | • Left | Places the blocks along the row at the left, center or right, or spreads them apart with Space between. Only available when Direction is Horizontal. |
| Gap | Space between the blocks inside the group. Larger values scale down on smaller screens. |
Size
| Setting | Options | Description |
|---|---|---|
| Width | • Fit | Fit sizes the group to its content. Fill stretches it across the available width. Custom uses the percentage in Custom width. |
| Custom width | Width of the group as a percentage of the space available. Only applies when Width is Custom. | |
| Width on mobile | • Fit | Fit, Fill or Custom width for the group on mobile screens. |
| Custom width on mobile | Width of the group on mobile as a percentage of the space available. Only applies when Width on mobile is Custom. | |
| Height | • Fit | Fit sizes the group to its content. Fill stretches it to the available height. Custom uses a percentage. Adapt to media background follows the proportions of the background image or video. |
| Custom height | Height of the group as a percentage of the space available. Only applies when Height is Custom. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Background media | • None | Chooses whether the group has a background image, a background video or none. |
| Background image | Image shown behind the group's content. A placeholder image appears until you choose one. Only applies when Background media is Image. | |
| Video | Video shown behind the group's content. It plays muted and on a loop. Only applies when Background media is Video. | |
| Corner radius | • None | None keeps square corners. Custom rounds the group's corners and clips its content to that shape, using the value in Custom corner radius. |
| Custom corner radius | How much the group's corners are rounded. Only applies when Corner radius is Custom. | |
| Show background overlay | Adds a color layer over the background image or video, which can make text on top easier to read. Only available when Background media is not None. | |
| Overlay color | Color of the overlay layer. Pick a color with transparency to let the media show through. Only available when the overlay is on. | |
| Overlay text color | Text color used for the group's content while the overlay is on. | |
| Overlay style | • Solid | Solid fills the overlay with one color. Gradient fades the overlay from the color to transparent. |
| Overlay gradient direction | • Up | Up keeps the overlay strongest at the bottom and fades it toward the top. Down does the reverse. Only available when Overlay style is Gradient. |
| Border style | • None | Solid draws a thin border around the group. None removes it. |
Spacing
| Setting | Options | Description |
|---|---|---|
| Horizontal padding | Adds space inside the group on the left and right. The value is reduced on small screens. | |
| Vertical padding | Adds space inside the group at the top and bottom. Values above 20px are reduced on small screens. |
Set Direction first. The layout options that follow it appear only for the matching direction.
Notes
The overlay settings appear only when Background media is set to Image or Video.
No comments yet