> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-blocks/layout/group.md). # Group A container that holds other blocks and arranges them as a row or column. Groups are the foundation of custom layouts — nest blocks inside to align them, share a background, or turn a set of blocks into a single clickable card. ## Settings | Setting | Description | | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | Direction | **Horizontal** (a row) or **Vertical** (a column). | | Position / Alignment | How nested blocks align along and across the Group. Row and column alignment, including **Space between**, are set independently. | | Vertical on mobile | Stack the Group's contents vertically on mobile. | | Show group first on mobile | Move this Group above sibling blocks on mobile. | | Enable swipe on mobile | Turn a horizontal Group into a swipeable carousel on mobile. | | Gap | Space between nested blocks — set separately for desktop and mobile. | | Height | **Fit** the content or **Fill** the available height. | | Border thickness / Corner radius / Shadow | Appearance of the Group container. | | Background | **Media** (None, Image, Video), background image (with optional mobile image), overlay color, and backdrop blur. | | Link | Wrap the entire Group in a single link. | | Open link in new tab | Opens the Group link in a new browser tab. | | Width | **Fit** (content width), **Fill** (container width), or **Custom** — set independently for desktop and mobile. | | Limit width | Cap the block to a **Max width**. | | Color | **Inherit** the section's color scheme, or apply a separate **Color scheme**. | | Padding | Outer spacing: top / bottom / left / right, with independent mobile values via **Custom for mobile**. | {% hint style="info" %} **Enable swipe on mobile** is the simplest way to turn stacked content into a mobile carousel — arrange blocks horizontally in the Group and let visitors swipe through them. {% endhint %} ## Available blocks | Block | Description | | -------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | [Heading](/helix/theme-blocks/basic/heading.md) | Main headline with size, highlight, and animation controls. | | [Subheading](/helix/theme-blocks/basic/subheading.md) | Small label above or below a heading. | | [Text](/helix/theme-blocks/basic/text.md) | Rich-text paragraph for body copy. | | [Button](/helix/theme-blocks/basic/button.md) | Single call-to-action link. | | [Buttons](/helix/theme-blocks/basic/buttons.md) | Two side-by-side call-to-action buttons. | | [Image](/helix/theme-blocks/basic/image.md) | Inline image with ratio and link options. | | [Video](/helix/theme-blocks/basic/video.md) | Uploaded or external (YouTube/Vimeo) video with a play button. | | [Icon](/helix/theme-blocks/basic/icon.md) | An icon from the library or a custom SVG. | | [Collapsible text](/helix/theme-blocks/basic/collapsible-text.md) | Long text that truncates to a line limit with a show-more toggle. | | [Countdown timer](/helix/theme-blocks/basic/countdown-timer.md) | Live countdown to a fixed or recurring date. | | [Coupon code](/helix/theme-blocks/basic/coupon-code.md) | Displays a copyable discount code. | | [Page](/helix/theme-blocks/basic/page.md) | Pulls content from a Shopify page into the block. | | [Colors](/helix/theme-blocks/basic/colors.md) | A row of color swatches built from nested Item blocks. | | [Image comparison](/helix/theme-blocks/basic/image-comparison.md) | Before-and-after images with a draggable handle. | | [Group](/helix/theme-blocks/layout/group.md) | Another Group, for nesting layouts inside layouts. | | [Accordion](/helix/theme-blocks/layout/accordion.md) | Collapsible rows built from nested content. | | [Divider](/helix/theme-blocks/layout/divider.md) | A horizontal rule between blocks. | | [Spacer](/helix/theme-blocks/layout/spacer.md) | Adjustable empty space between blocks. | | [Email signup](/helix/theme-blocks/forms/email-signup.md) | Newsletter form with optional subscription preferences. | | [Contact form](/helix/theme-blocks/forms/contact-form.md) | A customizable contact form. | | [Popup](/helix/theme-blocks/links/popup.md) | A button that opens a popup, drawer, or bottom sheet holding nested blocks. | | [Social media links](/helix/theme-blocks/links/social-media-links.md) | Row of icons linking to your social profiles. | | [Image card](/helix/theme-blocks/cards/image-card.md) | Media card with overlaid, positioned content. | | [Product card: Compact](/helix/theme-blocks/cards/product-card-compact.md) | Small horizontal product card with thumbnail, price, and add to cart. | | [Product finder](/helix/theme-blocks/product/product-finder.md) | A short quiz that recommends products or a collection. | | [Payment icons](/helix/theme-blocks/footer/payment-icons.md) | Displays your store's accepted payment methods. | | [Custom Liquid](/helix/theme-blocks/custom/custom-liquid.md) | Insert custom Liquid, HTML, or app snippets. | {% hint style="info" %} Not every block in [Theme blocks](/helix/theme-blocks/blocks.md) fits inside a Group. **Columns**, **Masonry**, **Carousel**, **Marquee**, **Comparison table**, **Header**, **Localization**, and **Quick Links** are section-level blocks and do not appear in a Group's **Add block** picker. {% endhint %}