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


---

# 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/eclipse/products/product-listings/product-card-styles.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.