Appearance

Group Block ​

What This Block Does ​

The Group Block acts as a flexible container that holds other blocks, allowing you to create sophisticated layouts with custom backgrounds, precise spacing, and responsive behavior. It's like having a mini-section within any existing section.

Perfect for: Creating card-like layouts, organizing related content together, building complex multi-column designs, and adding visual backgrounds to grouped content

How to Add It ​

Step 1: Add the Group Block

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Navigate to any section that supports blocks
  4. Click Add block and choose Group Block from the list

Step 2: Add Content Inside the Group

  1. Once added, you'll see Add block options within the Group Block
  2. Add any combination of blocks (text, images, buttons, etc.)
  3. Arrange them using the layout controls

Key Settings to Configure ​

Layout Controls ​

Direction: Choose how blocks inside the group are arranged

  • When to use: Column (vertical) for stacked content, Row (horizontal) for side-by-side layouts
  • Pro tip: Use Row direction for creating multi-column layouts on desktop

Alignment & Positioning: Control how content is positioned within the container

  • Best practice: Center alignment works well for most content types
  • When to use: Use different alignments to create asymmetrical, modern designs

Spacing: Adjust the gap between blocks inside the group

  • Pro tip: Consistent spacing creates a more professional appearance

Size Controls ​

Width Mode: Control how wide the group appears

  • Fit Content: Group sizes to match its content (great for centered elements)
  • Fill Space: Group stretches to fill available width (perfect for full-width sections)
  • Custom Width: Choose specific percentages (useful for multi-column layouts)

Height Mode: Control the group's height behavior

  • Fit Content: Height adjusts to content (most common choice)
  • Fill Space: Stretches to match parent height (great for equal-height cards)
  • Custom Height: Set specific heights (useful for hero sections)

Background Options ​

Background Media: Add visual interest behind your content

  • Color: Use theme colors or custom background colors
  • Image: Upload background images with overlay options
  • Video: Add background videos for dynamic presentations
  • Pro tip: Use subtle overlays to ensure text remains readable over images/videos

Pro Tips for Success ​

Layout Best Practices

  • Use for organization: Group related content like testimonials with author info
  • Create cards: Add backgrounds and spacing to make content stand out
  • Build columns: Use multiple Group Blocks side-by-side for complex layouts
  • Mobile optimization: Test how your grouped content looks on smaller screens

Common Mistakes

  • Too much nesting: Avoid putting Group Blocks inside other Group Blocks excessively
  • Inconsistent spacing: Use the same gap settings across similar Group Blocks
  • Overwhelming backgrounds: Keep background images subtle so content remains readable