Skip to content
Product list
Section overview
The Product List section displays products from a selected collection as a list of titles, where hovering each title reveals the product's image alongside it.
Common Use Cases
- Creating a minimal, elegantly styled product showcase
- Highlighting featured or curated products with hover effects
- Creating interactive product menus with visual feedback
- Presenting collections in a space-efficient way for lookbooks or catalogs
Usage Tips
- For the best hover effect experience, use high-quality product images with consistent dimensions
- Keep product titles concise to maintain a clean appearance in list format
- Enable margin settings for better spacing on larger screens
- Consider mobile users' experience where hover effects aren't available
- Adjust image height to ensure images appear correctly sized when revealed
Section Settings
| Setting | Description |
|---|---|
| Collection | The collection of products to display in the list |
| Products count | Maximum number of products to display (default: 7) |
| Top spacing | Adjust the spacing above the section (0-300px) |
| Bottom spacing | Adjust the spacing below the section (0-300px) |
| Color scheme | Select from theme color schemes or choose custom |
| Custom color | Select a custom background color when using the custom color scheme |
| Text color | Option to override text color (default, force light, force dark) |
| Border color | Choose between subtle or strong border color |
| Enable color fade | Enable background color transition when scrolling into view |
| Border position | Select where borders appear (none, top, bottom, or both) |
| Horizontal alignment | Align content left, center, or right |
| Image height | Adjust the size of the revealed product images (20-600px) |
| Enable margin | Apply horizontal margin from global theme settings |
| Visibility | Control section visibility across devices (all, mobile only, desktop only) |
| Show prices | Display product prices alongside titles |
| Show rating text | Display product rating information |
| Show tagline | Display product subtitle/tagline if available |
Block Settings
This section does not contain configurable blocks.