How to show different images for each color variant on Shopify

April 10, 2026
Variant Images
11 min read
a product page with image gallery changing as different color options are selected

Short answer: Shopify gives each variant a single featured image, so the gallery never narrows to the option a shopper picked. Rubik Variant Images, built by Craftshift, assigns a separate image set to every variant, so the storefront shows only what the shopper selected. Free to install, 5.0 stars across 420 reviews.

Showing different images for each color variant in Shopify is one of the most requested features that doesn’t work the way merchants expect out of the box. You upload 30 product photos (6 per color, 5 colors), assign them in the admin, and then visit your store to find every single photo displayed at once regardless of which color the customer picks. That’s not a bug. That’s how Shopify works.

This is one of the most common product page problems on Shopify. A store selling a handbag in 8 colors with 4 photos each ends up with 32 images in the gallery, all visible at all times. Customers add the wrong color to cart because the first image doesn’t match their selection. The theme isn’t broken. Shopify simply doesn’t filter product images by variant natively.

Shopify’s product data model only supports one assigned image per variant. One. Not a gallery, not a filtered view. Just a single thumbnail reference. Everything else stays in the shared product gallery. This post explains why that happens, the two methods to fix it, and which approach fits which type of store.

In this post

Why images don’t filter by variant

At the API level, a Shopify product has two data structures: a flat list of product images (up to 250) and a set of variants where each variant holds a single image_id reference. That’s it. There’s no “image group” or “gallery per variant” concept in Shopify’s data model.

When a customer selects “Red” on your product page, the theme JavaScript finds the variant’s assigned image and scrolls or switches the gallery to show it. But the gallery itself doesn’t change. All 30 images remain visible. The theme just highlights the one assigned image. Some themes handle this slightly better than others (Prestige, for example, moves the assigned image to position one), but none of them hide the other images natively.

This confuses basically every merchant who sets up variant images for the first time. And honestly? It should be better by now. Shopify has had years to add gallery-per-variant support and hasn’t. Why? I genuinely don’t know.

The native Shopify method (and its limits)

The built-in approach works like this:

  1. Upload all product images to the product gallery
  2. Open each variant in the admin
  3. Assign one image to each variant using the image selector
  4. Save

When a customer picks a color, the theme switches to that variant’s assigned image. That’s the whole feature. One image switch. For stores selling simple products (a mug in 4 colors, each with one photo), this is fine. For anything with multiple angles per color, it falls short.

The how Shopify variant images really work post explains the full data model if you want the technical details. The short version: Shopify was designed for simple products, and variant images never got updated for the reality of modern product photography.

The app method: gallery filtering

Variant image apps solve this by storing additional image-to-variant mapping data (typically in metafields) and injecting JavaScript that filters the product gallery when a variant is selected. Select “Blue” and the gallery shows only blue photos. Select “Red” and it swaps to red photos. The unselected images are hidden, not just deprioritized.

This is what most merchants actually want when they say “show different images for each color.” Not “scroll to the right image,” but “hide everything that doesn’t match.”

The setup process varies by app, but generally you assign multiple images to each variant option value (not just one), and the app handles the filtering on the storefront. Some apps use drag-and-drop assignment, some use filename matching, and some use AI to detect which images go with which variant. Rubik Variant Images, for instance, uses metafield-based loading with no external API calls, so the filtering happens without extra network requests on the storefront.

Before choosing an app, check whether it supports your theme. Not all apps work with all themes, and the variant image app comparison covers compatibility across the major options.

The image order trick

Some merchants use a manual image ordering trick that sort of works with certain themes. You arrange images in the product gallery so all Red images are first, then all Blue images, then Green, and so on. The variant’s assigned image marks the start of each color group. Some themes (and some apps) use this ordering to determine which images belong to which variant.

It’s clunky. It breaks if you reorder images. It doesn’t scale past a few variants. But for a store with 3 colors and 4 images each, it can work as a free-ish solution before investing in an app.

Use our Product Image Audit tool to check how your current product images are structured before attempting this method.

Multi-option products (color + size)

The complexity jumps when you have products with multiple options. A shirt in 5 colors and 4 sizes creates 20 variants. Do you want different images per color? Per color-size combination? Per size?

Almost always, the answer is: different images per color, same images across sizes within that color. A Red / Small shirt looks identical to a Red / Large shirt in photos. So you want 5 sets of images (one per color), not 20 sets.

