# Featured collection grid

### Section overview

The Featured collection grid section displays a collection of products in a responsive grid layout with customizable appearance and content. It can also include an optional content card.

#### Common use cases

* Showcasing featured products on the homepage
* Displaying category-specific product collections
* Creating a product highlight section with accompanying promotional content
* Building custom product showcases with mixed content

#### Usage tips

* Choose the right number of products to display based on your page layout
* Select appropriate grid sizes for desktop and mobile to maintain visual appeal
* Ensure product images are consistent in size and style for a cohesive look
* Add a content card to provide context or promotional information alongside products
* Consider color scheme choices that complement your products
* For mobile, a 2-column grid generally works better than a single column

### Section settings

| Setting              | Description                                           |
| -------------------- | ----------------------------------------------------- |
| Collection           | Select which product collection to display            |
| Total items          | Set the number of products to show (1-20)             |
| Heading              | Add a title for the section                           |
| Content              | Add descriptive text to accompany the products        |
| Button label         | Text to display on the section's button               |
| Button URL           | Link destination for the section's button             |
| Spacing top          | Amount of space above the section (0-300px)           |
| Spacing bottom       | Amount of space below the section (0-300px)           |
| Color scheme         | Select the background and text color combination      |
| Border color         | Choose subtle or strong border coloring               |
| Button color         | Select the style for buttons in this section          |
| Border position      | Position of borders (none, top, bottom, or both)      |
| Desktop columns      | Number of products per row on desktop (2-5)           |
| Mobile columns       | Number of products per row on mobile (1-2)            |
| Horizontal alignment | How content aligns horizontally (left, center, right) |
| Visibility           | Control section visibility on different devices       |

### Block settings

#### Card

This block adds a content card that can be included alongside products in the grid. Limited to 1 per section.

| Setting            | Description                                          |
| ------------------ | ---------------------------------------------------- |
| URL                | Link destination when the card is clicked            |
| Heading            | Title text for the card                              |
| Content            | Descriptive text for the card                        |
| Button label       | Text to display on the card's button                 |
| Image              | Main image to display in the card                    |
| Background image   | Image to use as card background                      |
| Video              | Video to display in the card                         |
| Enable autoplay    | Automatically play video when visible                |
| Enable mute toggle | Show mute/unmute button for video                    |
| Enable loop        | Continuously loop video playback                     |
| Index              | Position order in the grid                           |
| Color scheme       | Background and text color combination                |
| Border color       | Color of the card's border (subtle, strong, or none) |
| Button color       | Style for the card's button                          |
| Column span        | Number of grid columns the card should occupy (1-4)  |