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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.