# Collection list grid

### Section overview

The Collection list grid Documentation section displays a customizable grid of collection cards, allowing merchants to showcase multiple collections in an organized layout.

#### Common use cases

* Highlighting featured or seasonal collections on the homepage
* Creating a collection directory or catalog page
* Showcasing specific product categories for different customer segments
* Building promotional landing pages with mixed content

#### Usage tips

* For optimal visual balance, use 3-4 collections per row on desktop
* Add content blocks between collections to break up the grid and highlight promotions
* Consider using the split layout option for stores with many collections to keep the header visible
* On mobile, reduce to 1-2 collections per row to ensure images remain large enough for comfortable viewing

### Section settings

| Setting              | Description                                              |
| -------------------- | -------------------------------------------------------- |
| Collection           | Select collections to display in the grid                |
| Heading              | Add a title for the section                              |
| Content              | Add descriptive text to provide context                  |
| Button label         | Text to display on the optional button                   |
| Button URL           | URL where the button links to                            |
| Top spacing          | Adjust the padding above the section (0-300px)           |
| Bottom spacing       | Adjust the padding below the section (0-300px)           |
| Color scheme         | Select a predefined color scheme or use a custom color   |
| Custom color         | Set a custom background color when "Custom" is selected  |
| Text color           | Choose default, force light, or force dark text          |
| Border color         | Select subtle or strong border styling                   |
| Button color         | Choose from various button style options                 |
| Enable color fade    | Enables background color transition when scrolling       |
| Border position      | Choose where borders appear (none, top, bottom, or both) |
| Desktop columns      | Number of columns per row on desktop (1-8)               |
| Mobile columns       | Number of columns per row on mobile (1-3)                |
| Horizontal alignment | Align section content left, center, or right             |
| Enable margin        | Apply horizontal margin to the section                   |
| Enable split         | Divide the section into a header area and content area   |
| Enable split heading | Apply split layout to the section heading                |
| Visibility           | Control section visibility on mobile, desktop, or both   |

### Block settings

#### Content block

Content blocks allow you to add text, buttons, images, or videos between collection cards in the grid. Limited to 20 blocks per section.

| Setting                  | Description                                     |
| ------------------------ | ----------------------------------------------- |
| Heading                  | Block title text                                |
| Content                  | Rich text content for the block                 |
| Button label             | Text for the optional button                    |
| URL                      | Destination for the button click                |
| Image                    | Upload an image to display in the block         |
| Show image as background | Use the image as a background instead of inline |
| Video                    | Upload or link a video for the block            |
| Enable autoplay          | Automatically play the video when visible       |
| Enable mute toggle       | Show a button to toggle sound on/off            |
| Enable loop              | Continuously replay the video                   |
| Minimum height           | Set the minimum block height (0-500px)          |
| Enable padding           | Add internal spacing within the block           |
| Color scheme             | Select a predefined color scheme for the block  |
| Border color             | Choose subtle, strong, or no border             |
| Text color               | Set default, light, or dark text color          |
| Button color             | Select from various button styles               |
| Enable gradient          | Add a gradient overlay to the block             |
| Text position            | Place text above or below the image/video       |
| Vertical alignment       | Align content to top, middle, or bottom         |
| Horizontal alignment     | Align content left, center, justified, or right |
| Row span                 | Number of rows the block occupies (1-6)         |
| Column span              | Number of columns the block occupies (1-6)      |