The app approach handles this well because you assign images to the option value (“Red”) rather than to each individual variant (“Red / Small”, “Red / Medium”, etc). This means one assignment covers all size variants for that color. The variant images complete guide walks through multi-option setup in detail.

If your products have genuinely different photos per size (fashion stores where small and large fit differently on models), that’s a different situation entirely. You’d need image assignments per variant combination, which only a few apps support properly.

The separate products approach

There’s a third path that avoids the gallery filtering problem entirely: create separate products for each color and link them together. “Blue Leather Jacket” and “Red Leather Jacket” are separate products, each with their own image gallery. Swatches on the product page (and collection page) let customers switch between them.

This approach has genuine advantages. Each color gets its own URL for SEO. Each product page has a clean, focused gallery. No filtering needed because there’s nothing to filter. The trade-off is catalog management, you’re maintaining 8 products instead of 1.

Combined Listings apps handle this grouping and swatch display. On the collection page, customers see one card per product group with color swatches. On the product page, swatches link to the other color products in the group. It’s a different architecture than variant image filtering, and for stores with many colors and heavy photography, it’s often the better choice.

The click-to-select variant by image guide covers the UX side of both approaches.

Common mistakes to avoid

After seeing hundreds of stores struggle with variant images, these are the mistakes that come up over and over:

Uploading images without a naming system. If your images are named IMG_4521.jpg, IMG_4522.jpg, IMG_4523.jpg, you (and any app you use) will have a hard time matching them to variants. Name them product-color-angle.jpg. Blue-jacket-front.jpg. It takes 10 minutes and saves hours later.

Assigning images to variants in the wrong direction. In the Shopify admin, you assign one image TO a variant, not one variant TO an image. If you have 6 blue images, you pick the “best” one and assign it to the Blue variant. The other 5 blue images remain unassigned in the general gallery. This is what confuses people.

Ignoring image alt text. Alt text isn’t just for accessibility (though that matters). Apps that use AI-based image assignment read alt text to match images to variants. If your alt text says “product photo” instead of “blue leather jacket front view,” the AI can’t help you. Our product image SEO guide covers proper alt text formatting.

Not testing on mobile. Gallery behavior differs between desktop and mobile on most themes. An image carousel on desktop might become a vertical scroll on mobile. Test both after setting up variant images, because what looks right on your laptop might be a mess on a phone.

FAQ

Which Shopify app should I use for show different images each color variant?

Rubik Variant Images, built by Craftshift, is the app we build for this. It holds 5.0 stars across 420 reviews and carries the Built for Shopify badge. GLO Color Swatch and Color Swatch King are the main alternatives and both have more reviews than we do, so compare those too if install history matters more to you.

Can I show different images for each color in Shopify without an app?

Partially. You can assign one image per variant natively, and some themes will scroll to that image when the variant is selected. But you can’t filter the gallery to show only that color’s images without an app or custom code. The full gallery remains visible.

How many images can I assign to a single variant?

Natively, one. Shopify’s variant data model supports a single image_id per variant. To assign multiple images to a variant, you need an app that stores the additional assignments in metafields or external data.

Do variant image apps slow down my store?

It depends on the app. Apps that load image assignment data from metafields (stored directly on the product) add minimal overhead because the data loads with the page itself. Apps that make external API calls on every page load can add noticeable delay. Check how the app loads data before installing.

Should I use separate products instead of variant images?

If each color has its own photography set and you want SEO benefits (separate URLs per color), separate products linked with Combined Listings is often the better approach. If your product has minimal visual differences between variants (sizes only), variant images on a single product work fine.

Does this work with videos and 3D models too?

Some variant image apps support videos and 3D models in addition to images. Shopify’s native variant assignment is image-only. If you need per-variant video filtering, check that the app explicitly supports media types beyond images.

What happens if I have more than 250 images for one product?

You hit Shopify’s hard limit. A product can’t hold more than 250 images, regardless of how many variants it has. For products that need more images, split into separate products (one per color) and group them. Each product gets its own 250-image allocation.

Getting the gallery to follow the colour

Everything above is the manual route, and it works. The part Shopify does not give you is the filter: assign all 30 photos and the gallery still shows all 30 whichever colour is selected. Rubik Variant Images shows only the images that belong to the selected colour, stored in product metafields with no external API calls, on 350+ themes.

It is free for one product, which is usually enough to see whether the difference matters on your own catalogue.

Try Rubik Variant Images free

Co-Founder at Craftshift

You may also like