> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/swatch/variant-display/swatch-card.md).

# Swatch card

{% hint style="success" %}
**Available on:** Product page only
{% endhint %}

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

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-a3d6cf93b24dd8d1c5a5349c166f0f1fb15005f6%2Fswatch-card-hero.png?alt=media" alt="Swatch card shown on a product"><figcaption></figcaption></figure>

### **Function**

Displays each variant as a card showing **variant image, option value, and price (optional)** in a single layout.

### **How it works**

* Each option appears inside a **polaroid-style card**
* Customers can see key variant details at a glance before selecting

### **Use when**

* Variants differ in **appearance and price**
* You want customers to **compare options easily** without clicking back and forth

### **How to use Swatch Card**

{% stepper %}
{% step %}

#### Change the display type to Swatch Card > Click Save

{% endstep %}

{% step %}

#### Choose the swatch source:

* [**Auto Image Swatch**](/swatch/variant-display/auto-image-swatch.md)\
  → Uses the variant images already set in your Shopify product

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-9c3e9ee8644a932c4209bc550f0e679308925421%2Fswatch-card-source-auto-image.png?alt=media" alt="Swatch card using the Auto Image Swatch source"><figcaption></figcaption></figure>

* [**Custom Swatch**](/swatch/variant-display/custom-swatch.md)\
  → Upload your own images or use solid colors (hex codes) for each variant

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-840c52daa7213a91ea64309c3692038da4ad0705%2Fswatch-card-source-custom.png?alt=media" alt="Swatch card using the Custom Swatch source"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Click Save to apply changes

{% endstep %}
{% endstepper %}

### **How it looks on your store**

* Product page:

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-9ab25990e2a8ec15958dd6715271f184eb67ff58%2Fswatch-card-product-page.png?alt=media" alt="Swatch card on the product page"><figcaption></figcaption></figure>