# 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)                                 |