> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product cards

> What every product card shows, in collections, search, recommendations and featured collections.

**Where:** in the theme editor, open **Theme settings** (the gear icon at the top of the left sidebar) and choose **Product cards**.

<Frame caption="1 Theme settings (the gear icon) · 2 Product cards, opened in the sidebar">
  <img src="https://mintcdn.com/kwebby/TE8EB9pzRj50obVj/images/frosting/settings-product-cards.webp?fit=max&auto=format&n=TE8EB9pzRj50obVj&q=85&s=a1617e99bba934f30026cb8d0c608ae7" alt="Theme settings, Product cards, in the theme editor" width="1425" height="840" data-path="images/frosting/settings-product-cards.webp" />
</Frame>

## How it works

* Show quick add puts a plus button on the photo that adds the first available size.
* Show second image on hover swaps to the product's second photo on desktop.
* Show size options lists up to 4 values of the first option, such as 6 in, 8 in.
* Sale badge shows when a compare-at price is higher than the price: Sale and percentage off, Percentage off, Amount saved, Sale, or None. When sizes are discounted differently, cards say Up to 20% off or Save up to.
* The sale badge also shows next to the price on the product page.

## Edit it

* Turn off quick add if most products need a message or size choice first.
* Give every product a second photo, such as a slice, to use the hover image.

## Settings

| Setting | What it does |
| - | - |
| **Show quick add** | On or off. Default: on. |
| **Show second image on hover** | On or off. Default: on. |
| **Show size options** | On or off. Default: on. |
| **Sale badge** | Options: Sale and percentage off, Percentage off, Amount saved, Sale, None. Shown on product cards and next to the product page price when a compare-at price is higher than the price. Default: Sale and percentage off. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.