> 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/stiletto/products/product-listings/product-card-style.md).

# Product card style

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

### <mark style="color:$primary;">Product card images</mark>

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

<sub><mark style="color:$info;">Go to Theme settings > Product listing to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="224">Setting</th><th>Description</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></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Choose to crop all product images to be a single uniform shape. Select <strong>Portrait</strong> (2:3), <strong>Square</strong> (1:1), or <strong>Landscape</strong> (3:2).<br><br>Select <strong>Natural</strong> to display images in their original shape (without cropping). Learn more about aspect ratios in our<a href="/pages/W1limMa3a6HViAgYU6Ns#image-aspect-ratio"> Image settings guide.</a></td></tr><tr><td><mark style="color:blue;">Media fit</mark></td><td>Make product images <strong>Cover</strong> the full product card or <strong>Fit</strong> within the card with its original shape.</td></tr></tbody></table>

### <mark style="color:$primary;">Product card details</mark>

Choose which product details to display on product cards. You can choose to show **swatches**, **chips**, **vendors**, and a **border** when customers hover over the products.

<sub><mark style="color:$info;">Go to Theme settings > Product listing to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="235.49432373046875">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show vendor</mark></td><td>Display vendor name beneath the product information.</td></tr><tr><td><mark style="color:blue;">Show swatches</mark></td><td>Show product swatches on hover.<br><br>Learn how to <a href="/pages/icEbZO563kl4UGPTX0fD">set up swatches</a>.</td></tr><tr><td><mark style="color:blue;">Swatch size</mark></td><td>Change the size of swatches on products cards. Select <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Show sibling swatches</mark></td><td>Display sibling products as swatches below the product.<br><br>Learn how to <a href="/pages/7X8sg3ySBWpau7aYFe7x">set up sibling product swatches</a>.</td></tr><tr><td><mark style="color:blue;">Swatch source</mark></td><td>Use the <strong>Product color</strong> or <strong>Product image</strong> as the swatch.</td></tr><tr><td><mark style="color:blue;">Show chips</mark></td><td>Show product chips (variant boxes) on hover.<br><br>Learn how to <a href="/pages/q9k1M30HenITCM5k7E0u">set up variant chips</a>.</td></tr><tr><td><mark style="color:blue;">Show border on hover</mark></td><td>Show a border line around the product cards when hovered over.</td></tr><tr><td><mark style="color:blue;">Product rating</mark></td><td>If you have a product reviews app, display ratings with either stars.<br><br>Learn about <a href="/pages/Gv4517Rg6OOcDjzJI4ML">using product review apps</a>.</td></tr><tr><td><mark style="color:blue;">Show discount</mark></td><td>Display the discount price on the product card.<br><br>You can change the discount format and choose how to display $0 prices and sold-out prices.</td></tr></tbody></table>