> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/products/product-listings/product-card-styles.md).

# Product card styles

Go to **Theme settings > Product listing** to customize the appearance of product cards.

## Product card images

***

Change the **shape (aspect ratio)** of the product images, and enable a **secondary image on hover**.

<table><thead><tr><th width="176">Setting</th><th width="355">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show second image on hover</mark></td><td>Display the second product image when a cursor hovers over a product card.</td><td></td></tr><tr><td><mark style="color:blue;">Aspect ratio</mark></td><td>Make product images consistent by cropping them to a square or rectangular shape. Select Natural to maintain their original shape without cropping.</td><td><strong>Natural</strong><br><strong>Portrait (2:3)</strong><br><strong>Portrait (4:5)</strong><br><strong>Square (1:1)</strong><br><strong>Landscape (5:4)</strong><br><strong>Landscape (3:2)</strong></td></tr></tbody></table>

## Product card details

***

Choose to show vendor names, swatches, and product ratings.

### Show vendor

***

<table><thead><tr><th width="190">Setting</th><th width="338">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show vendor</mark></td><td>Show vendor names on product cards.</td><td><ul class="contains-task-list"><li><input type="checkbox"><em><mark style="background-color:yellow;">Default</mark></em></li></ul></td></tr></tbody></table>

### Show swatches

***

Go to **Theme settings > Swatches** to show swatches on product listings.

<table><thead><tr><th width="190">Setting</th><th width="373">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable product listing swatches</mark></td><td>Show product variant swatches on hover.<br><br>Go to Theme settings to <a href="/pages/XeP1NCniPgMwEdnnBXop">set up swatches</a>.</td><td><ul class="contains-task-list"><li><input type="checkbox"><em><mark style="background-color:yellow;">Default</mark></em></li></ul></td></tr></tbody></table>

### Show product ratings

***

<table><thead><tr><th width="190">Setting</th><th width="368">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show product ratings</mark></td><td>If you have a product reviews app, display ratings with either stars, the number of reviews, or both.</td><td><p><strong>Rating &#x26; Count</strong> <em><mark style="background-color:yellow;">Default</mark></em></p><p><strong>Rating</strong></p><p><strong>Count</strong></p></td></tr></tbody></table>