> 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/auto-image-swatch.md).

# Auto image swatch

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

✨Demo product: [Auto image swatch](https://optis-color-swatch-variant.myshopify.com/products/auto-image-swatch?_pos=1&_psq=auto&_ss=e&_v=1.0) (password: 1)

<figure><img src="/files/tXwTG7ispFksc3gxZyAX" alt="Auto image swatch shown on a product"><figcaption></figcaption></figure>

### **Function**

Automatically creates image swatches from the variant images set in Shopify.

<figure><img src="/files/EwyUpmZ5Zj8jA06nFyCP" alt="Auto image swatches generated from Shopify variant images"><figcaption></figcaption></figure>

### **Use when**

* Each variant already has its own product image (e.g. Color = Red, Blue, Black).
* You want swatches to always stay in sync with Shopify images.

### How it works

* No manual upload needed.
* Changing variant images in Shopify will update the swatches after syncing.

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

* Product page:

<figure><img src="/files/4YSzWa1N8BsPvSe0ZiIg" alt="Auto image swatch on the product page"><figcaption></figcaption></figure>

* Collection page:

<figure><img src="/files/9YTVu0aHrSisBjzGKncE" alt="Auto image swatch on the collection page"><figcaption></figcaption></figure>