# Product listings

**Product listings** are grids or rows of products displayed on collection pages and theme sections. Each product card displays the product's image, title, and price.

Go to **Theme settings > Product listings** to customize the appearance of product cards and choose to show additional elements, like[ Quick shop](https://help.fluorescent.co/lorenza/products/quick-shop) for adding products directly to the cart and [Product badges](https://help.fluorescent.co/lorenza/products/product-badges).

![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-e2500a56236b5a61746e108c6bfd2e0a2a80d4b1%2Ffeatured-collection.jpeg?alt=media)

## Change image styles

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

| Setting                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Show second image on hover | Display the second product image when hovered over.                                                                                                                                                                                                                                                                                                                                                                                        |
| Image aspect ratio         | <p>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="../../general/image-guide/theme-image-settings#image-aspect-ratio"> Image settings guide.</a></p> |

## Show product badges

Choose whether to show **sale, sold out, and custom badges** on the products.

> To set up custom product badges, including colors and labels, see the [Product badges guide](https://help.fluorescent.co/lorenza/products/product-badges).

<table><thead><tr><th width="296">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show "Sale" badge</td><td>Display badges for products on sale.</td></tr><tr><td>Show "Sold-out" badge</td><td>Display badges for products with no stock.</td></tr><tr><td>Show custom badges</td><td>Display custom badges created in the <a href="product-badges">Product badges theme settings</a>.</td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Theme settings](https://help.fluorescent.co/lorenza/theme-styles/theme-settings)\
> [Product badges](#product-badges)\
> [Swatches](https://help.fluorescent.co/lorenza/product-pages/variant-options/variant-swatches)


---

# 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/lorenza/products/product-listings.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.