# 🧩 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="/files/expcY0wtKUZsrY3nuvBU" alt=""><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**\
  → Uses the variant images already set in your Shopify product

<figure><img src="/files/2GczaAp87GPeKqR4CjJH" alt=""><figcaption></figcaption></figure>

* **Custom Swatch**\
  → Upload your own images or use solid colors (hex codes) for each variant

<figure><img src="/files/16HjJhiJwEKMyIqTrPYW" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Click Save to apply changes

{% endstep %}
{% endstepper %}

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

* Product page:

<figure><img src="/files/8uvRpr38Al9yF5p7WwDS" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.optis.me/swatch/variant-display/swatch-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.