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