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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/space/sections/products-and-collections/collection-list-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.