🖼️Auto image swatch

  1. OPTIS Color Swatch
  2. Variant Display


🖼️Auto image swatch


Available on: Product page, Collection page


✨Demo product: Auto image swatch (password: 1)


Auto image swatch shown on a product


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


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 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.


  1. 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.


  1. 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.



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.


How it looks on your store


  • Product page:


Auto image swatch on the product page


  • Collection page:


Auto image swatch on the collection page


Want to change the size, shape, spacing, or border of the swatches? That's handled in Styling.



Updated on: 25/09/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!