🧩Swatch card

Available on: Product page only

✨Demo product: Swatch card (password: 1)

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 or 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 → uses the variant images already set in your Shopify product. No per-value setup needed.

• 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.

3

Click Save to apply changes

On the Custom swatch source you can also use ✨ Auto-assign swatch, Bulk update, and override a product's swatch individually — exactly as in Custom swatch.

Show price on the card, along with card size, spacing, text, and colors, is configured in Styling — not in this editor.

---

How it looks on your store

• Product page:

Related

• 💊 Pill swatch — a more compact image + label option

• 🎨 Custom swatch / 🖼️ Auto image swatch — the two sources

• Styling settings reference — show price, sizing, colors