> 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)
Auto image swatch shown on a product
### **Function** Automatically creates image swatches from the variant images set in Shopify.
Auto image swatches generated from Shopify variant images
### **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:
Auto image swatch on the product page
* Collection page:
Auto image swatch on the collection page