> ## 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. # Set up your products > Options and swatches, spec metafields, tags, badges, stock and media. Kelvin reads a few details from your products to show spec rows, compare tables, the product page's spec sections and the PC Builder's checks. They are all optional: a product without them still works, and every row, box or tab hides when it is empty. ![A Kelvin 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: vendor, title, type, rating, spec rows, price, stock, color dots and the Compare box ## Options and color swatches * Give products with colors an option named **Color**. Cards show a dot per color (up to six), and the product page shows swatches. * For exact swatch colors, link the Color option to the **Color** category metafield in the product editor (Shopify's swatches). A swatch can be a color or an image, such as a fabric or a finish, and cards show the image in the dot. Cards use the first option that has Shopify swatches, else the option named Color (or Colour). Without swatches, the dot uses the color name when the browser knows it, such as Black or Silver. * Turn the dots on or off with **Theme settings → Product cards → Show color swatches**. ## Prices When a product's variants have different prices, cards show the lowest and highest price, such as $49 – $89. To show From and the lowest price instead, change **Theme settings → Product cards → Products with variant prices that differ**. The setting also applies to the hero and its deals rail, the deal countdown, Shop the setup and vertical films. The product page, featured product and quick view show the price of the selected variant. ## Spec metafields Specs live in product metafields in the namespace `specs`, as **Single line text**. Create the definitions once in **Settings → Custom data → Products → Add definition** (turn on storefront access), then fill them in on each product under **Metafields**. Which specs appear on cards and in the compare table is set in **Theme settings → Product cards → Spec rows**: one `key | Label` per line. Cards show the first four that a product has (**Spec rows on cards**); the compare table shows all of them. See [Spec rows](https://docs.kwebby.com/kelvin/guides/spec-rows.md). The product page reads a few more `specs` metafields: | Name | Key | Type | Used for | | - | - | - | - | | Summary | `summary` | Single line text | A short spec line, such as 75% · hot-swap · 2.4 GHz, in search suggestions, the hero, bundles, film links and menu promos. | | Highlights | `highlights` | List of single line text, or rich text | The Overview block on the product page. | | Specifications | `specifications` | Multi-line text | Extra rows in the spec table, one `Label: value` per line. | | In the box | `in_the_box` | List of single line text | The In the box block, and the hero. | | Works with | `compatibility` | List of single line text | The Works with block, and the [Compatibility finder](https://docs.kwebby.com/kelvin/sections/compatibility-finder.md). | | Setup | `setup` | Multi-line text | Setup steps, one per line. | | Manual | `manual` | File | A download link under Setup and downloads. | | Spec sheet | `spec_sheet` | File | A second download link. | | Materials and repair | `materials` | Multi-line text | One `Label: value` per line. | | Size chart | `size_chart` | Multi-line text | The Size and fit side panel, one `Label: value` per line. | | Badge | `badge` | Single line text | A custom badge on cards, such as Editor's pick. | PC parts also carry the PC Builder's own `specs` keys, such as `socket`, `form_factor` or `psu_w`. They are listed per part type in the [PC Builder](https://docs.kwebby.com/kelvin/guides/pc-builder.md) guide, and every metafield Kelvin reads is in the [Metafields reference](https://docs.kwebby.com/kelvin/guides/metafields-reference.md). ## Tags | Tag | What it does | | - | - | | `bestseller` | The Best seller badge. Change the tag in **Theme settings → Badges → Best seller tag**. | | `preorder` | Marks the product as a pre-order: Pre-order badge and button, and a `Pre-order` line on the order. Change it in **Theme settings → Badges → Pre-order tag**. | | `pc-part` | Shows **Add to a PC build** on the product page. Change it in **Theme settings → PC Builder → Parts tag**. | ## Badges and stock * **Sale:** set a **Compare-at price** higher than the price. Cards show the sale badge chosen in **Theme settings → Badges → Sale badge**, with a short shine. * **New:** set **New badge for products added in the last** to a number of days. It is off (0) on install. * **Low stock:** cards say how many are left when a tracked variant's real inventory is at or below **Show low stock at or below** (10 on install; 0 turns the line off). * **Pre-order:** use the pre-order tag, or track the variant's inventory and allow selling when out of stock. See [Badges and pre-order](https://docs.kwebby.com/kelvin/guides/badges-and-pre-order.md). ## Photographs, films and 3D * Use the same shape for every product photograph. A square or 4:3 product shot on a plain background suits the cards best. The product page shows the whole photo in a square frame on install (**Photo fit** in the [Product information](https://docs.kwebby.com/kelvin/sections/product-information.md) section), so other shapes are not cropped there. The second image shows when a shopper hovers a card (**Show second image on hover**). * Product videos (uploaded, YouTube or Vimeo) and 3D models go in the product's media like photographs. YouTube and Vimeo players load only after a click; 3D models get Shopify's viewer. ## Ratings and reviews * Star ratings on cards read the `reviews.rating` and `reviews.rating_count` metafields that a reviews app writes. Without them, cards show no stars. * Kelvin can also show reviews you publish yourself, with a Verified purchase badge. See [Product reviews and Verified purchase](https://docs.kwebby.com/kelvin/guides/product-reviews.md). ## Care+ plans To offer protection plans with a product, create the plans as products and list them in the product metafield `custom.protection_plans`. See [Care+ protection plans](https://docs.kwebby.com/kelvin/guides/care-plus-protection-plans.md). This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.