# Collection list grid

### Section overview

The Collection list grid Section displays a curated grid of collection cards, allowing merchants to showcase multiple collections in a visually appealing layout.

#### Common Use Cases

* Featuring seasonal or thematic collections on the homepage
* Creating category navigation areas on landing pages
* Highlighting new or promotional collections
* Building a visual directory of product categories

#### Usage Tips

* Use the split layout option for more engaging designs when you have compelling section copy
* Adjust the number of columns based on the number of collections you want to display
* Consider adding content blocks to break up the grid and include promotional messages
* For mobile optimization, limit to 1-2 collections per row to ensure good visibility
* Use consistent collection images with similar aspect ratios for a cohesive grid layout

### Section Settings

| Setting              | Description                                                        |
| -------------------- | ------------------------------------------------------------------ |
| Collection           | Select collections to display in the grid                          |
| Heading              | Main heading text for the section                                  |
| Content              | Rich text content displayed below the heading                      |
| Button label         | Text for the optional call-to-action button                        |
| Button URL           | URL the button links to when clicked                               |
| Top spacing          | Controls padding above the section (0-300px)                       |
| Bottom spacing       | Controls padding below the section (0-300px)                       |
| Color scheme         | Sets the background and text color theme                           |
| Border color         | Determines the color of section borders                            |
| Button color         | Controls the style and color of buttons in the section             |
| Border position      | Sets where borders appear (top, bottom, both, or none)             |
| Desktop columns      | Number of columns to display on desktop (1-8)                      |
| Mobile columns       | Number of columns to display on mobile (1-3)                       |
| Horizontal alignment | Controls horizontal alignment of section content                   |
| Enable margin        | Toggles horizontal margin on the section                           |
| Enable split         | Enables split layout with header on the left and grid on the right |
| Visibility           | Controls section visibility on different device types              |

### Block Settings

#### Content Block

This block type adds custom content cards within the collection grid, useful for promotional messages or special announcements.

Block limit: 20

| Setting              | Description                                            |
| -------------------- | ------------------------------------------------------ |
| Heading              | Title text for the content block                       |
| Content              | Rich text content for the block                        |
| Button label         | Text for the optional call-to-action button            |
| URL                  | Link destination for the block                         |
| Image                | Primary image to display in the block                  |
| Image background     | Background image for the block                         |
| Video                | Optional video to display in the block                 |
| Enable autoplay      | Automatically plays video when in view                 |
| Enable mute toggle   | Shows mute/unmute controls for videos                  |
| Enable loop          | Continuously loops video playback                      |
| Minimum height       | Sets the minimum height of the block (0-500px)         |
| Enable padding       | Toggles padding inside the block                       |
| Color scheme         | Sets the background and text color theme for the block |
| Text color           | Controls the color of text content                     |
| Border color         | Determines the color of block borders                  |
| Button color         | Controls the style and color of the button             |
| Enable gradient      | Adds a gradient overlay to the block                   |
| Vertical alignment   | Controls vertical alignment of block content           |
| Horizontal alignment | Sets horizontal alignment of block content             |
| Text position        | Places text either above or below the media content    |
| Row span             | Number of rows the block spans in the grid (1-6)       |
| Column span          | Number of columns the block spans in the grid (1-6)    |