How to add image swatches in Shopify (photo swatches in the variant picker)

July 7, 2026

a variant picker row showing photo thumbnail swatches with a click cursor selecting one, image swatch setup

To add image swatches in Shopify, you assign a photo to each variant and then display those photos as clickable thumbnails in the variant picker, which takes an app because Shopify shows variants as plain text by default. Image swatches replace a “Color: Olive / Navy / Rust” dropdown with tiny pictures of the actual olive, navy, and rust, so a shopper picks by looking, not by reading. This guide walks the setup, step by step.

Image swatches are different from hex color swatches (a solid color circle), and this matters for setup: a color swatch just needs a color value, but an image swatch needs an actual image assigned to the variant. If you are not sure which you want, our post on what a swatch image means covers the distinction. This one is the how-to, using Rubik Variant Images, which we build.

Why native Shopify cannot do it alone

Shopify’s native variant picker renders options as a text dropdown or plain buttons. There is no built-in setting to turn a color option into photo thumbnails. You can assign one featured image per variant, but that controls the main gallery image, not a swatch thumbnail in the picker. So image swatches come from an app that reads your variant images and renders them as a clickable swatch row. That is the whole reason this is an app job and not a theme setting.

Assign images to variants with drag and drop in Rubik Variant Images

How to add image swatches, step by step

Install a variant image app and open it from your Shopify admin. Pick the product you want image swatches on.
Assign an image to each variant. Drag and drop the right photo onto each color (or auto-assign it). This is what the swatch will show. In Rubik Variant Images you can assign manually, or let AI match images to variants for a whole product at once.
Set the swatch type to image. In the swatch settings, choose image swatches for the option you want (usually Color). This tells the app to render the assigned photos as the swatch thumbnails.
Pick a shape and size. Circle, square, or rounded square are common for image swatches. Keep them large enough to see the texture but small enough to fit a row.
Save and preview on the storefront. Open a product page and confirm the swatches show the right photos and that clicking one updates the gallery.

That is the core flow. The part that trips people up is step 2: an image swatch is only as good as the image assigned to it, so a clean, consistent crop per variant makes the swatch row look professional instead of ragged.

“This app is perfect. it is incredibly easy to set up and use. There are so many cool ways you can set up your variant images AND adjust your swatches. The youtube tutorials are super helpful. I got a bit stuck trying to set up one of my products and Zulf was super quick to respond and help. Definitely recommend it if you are reading this ;D”
Anonymous merchant. Rubik Variant Images on the Shopify App Store

Showing image swatches on product cards

Image swatches are not only for the product page. You can also show them on product cards in collection and search grids, so a shopper previews the colors of a product while browsing and clicks a swatch to swap the card’s image before they even open the product. This is a strong conversion lever, because it moves the color choice earlier in the journey.

In Rubik Variant Images, product-card swatches are a toggle in the swatch settings (they are off by default, so you opt in). One note on scope: these card swatches show one product’s own variants. If each color is a separate product and you want a card swatch that switches between those products, that is combined listings, covered on the collection page swatch guide.

Tips for good image swatches

Crop consistently. Use the same zoom and framing for every swatch image so the row looks even.
Show the material, not a model. A tight crop of the fabric reads better at thumbnail size than a full model shot shrunk down.
Mix types where it helps. Image swatches for color, plain buttons for size. You do not have to force every option into an image.
Keep them a sensible size. Big enough to judge the color, small enough that eight of them still fit without wrapping awkwardly.

For the broader question of when an image swatch beats a color circle, our craftshift guide to swatches vs dropdowns has the conversion case. And see it live: the demo store, the setup video, or the getting started guide.

Try Rubik Variant Images free

Try Rubik Combined Listings free

Frequently asked questions

How do I add image swatches in Shopify?

Install a variant image app, assign a photo to each variant, then set the swatch type to image for that option. The app renders the assigned photos as clickable thumbnails in the variant picker. Native Shopify shows variants as text, so image swatches come from the app layer.

What is the difference between image swatches and color swatches?

An image swatch shows a photo thumbnail of the variant, so it can represent patterns and textures. A color swatch is a solid color circle from a hex value, which only fits plain solid colors. Image swatches need an image assigned to each variant; color swatches only need a color value.

Can I show image swatches on collection pages?

Yes. Product-card swatches let shoppers preview a product’s colors in collection and search grids and click to swap the card image. For one product’s own variants this is a toggle in the variant image app. If each color is a separate product, use combined listings for the collection-page swatch.

Do image swatches work on my theme?

With Rubik Variant Images, image swatches render on 350+ themes using isolated styling that does not clash with the theme’s CSS. Because the swatch display comes from the app rather than the theme, you are not limited to themes that happen to support swatches natively.

Can I use image swatches for color and buttons for size?

Yes, and it is a common setup. You can set the swatch type per option, so the color option shows image swatches while the size option shows plain buttons. Each option gets the display that suits it, on the same product page.

Image swatches are one of those changes that feel cosmetic and act structural. The moment a shopper can see the olive instead of reading the word “olive,” hesitation drops and the right variant gets picked more often. Assign clean images, set the swatch type, preview, ship.