Skip to content
Featured product
Section overview
The Featured Products section displays a customizable grid of highlighted products with multiple images from a selected collection.
Common use cases
- Showcase bestselling or seasonal products on the homepage
- Feature new arrivals in a visually appealing grid layout
- Highlight products with special promotions or discounts
- Create curated product collections for specific customer segments
Usage tips
- Select products with at least 4 high-quality product photos for the best visual presentation
- Customize the grid layout based on your store design (2-4 columns for desktop, 1-2 for mobile)
- Use consistent product photography style for a cohesive look
- Balance the number of featured products with page load times for optimal performance
- Test different color schemes and border styles to match your brand aesthetic
- Ensure product titles and details are clearly visible on mobile devices
Section settings
| Setting | Description |
|---|---|
| Collection | The product collection to display in the grid |
| Total items | The maximum number of products to display (default: 3) |
| Heading | The title text for the section |
| Content | Descriptive text for the section (supports rich text formatting) |
| Button label | Text to display on the section's call-to-action button |
| Button URL | The destination URL when the button is clicked |
| Spacing top | Amount of vertical space above the section (0-300px, default: 100px) |
| Spacing bottom | Amount of vertical space below the section (0-300px, default: 100px) |
| Color scheme | Background and text color combination for the section |
| Border color | Color of section borders (subtle or strong) |
| Button color | Color style for the section's button (primary, secondary, tertiary, neutral, or plain) |
| Border position | Position of section borders (none, top, bottom, or both) |
| Desktop columns | Number of product columns on desktop devices (2-4, default: 3) |
| Mobile columns | Number of product columns on mobile devices (1-2, default: 1) |
| Content alignment | Horizontal alignment of section content (left, center, or right) |
| Visibility | Device visibility options (all devices, mobile only, or desktop only) |
Block settings
This section does not contain any customizable blocks.