Skip to content
Alt collection grid
Section overview
The Product Featured section displays a grid of highlighted products from a selected collection, with support for heading, content text, and a call-to-action button.
Common use cases
- Showcasing featured or best-selling products on the homepage
- Highlighting seasonal or promotional products
- Creating curated product collections for specific customer segments
- Drawing attention to new product releases
Usage tips
- Products in this section work best when they have at least 4 product photos
- Adjust the number of products displayed to balance visual impact with page load performance
- Use the split layout option for larger collections to keep the heading visible while scrolling
- For mobile experiences, consider using fewer products per row (1-2) to maintain readability
- Customize color schemes to match specific marketing campaigns or seasonal themes
Section settings
| Setting | Description |
|---|---|
| Collection | Select which product collection to display |
| Total items | Set the maximum number of products to show |
| Heading | Add a title for this section |
| Content | Add descriptive text to appear below the heading |
| Button label | Text to display on the call-to-action button |
| Button URL | Link destination when the button is clicked |
| Top spacing | Control the amount of space above the section (in pixels) |
| Bottom spacing | Control the amount of space below the section (in pixels) |
| Color scheme | Choose from preset color schemes or select custom |
| Custom color | Select a custom background color when "Custom" is chosen |
| Text color | Choose default or force light/dark text colors |
| Border color | Select subtle or strong border color |
| Button color | Choose from various button styles (primary, secondary, outline, etc.) |
| Enable color fade | Enable background color transition effect when scrolling |
| Border position | Choose where borders appear (none, top, bottom, or both) |
| Desktop items per row | Control how many items appear in each row on desktop |
| Mobile items per row | Control how many items appear in each row on mobile |
| Horizontal alignment | Set content alignment (left, center, or right) |
| Enable margin | Add horizontal margin to the section |
| Enable split | Display heading on left and products on right in a split layout |
| Enable split heading | Split the heading when in split layout mode |
| Visibility | Control whether section appears on all devices, mobile only, or desktop only |
Block settings
This section does not contain blocks.