Use the variant's own photo
Instead of mapping colours, let each swatch show the variant's own product photo. There is nothing to set per value: the photo comes straight from the variant in Shopify.
Suitable for
Colours that differ from product to product, designs, models, and any option where a photo explains the choice better than a colour chip.
Prerequisites
Each variant has its own image in Shopify. Open the product, click a variant and set its image; product images alone aren't enough.
Show variant photos
- 1
Pick a photo style
In Options, set the option's Product page style to Variant image (photo chips) or Polaroid (photo cards with a caption). For product cards, choose Variant image in the Collection page picker.
Choosing Variant image in the style picker - 2
Leave Swatch image on Auto
Auto (recommended) already uses variant photos for these two styles. The column is an override, for when you want another style to use the photo as well.
- 3
Save
Click Save and refresh a product page on your store.
The Swatch image setting
The Swatch image column on the Options page decides where image swatches take their picture from:
| Setting | What the swatch shows |
|---|---|
| Auto (recommended) | Variant photos for Variant image and Polaroid; the value's own colour or image for every other style. |
| Variant photo | The variant's photo in any swatch style, for example a Color swatch filled with the product photo instead of the colour. |
| Value colour or image | The colour or image you set on the Values page, even for Variant image and Polaroid. |
The setting is greyed out when neither of the option's styles draws swatches, for example when both are button styles.
When a variant has no photo
The swatch falls back to the colour or image you mapped for that value. If there's none, it shows as an empty chip with the value name on hover. Add the variant's image in Shopify and the swatch picks it up on the next page load, with no sync needed.
Sharper photos
Variant photos load at 120 px wide by default to keep pages fast. If they look soft on large swatches or polaroids, raise Photo sharpness to Sharp (240px) or Very sharp (480px) in the style's Advanced styling.
Troubleshooting
- The variant itself, not only the product, has an image in Shopify.
- The option's style is Variant image or Polaroid, or its Swatch image is set to Variant photo.
- Swatch image isn't set to Value colour or image.
- You clicked Save on the Options page.
Need help?
Open the app and click Chat with us on the Dashboard for free setup assistance, or contact us with your store address and what you are stuck on.