1. OPTIS Color Swatch
2. Variant Display

🧩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 and Bulk update inside the editor — 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

Updated on: 25/09/2026