> ## 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: spec rows, a second image on hover, quick view, quick add, the Compare box, vendor, rating, prices that vary by variant, the Pay in 4 line, color swatches and the 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/tbWCv70mkhaUy_7w/images/kelvin/settings-product-cards.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=f19453c494fa5a0bfa0e7fb443c749fc)

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

![A product card](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/guide-product-card.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=dd7280453eecf6121ccc09fbe303ad01)

A product card with spec rows, rating, price, stock, color dots and the Compare box

## How it works

* Spec rows lists the spec metafields Kelvin shows, one `key | Label` per line, with keys from the `specs` namespace. Product cards, the product page's specs, quick view, compare tables and the PC Builder all read this one list. See [Spec rows](https://docs.kwebby.com/kelvin/guides/spec-rows.md).
* Spec rows on cards sets how many rows a card shows, 0 to 6 (4 on install): the first specs of the list that the product has. Under 750 px cards show the first two. 0 hides them.
* Show second image on hover fades to the product's second image while a mouse pointer is over the card.
* Quick view adds an eye button on the photo that opens the product in a dialog.
* Quick add button adds a single-variant product straight to the cart. It reads Pre-order for pre-orders and Sold out, disabled, when nothing can be bought. Products with options get Choose options, which opens quick view, or the product page when Quick view is off.
* Compare checkbox adds a Compare box that puts the product on the shopper's compare list. It shows only once a Compare page is chosen in Theme settings → Compare.
* Show vendor prints the vendor above the title. Show rating shows stars only when a reviews app writes the `reviews.rating` and `reviews.rating_count` metafields; without them nothing shows.
* Products with variant prices that differ sets the price of a product whose variants cost different amounts. Show the lowest and highest price, the setting on install, prints both with a dash between them; Show From and the lowest price prints From and the lowest price. It applies to product cards, the hero, the deal countdown, Shop the setup and Vertical films. The product page, Featured product and quick view show the selected variant's price.
* Show the Pay in 4 line is off on install. On, it prints or 4 payments of, with the price divided by four, under the price, but only when Shop Pay is one of your payment methods and the price reaches Pay in 4 minimum price (50 on install, in your store currency). It is hidden on phones and on sold-out products. The hero product, the PC Builder total and the cart's Shop Pay line use the same rule. Shoppers who browse in another currency never see these lines, since the minimum is not converted. Shopify decides real eligibility at checkout.
* Show color swatches shows up to six dots for the first option whose values have Shopify swatches, or else an option named Color or Colour, when it has two or more values. Each dot shows the value's swatch image or swatch color from Shopify, or the value's name read as a color.
* Show low stock at or below prints Only 3 left (for example) when a variant tracked by Shopify has that many or fewer in stock, and In stock otherwise. The same number drives the product page's stock line. 0 removes Only N left everywhere and In stock from cards; Sold out and Pre-order still show.

## Edit it

* Fill Spec rows first on a tech store: it is what makes cards and compare tables useful. Put the spec that matters most for each kind of product first.
* Turn on Show the Pay in 4 line only when Shop Pay Installments is active on your store, and set Pay in 4 minimum price to the minimum Shop Pay Installments sets for your market.
* Give your option values swatches in Shopify, a color or an image, so the dots show the real finish. Without them, only values that are plain color names, such as Black or White, get a color.
* A lower Show low stock at or below, such as 3 or 5, keeps Only N left for items that are really running out. The line always uses your real inventory.
* Untick Quick view, Quick add button or Compare checkbox if your products need the full product page to choose.

## Settings

| Setting | What it does |
| - | - |
| **Spec rows** | Text (several lines). One per line: a metafield key in the specs namespace, a bar, and its label. Cards show as many as Spec rows on cards, in this order, skipping specs a product lacks; compare tables show all of them. Default: battery\_life \| Battery noise\_cancelling \| Noise cancelling connectivity \| Connection layout \| Layout switches \| Switches polling\_rate \| Polling rate power\_output \| Power ports \| Ports socket \| Socket cores \| Cores vram \| Video memory form\_factor \| Form factor capacity \| Capacity wattage \| Wattage screen\_size \| Screen refresh\_rate \| Refresh rate water\_resistance \| Water resistance weight \| Weight. |
| **Spec rows on cards** | Slider from 0 to 6. Default: 4. |
| **Show second image on hover** | On or off. Default: on. |
| **Quick view** | On or off. Default: on. |
| **Quick add button** | On or off. Default: on. |
| **Compare checkbox** | On or off. Default: on. |
| **Show vendor** | On or off. Default: on. |
| **Show rating** | On or off. Needs a reviews app that writes product ratings. Default: on. |
| **Products with variant prices that differ** | Options: Show the lowest and highest price, Show From and the lowest price. On product cards, the hero, featured products and films. Default: Show the lowest and highest price. |
| **Show the Pay in 4 line** | On or off. Turn on only when Shop Pay Installments is active on your store. The line shows on cards, the hero and the PC Builder total when Shop Pay is a payment method and the price reaches the minimum below. Default: off. |
| **Pay in 4 minimum price** | Number. In your store currency. Match the minimum Shop Pay Installments sets for your market. Shoppers who browse in another currency do not see the line, since the minimum is not converted. Default: 50. |
| **Show color swatches** | On or off. Default: on. |
| **Show low stock at or below** | Slider from 0 to 25. Reads the real inventory: the line shows when a tracked variant has this many or fewer in stock. 0 turns the line off. Default: 10. |


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