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

> How product cards look everywhere: hover image, image shape, quick view, metal swatches, option summaries, badges, pre-order and price on request tags, and the low stock line.

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

![Theme settings, Product cards, in the theme editor](https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/settings-product-cards.webp?fit=max\&auto=format\&n=ipMVAv6ECVUC3DoM\&q=85\&s=6dfce52e415b41a96b3e4be974e1e183)

1 Theme settings (the gear icon) · 2 Product cards, opened in the sidebar

![A product card](https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/guide-card-swatches.webp?fit=max\&auto=format\&n=Y7lUE3PaLXfHjaRp\&q=85\&s=8f336777ccac7de03eb6abe6e9d0a0d7)

A product card with its metal swatches and the ring size summary

## How it works

* Image on hover shows a close-up of the same photograph, the second photograph, or nothing.
* Image shape is Portrait, Square or Natural.
* Show metal swatches shows the swatches of the first option that has Shopify swatches, such as Metal. Pressing a swatch changes the card's photograph and link.
* Options to summarize on cards lists how many values each named option has, for example Ring size 4 to 9.
* Sale badge shows when a variant has a compare-at price above its price: Sale and percentage off, Percentage off, Amount saved, Sale, or None.
* The New badge shows on products published in the last N days (0 turns it off).
* Products with the Pre-order product tag, or tracked variants that continue selling at zero stock, show Pre-order.
* Products with the Price on request product tag, or with the metafield custom.price\_on\_request set to true, hide their price and show an enquiry button.
* Show "Only N left" uses the real inventory of tracked variants. 0 turns it off, which is the default.

## Edit it

* Give your Metal option Shopify swatches so cards show them. See [Metal swatches](https://docs.kwebby.com/gloaming/guides/metal-swatches.md).
* Change the tag names only if your products already use other tags for pre-order or price on request.
* Set Show "Only N left" at or below to 1, 2 or 3 if you want the line. It never shows invented numbers.

## Settings

| Setting | What it does |
| - | - |
| **Image on hover** | Options: Close-up of the same photograph, Second photograph, None. Default: Close-up of the same photograph. |
| **Image shape** | Options: Portrait, Square, Natural. Default: Portrait. |
| **Show quick view button** | On or off. Default: on. |
| **Show metal swatches** | On or off. Uses the swatches of the first option that has them, such as Metal. Default: on. |
| **Options to summarize on cards** | Text. Comma-separated option names. Cards list how many values each has, for example "Sizes 4 to 9". Default: Ring size, Size, Length. |

**Badges and prices**

| Setting | What it does |
| - | - |
| **Sale badge** | Options: Sale and percentage off, Percentage off, Amount saved, Sale, None. Shown when a variant has a compare-at price above its price. Default: Sale and percentage off. |
| **New badge for products published in the last** | Slider from 0 to 90 d. 0 turns the New badge off. Default: 0 d. |
| **Pre-order product tag** | Text. Products with this tag, or tracked variants that continue selling at zero stock, show Pre-order. Default: pre-order. |
| **Price on request product tag** | Text. Products with this tag, or with the metafield custom.price\_on\_request set to true, hide their price and show an enquiry button. Default: price-on-request. |
| **Show "Only N left" at or below** | Slider from 0 to 10. Uses real inventory of tracked variants. 0 turns it off. Default: 0. |


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