Skip to content
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 |