Skip to main content

Group

Help Center
Updated

Overview

The Group block is a layout container that helps you organize and align multiple blocks together.
It does not display content by itself, but controls layout, alignment, spacing, background, and borders for its child blocks.

Group is especially useful for building flexible layouts without writing custom code.

Where to use this block

You can use the Group block inside any section that supports nested blocks, for example:

  • Content sections

  • Hero / banner sections

  • Rich Collapsible Content

  • Custom layouts that require precise alignment

Block hierarchy

Group works as a parent container:

Section
└── Group
    ├── Theme blocks
    ├── App blocks
    └── Divider blocks

If the Group has no child blocks, it will not render on the storefront (except in Theme Editor preview mode).

What can be added inside a Group

Inside a Group, you can add:

  • Theme blocks (text, image, button, discount code, etc.)

  • App blocks

  • Divider blocks

Group block settings

Desktop layout (also applies to tablet)

  • Width (Desktop)
    Fit content / Fill / Custom

  • Custom width (Desktop) (visible when Width = Custom)
    Sets the container width as a percentage.

  • Content direction (Desktop)

    • Vertical: Stack items vertically

    • Horizontal: Place items side by side

  • Alignment (Horizontal layout only)
    Controls how items are aligned horizontally:

    • Left

    • Center

    • Right

    • Space between

  • Vertical alignment (Horizontal layout only)
    Aligns items vertically:

    • Top

    • Center

    • Bottom

  • Alignment (Vertical layout)
    Aligns items horizontally when stacked vertically.

  • Gap (Desktop)
    Space between child blocks.

Mobile layout

  • Width (Mobile)
    Fit content / Fill / Custom

  • Custom width (Mobile) (visible when Width = Custom)
    Sets the container width as a percentage.

  • Content direction (Mobile)
    Vertical / Horizontal

  • Alignment (Mobile – Horizontal layout)
    Left / Center / Right / Space between

  • Vertical alignment (Mobile – Horizontal layout)
    Top / Center / Bottom

  • Alignment (Mobile – Vertical layout)
    Left / Center / Right

  • Gap (Mobile)
    Space between child blocks on mobile.

Appearance

  • Inherit color scheme
    Uses the parent section’s color scheme.

  • Color scheme (visible when Inherit color scheme is disabled)
    Select a different color scheme for the Group.

  • Custom background
    Enables a custom background for the Group.

  • Background color / Gradient background (visible when Custom background is enabled)
    Supports solid colors or gradients with transparency.

Borders

  • Borders
    None / Solid / Dashed

  • Border width
    Controls border thickness.

  • Border opacity
    Controls border transparency.

  • Border radius
    Rounds the Group container corners.

Padding

Controls spacing inside the Group container:

  • Top

  • Bottom

  • Left

  • Right

Tips

  • Use Group to align buttons, text, and icons together as a single layout unit

  • For responsive layouts, stack items vertically on mobile and horizontally on desktop

  • Avoid nesting too many Groups inside each other unless needed

  • Use Gap instead of margins on child blocks for cleaner spacing control

Common use cases

  • Align multiple buttons in a row

  • Group text + button as a CTA unit

  • Create small layout sections inside larger sections

  • Control spacing and alignment without custom CSS

Limitations

  • Group does not display content on its own

  • A Group without child blocks will not appear on the storefront

  • Over-nesting Groups may make layouts harder to manage

Need help?

If the Group layout does not behave as expected:

  • Check the content direction (row vs column)

  • Verify alignment settings for the selected direction

  • Preview on both desktop and mobile

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk