> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🧩Swatch card

1. [OPTIS Color Swatch](/swatch)
2. [Variant Display](/swatch/variant-display)

# 🧩Swatch card

**Available on:** Product page only

✨Demo product: [Swatch card](https://optis-color-swatch-variant.myshopify.com/products/bucket-hat-1?variant=45188750508169) (password: 1)

![Swatch card shown on a product](https://storage.crisp.chat/users/helpdesk/website/-/b/b/f/7/bbf7a82c7bf5b800/a9a89bea-046b-463d-b8f9-53e857_146g5oo.png)

### Function

Displays each variant as a **polaroid-style card** showing the **swatch (image or color)**, the **option value**, and the **price (optional)** in one layout — so customers see the key details of every variant at a glance.

### How it works

* Each value appears inside its own **card**: preview on top, label (and optional price) below.
* The selected card is **visually highlighted**.
* The swatch inside each card comes from one of two **sources** you choose: [Auto image swatch](/swatch/variant-display/auto-image-swatch) or [Custom swatch](/swatch/variant-display/custom-swatch).

### Use when

* Variants differ in **appearance and price**.
* You want customers to **compare options easily** without clicking back and forth.
* You have room on the product page for a richer, more visual selector.

---
## How to use Swatch card

1. Change the display type to Swatch card → Click Save

2. Open the editor (pencil icon) and choose the swatch source

Click the **pencil / edit icon** next to the display type. At the top of the editor, use the **source** dropdown to pick where the card's swatch comes from:

* [Auto image swatch](/swatch/variant-display/auto-image-swatch) → uses the variant images already set in your Shopify product. No per-value setup needed.

![Swatch card using the Auto image swatch source](https://storage.crisp.chat/users/helpdesk/website/-/b/2/e/9/b2e93aee1d94b800/14d1b092-c3fe-4099-82f2-dcb79a_xw5xn7.png)

* [Custom swatch](/swatch/variant-display/custom-swatch) → set each value by hand: upload your own images, or use solid colors / two-color splits (hex codes). The editor lists every value with a live preview.

![Swatch card using the Custom swatch source](https://storage.crisp.chat/users/helpdesk/website/-/5/e/9/8/5e98865ba32f6c00/78539592-7414-4117-8fa1-255ba5_11wkys0.png)

3. Click Save to apply changes

On the **Custom swatch** source you can also use **✨ Auto-assign swatch** and **Bulk update** inside the editor — exactly as in [Custom swatch](/swatch/variant-display/custom-swatch).

**Show price** on the card, along with card **size, spacing, text, and colors**, is configured in [Styling](/swatch/styling/styling-overview) — not in this editor.

---
## How it looks on your store

* **Product page:**

![Swatch card on the product page](https://storage.crisp.chat/users/helpdesk/website/-/5/1/d/7/51d7544432d05800/11c78283-f0d4-4ec3-81df-5a9cdd_4e8juw.png)

### Related

* [💊 Pill swatch](/swatch/variant-display/pill-swatch) — a more compact image + label option
* [🎨 Custom swatch](/swatch/variant-display/custom-swatch) / [🖼️ Auto image swatch](/swatch/variant-display/auto-image-swatch) — the two sources
* [Styling settings reference](/swatch/styling/styling-settings-reference) — show price, sizing, colors