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

# 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](/lorenza/products/quick-shop.md) for adding products directly to the cart and [Product badges](/lorenza/products/product-badges.md).

![](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="/lorenza/general/image-guide/theme-image-settings.md#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](/lorenza/products/product-badges.md).

<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="/lorenza/products/product-badges.md">Product badges theme settings</a>.</td></tr></tbody></table>

\\

***

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