# Product card style

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

## Product card images

***

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

 

`Go to Theme settings > Product listing to find settings`

<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).<br><br>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>

&#x20;

## Product card details

***

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.

&#x20;

`Go to Theme settings > Product listing to find settings`

<table><thead><tr><th width="242">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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/stiletto/products/product-listings/product-card-style.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.