# Collection list grid

### Section overview

The Collection Grid section displays a responsive grid of collection cards, allowing merchants to showcase multiple product collections with customizable layout options and visual styling.

#### Common use cases

* Featuring popular or seasonal collections on the homepage
* Creating category navigation pages with visual collection thumbnails
* Highlighting new product lines or special collections
* Building landing pages with themed collection groupings

#### Usage tips

* Customize the grid layout to match your store's design aesthetic
* Include a descriptive heading and content to provide context for the collections
* Consider mobile responsiveness by setting appropriate column counts for different devices
* Use the card block to highlight a special offer or promotion alongside collections
* Ensure collection images have consistent dimensions for a uniform grid appearance
* For best visual balance, limit the number of collections to what fits comfortably in your 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                 | Link destination for the call-to-action button                      |
| Spacing top                | Controls the top padding in pixels (0-300px)                        |
| Spacing bottom             | Controls the bottom padding in pixels (0-300px)                     |
| Color scheme               | Sets the background color and text color                            |
| Border color               | Sets the color of section borders                                   |
| Button color               | Determines the color and style of the button                        |
| Border position            | Sets where borders appear (none, top, bottom, or both)              |
| Desktop columns            | Number of columns to display on desktop devices (2-5)               |
| Mobile columns             | Number of columns to display on mobile devices (1-2)                |
| Horizontal alignment       | Controls how content aligns horizontally (left, center, right)      |
| Visibility                 | Controls device visibility (all devices, mobile only, desktop only) |
| Show collection size count | Toggles display of product count for each collection                |

### Block settings

#### Card

A customizable content card that can be used to highlight special offers or promotions alongside collection items.

Block limit: 1

| Setting                 | Description                                         |
| ----------------------- | --------------------------------------------------- |
| URL                     | Link destination for the card                       |
| Heading                 | Main heading text for the card                      |
| Content                 | Rich text content displayed in the card             |
| Button label            | Text for the optional call-to-action button         |
| Image                   | Primary image displayed in the card                 |
| Background image        | Secondary image displayed as the card background    |
| Video                   | Optional video to display in the card               |
| Enable autoplay         | Toggles automatic video playback                    |
| Enable mute toggle      | Shows or hides a button to toggle video sound       |
| Enable loop             | Controls whether the video plays on a loop          |
| Background color scheme | Sets the card's background and text colors          |
| Border color            | Sets the color of card borders or removes them      |
| Button color            | Determines the color and style of the card's button |
| Column span             | Number of grid columns the card should occupy (1-4) |


---

# 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/paper/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.