> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🖼️Auto image swatch

1. [OPTIS Color Swatch](/swatch)
2. [Variant Display](/swatch/variant-display)

# 🖼️Auto image swatch

| **Available on:** Product page, Collection page

✨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)

![Auto image swatch shown on a product](https://storage.crisp.chat/users/helpdesk/website/-/5/f/f/5/5ff53f2358ea7400/05c824b8-f4ee-4115-808e-15702f_37vy5z.png)

### Function

**Auto image swatch** turns the **variant images you already set in Shopify** into swatches — automatically, with no manual upload. Each variant value shows its own Shopify image as the selector.

![Auto image swatches generated from Shopify variant images](https://storage.crisp.chat/users/helpdesk/website/-/1/7/7/4/1774a9df4e8a9a00/2f2d07c6-b4d2-4da1-97db-6c0789_sz0o0.png)

### How it works

* The app reads the **image assigned to each variant** in Shopify and uses it as the swatch.
* **No manual upload needed** — nothing to configure per value.
* When you **change a variant image in Shopify**, the swatch updates after the next **Sync** (use **Sync data** on the Variants display page, or wait for auto-sync).
* If a value has **no variant image**, it has nothing to show — use [Custom swatch](/swatch/variant-display/custom-swatch) to set an image or color for it instead.

### 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 your Shopify images.
* You don't want to manage swatch images separately from your product images.

### Auto image swatch vs. Custom swatch

| Auto image swatch | Custom swatch |
| --- | --- |
| Uses the variant images already in Shopify | You set the image/color for each value by hand |
| Zero setup, stays in sync with Shopify | Supports solid colors, two-color split, and uploaded images |
| Needs every variant to have an image | Best for colors, patterns, textures, or values with no image |

---
## How to use Auto image swatch

1. Change the display type to Auto image swatch → Click Save

In **Variants display**, set the option's **Product page display** (and/or **Collection page display**) to **Auto image swatch**.

2. Make sure each variant has an image in Shopify

Assign an image to every variant value on the Shopify product. Values without an image won't render a swatch.

3. Sync so the app picks up your latest images

If you added or changed variant images, click **Sync data** on the Variants display page so the swatches reflect them.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/2/c/0/a2c079691a0ab000/bacdee48-0a40-42b5-aa41-6283e6_z93raf.png)

|| Want the swatches to show **colors, patterns, or textures** instead of the full product photo — or fill in values that have no image? Use [Custom swatch](https://help.optis.me/en/article/custom-swatch-156tim7/).

---
## How it looks on your store

* **Product page:**

![Auto image swatch on the product page](https://storage.crisp.chat/users/helpdesk/website/-/9/1/4/2/9142852894d4d800/e1b99ff1-d69c-48ce-a414-10549e_2f4kdr.png)

* **Collection page:**

![Auto image swatch on the collection page](https://storage.crisp.chat/users/helpdesk/website/-/f/8/d/7/f8d76c7e47191800/5c324ebd-de45-47ac-9cc4-63e7eb_1cl6ho0.png)

|| Want to change the **size, shape, spacing, or border** of the swatches? That's handled in [Styling](https://help.optis.me/en/article/styling-overview-1sgqoyf/).

### Related

* [🎨 Custom swatch](/swatch/variant-display/custom-swatch) — set images/colors manually
* [🪄 Auto-assign swatch](/swatch/variant-display/auto-assign-color-swatch) — fill colors in one click
* [Why is my image swatch blurry?](/swatch/frequently-asked-questions/why-is-my-image-swatch-blurry-and-how-can-i-fix-it)