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


---

# 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/alternative-collection-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.