# Alternative collection grid

### Section overview

The Product Featured section displays a grid of highlighted products from a collection, each showcasing multiple product images in an attractive layout.

#### Common use cases

* Featured collections showcase on homepage
* Highlighting products with rich imagery (products with multiple photos)
* Creating visually appealing product displays that draw attention
* Promotional sections highlighting seasonal or special products

#### Usage tips

* **Best practices:**
  * Ensure selected products have at least 4 product photos for optimal display
  * Use this section for products with high-quality images to maximize visual impact
  * Add a compelling heading and description to provide context
  * Include a call-to-action button to direct customers to the full collection
* **Common pitfalls:**
  * Using products with fewer than 4 images will result in duplicated images in the grid
  * Overcrowding the page with too many products (3-4 products is usually optimal)
  * Not customizing the heading and content to match your promotional intent
* **Mobile responsiveness:**
  * Configure appropriate row size settings for mobile displays
  * Consider using a single column layout on mobile for better product visibility
  * Test how the multi-image layout appears on smaller screens

### Section settings

| Setting         | Description                                         |
| --------------- | --------------------------------------------------- |
| Products        | Header section for product-related settings         |
| Collection      | Select the collection to feature products from      |
| Total items     | Set the number of products to display (default: 3)  |
| Content         | Header section for content-related settings         |
| Heading         | Add a title for the section                         |
| Content         | Add descriptive text for the section                |
| Button label    | Add text for the call-to-action button              |
| Button URL      | Set the destination URL for the button              |
| Spacing         | Header section for spacing settings                 |
| Top spacing     | Adjust the padding above the section (0-300px)      |
| Bottom spacing  | Adjust the padding below the section (0-300px)      |
| Color           | Header section for color settings                   |
| Color scheme    | Select the background and text color combination    |
| Border color    | Choose the color for section borders                |
| Button color    | Select the style and color for the button           |
| Style           | Header section for style settings                   |
| Border position | Choose where borders appear around the section      |
| Layout          | Header section for layout settings                  |
| Row desktop     | Set the number of products per row on desktop (2-4) |
| Row mobile      | Set the number of products per row on mobile (1-2)  |
| X alignment     | Set the horizontal alignment of section content     |
| Display         | Header section for display settings                 |
| Visibility      | Control section visibility on different devices     |