Skip to content
Collage
Section overview
The Collage grid section creates a flexible grid layout of customizable content cards that can be used to display various types of content with images, videos, text, and buttons.
Common use cases
- Creating a product showcase or collection highlights
- Building a features or benefits grid
- Displaying team members or testimonials
- Creating a visual collage of promotional content or announcements
Usage tips
- For the best visual balance, use consistent content block heights or intentionally vary them using row span settings
- Customize individual blocks with different background colors to create visual interest
- Consider mobile layout carefully - fewer columns (1-2) work best on smaller screens
- For best performance, optimize images before uploading and use video sparingly
- Use the split layout option when you want a persistent header alongside scrollable content
Section settings
| Setting | Description |
|---|---|
| Heading | The main title for the section |
| Content | Descriptive text to accompany the section heading |
| Button label | Text displayed on the section's call-to-action button |
| Button URL | Destination link when the section button is clicked |
| Top spacing | Amount of padding above the section (in pixels) |
| Bottom spacing | Amount of padding below the section (in pixels) |
| Color scheme | Background and text color combination for the entire section |
| Border color | Color for the section border (subtle or strong) |
| Button color | Style and color variant for the section's button |
| Border position | Where borders appear on the section (none, top, bottom, or both) |
| Columns (desktop) | Number of columns to display on desktop devices (1-8) |
| Columns (mobile) | Number of columns to display on mobile devices (1-4) |
| Horizontal alignment | How content aligns horizontally within the section (left, center, right) |
| Enable margin | Whether to include horizontal margin around the section |
| Enable split | Whether to split the section into a fixed header and scrollable content |
| Visibility | Control on which devices the section appears (all, mobile only, desktop only) |
| Account visibility | Controls when the section is displayed based on customer login status (always, logged out, logged in but not approved, logged in and approved). Available in theme version 2.0.1 or later. |
Block settings
Content block
Content blocks are the individual card elements within the grid. Each can have its own content, media, and styling.
Block limit: 20
| Setting | Description |
|---|---|
| Heading | The title for this content block |
| Content | Rich text content for this block |
| Button label | Text displayed on this block's call-to-action button |
| URL | Destination link when this block is clicked |
| Image | Main image to display in this content block |
| Background image | Image to use as background for this content block |
| Video | Video to display in this content block |
| Enable autoplay | Whether the video should play automatically |
| Enable mute toggle | Whether to show a button to toggle video sound |
| Enable loop | Whether the video should repeat continuously |
| Minimum height | Minimum height of the content block (in pixels) |
| Enable padding | Whether to include internal padding within the block |
| Color scheme | Background and text color combination for this block |
| Text color | Control whether text appears in default, light, or dark color |
| Border color | Color for the block's border (subtle, strong, or none) |
| Button color | Style and color variant for the block's button |
| Enable gradient | Whether to apply a gradient effect to the block background |
| Vertical alignment | How content aligns vertically within the block (top, middle, bottom) |
| Horizontal alignment | How content aligns horizontally within the block (left, center, justify, right) |
| Text position | Whether text appears above or below media content |
| Row span | How many rows this block should occupy (1-6) |
| Column span | How many columns this block should occupy (1-6) |