Skip to content
Featured collection grid
Section Overview
The Featured collection grid section displays a customizable grid of products from a selected collection, with options for adding content blocks. It offers flexible layout controls, color schemes, and responsive design settings.
Common Use Cases
- Featured product collections on homepage
- Category pages showcasing specific product types
- Promotional sections highlighting seasonal or sale items
- Cross-selling related products on content pages
Usage Tips
- Use a reasonable product count (5-12) to balance visual appeal with performance
- For mobile, stick with 1-2 products per row to maintain readability
- Consider enabling the split layout option for larger collections to provide better context
- Adjust spacing settings based on surrounding content to maintain visual hierarchy
- Use complementary color schemes that align with your brand identity
Section Settings
| Setting | Description |
|---|---|
| Collection | Select which product collection to display |
| Products count | Set the maximum number of products to show |
| Heading | Add a title for the section |
| Content | Add descriptive text to provide context |
| Button label | Text to display on the optional button |
| Button URL | Link destination for the button |
| Top spacing | Control the padding above the section (in pixels) |
| Bottom spacing | Control the padding below the section (in pixels) |
| Color scheme | Select from predefined color themes or use custom colors |
| Custom color | Set a custom background color (when custom scheme selected) |
| Text color | Force light/dark text or use theme defaults |
| Border color | Choose between subtle or strong border colors |
| Button color | Select from various button style options |
| Enable color fade | Transition background/text color when scrolling |
| Border position | Control where borders appear (top, bottom, both, or none) |
| Row desktop | Number of products per row on desktop (1-8) |
| Row mobile | Number of products per row on mobile (1-3) |
| X alignment | Horizontal alignment of section content |
| Enable margin | Add horizontal margin to match theme settings |
| Enable split | Display header and content in a side-by-side layout |
| Enable split heading | Split the heading into separate components |
| Visibility | Control section visibility on different devices |
Block Settings
Content Block
This block allows you to add a custom content area within the product grid for promotional messages or additional information. Limited to 1 block per section.
| Setting | Description |
|---|---|
| Heading | Title for the content block |
| Content | Rich text area for descriptive content |
| Button label | Text to display on the optional button |
| URL | Link destination for the button |
| Image | Upload an image to display |
| Show image as background | Use the image as a background instead of inline |
| Video | Upload or link a video file |
| Enable autoplay | Automatically play video when in view |
| Enable mute toggle | Show mute/unmute button for videos |
| Enable loop | Continuously loop video playback |
| Minimum height | Set the minimum height of the block (in pixels) |
| Enable padding | Add internal padding to the block |
| Color scheme | Select from predefined color themes |
| Border color | Choose border style and color |
| Text color | Force light/dark text or use theme defaults |
| Button color | Select from various button style options |
| Enable gradient | Add a gradient overlay effect |
| Text position | Place text above or below content |
| Y alignment | Vertical alignment of content within block |
| X alignment | Horizontal alignment of content within block |