# 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.