# Featured collection grid

### Section Overview

The Featured collection grid section displays a customizable grid of products from a selected collection, with options for adding content blocks. It offers flexible layout controls, color schemes, and responsive design settings.

#### Common Use Cases

* Featured product collections on homepage
* Category pages showcasing specific product types
* Promotional sections highlighting seasonal or sale items
* Cross-selling related products on content pages

#### Usage Tips

* Use a reasonable product count (5-12) to balance visual appeal with performance
* For mobile, stick with 1-2 products per row to maintain readability
* Consider enabling the split layout option for larger collections to provide better context
* Adjust spacing settings based on surrounding content to maintain visual hierarchy
* Use complementary color schemes that align with your brand identity

### Section Settings

| Setting              | Description                                                 |
| -------------------- | ----------------------------------------------------------- |
| Collection           | Select which product collection to display                  |
| Products count       | Set the maximum number of products to show                  |
| 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           | Link destination for the button                             |
| Top spacing          | Control the padding above the section (in pixels)           |
| Bottom spacing       | Control the padding below the section (in pixels)           |
| Color scheme         | Select from predefined color themes or use custom colors    |
| Custom color         | Set a custom background color (when custom scheme selected) |
| Text color           | Force light/dark text or use theme defaults                 |
| Border color         | Choose between subtle or strong border colors               |
| Button color         | Select from various button style options                    |
| Enable color fade    | Transition background/text color when scrolling             |
| Border position      | Control where borders appear (top, bottom, both, or none)   |
| Row desktop          | Number of products per row on desktop (1-8)                 |
| Row mobile           | Number of products per row on mobile (1-3)                  |
| X alignment          | Horizontal alignment of section content                     |
| Enable margin        | Add horizontal margin to match theme settings               |
| Enable split         | Display header and content in a side-by-side layout         |
| Enable split heading | Split the heading into separate components                  |
| Visibility           | Control section visibility on different devices             |

### Block Settings

#### Content Block

This block allows you to add a custom content area within the product grid for promotional messages or additional information. Limited to 1 block per section.

| Setting                  | Description                                     |
| ------------------------ | ----------------------------------------------- |
| Heading                  | Title for the content block                     |
| Content                  | Rich text area for descriptive content          |
| Button label             | Text to display on the optional button          |
| URL                      | Link destination for the button                 |
| Image                    | Upload an image to display                      |
| Show image as background | Use the image as a background instead of inline |
| Video                    | Upload or link a video file                     |
| Enable autoplay          | Automatically play video when in view           |
| Enable mute toggle       | Show mute/unmute button for videos              |
| Enable loop              | Continuously loop video playback                |
| Minimum height           | Set the minimum height of the block (in pixels) |
| Enable padding           | Add internal padding to the block               |
| Color scheme             | Select from predefined color themes             |
| Border color             | Choose border style and color                   |
| Text color               | Force light/dark text or use theme defaults     |
| Button color             | Select from various button style options        |
| Enable gradient          | Add a gradient overlay effect                   |
| Text position            | Place text above or below content               |
| Y alignment              | Vertical alignment of content within block      |
| X alignment              | Horizontal alignment of content within block    |