Customer selects the olive green version of the Alameda Jacket in the size 32×30. However, the charcoal version is displayed in the product gallery. Customer hovers over the variant images, checks the thumbnail images in the bottom navigation bar, wonders if she even clicked on the right color option. Customer abandoned the transaction before completing checkout. This is an easy to fix variant image issue that comes in three different flavors.
By default, Shopify gives every variant of your product 1 featured image. In reality, most products need more than a single photo per color – front, back, details, lifestyle shots. In this guide we’ll run through every solution we’ve used in real life to fix this problem.
In this post
- Why Shopify only shows one image per variant
- Method 1: Native featured image (one photo only)
- Method 2: The alt text hack (free, hacky)
- Method 3: Variant image app (multiple photos per color)
- Comparison table
- Troubleshooting
- Frequently asked questions
- Related reading
Why Shopify only shows one image per variant
Shopify’s product data model associates each variant with a featured image which is used in the cart, search results and as the primary image on the product page. All other images in the gallery are displayed in full, and are not filtered by variant. So if you have a red and blue variant, when you select the red option, the main image will change to the red photo, but you will still be able to scroll through all of the blue images as well.
This was a good default for stores with relatively few product images when we launched on these platforms in 2016. Today, most product pages have 8-15 images per color (and growing) which need to filter when a customer changes a variant. We have a tool and API to help you determine if your current setup is doing this correctly.
Method 1: Native featured image (one photo only)
- Open the product in your Shopify admin.
- Scroll to Variants and click a variant row.
- Click the image placeholder and pick the photo you want as that variant’s featured image.
- Repeat for each variant. Save.
This is the free default. It will work if you only want one photo per color and you do not mind the rest of the gallery staying unfiltered. For a jewelry shop with clean shots, maybe that is enough. For apparel with five angles per color, it is not.
Method 2: The alt text hack (free, hacky)
variant name in image alt text and a small amount of Liquid to have looms display only images that match are well known tricks that work and are very fragile.
- Name each image alt text with the exact variant value, such as #Red, #Olive, #Navy.
- Edit product-media.liquid (or equivalent) and add a data attribute with the alt slug.
- Add a JS listener on the variant picker that hides non-matching media on change.
- Handle the default state so all images show before any variant is picked.
The downsides of providing alt text for your store images can be delayed a while longer. Alt text is for accessibility and SEO, not for putting taglines in beautiful script or putting “outfit:” before buttons. Alt text gets overwritten by theme updates. Page builders like Elementor can also break the selector for alt text. And then you hit a roadblock because soon enough you need to filter by more than one attribute at a time (e.g. color and material). This method for uploading multiple variant images using a CSV file is a good workaround for that.
Method 3: Variant image app (multiple photos per color)
You can have a variant image app that deals with the whole process, where you upload multiple images to a single variant, the gallery can automatically be filtered out for the customer when they select a swatch option, and theme files won’t break it. We provide a separate app, Rubik Variant Images, that our customers on demo stores use.
- Install Rubik Variant Images from the App Store.
- Open a product in the app. You will see the Shopify gallery with a swatch row below it.
- Click a variant and click the images that belong to it. That is the whole assignment step.
- Or click AI auto-assign and Claude will read the product name, variant name, image filename, and alt text to match images automatically.
- For hundreds of products, use bulk assign. It groups images by gallery order using featured image boundaries (no filename matching, no AI) and runs in the background.
- Preview on the live product page. Click a swatch and watch the gallery filter to only matching images.
If you sell one colour as a separate product (something that many apparel brands do for SEO) you’ll also want Rubik Combined Listings. This will allow you to display a swatch row of all the colours on the collection page, under each individual product card, with each colour having its own URL.
Comparison table
| Method | Photos per color | Setup time | Theme-safe | Cost |
|---|---|---|---|---|
| Native featured | 1 | 2 min | Yes | Free |
| Alt text hack | Many | 3-6 hrs | No | Free |
| Variant image app | Many | 10 min | Yes | Free to $75 |
Troubleshooting
Swatch clicks but the gallery does not filter? The theme is set to swapping main image only. Swatch clicks not registering when theme is set to swapping main image only? Make sure app embed is enabled. Mobile variant specific issues not matching desktop variant specific issues? Custom variant picker maybe taking the click instead of the swatch? For a brief moment you see the default image instead of the correct variant? Try the flash of default image fix to preload the images. For mobile specific issues see mobile variant images fix.
a title=”Calculate product catalog images before redesigning” rel=”bookmark”>Run the variant image calculator on your product catalog first to get an idea of how many images your current size of products really needs. Most merchants drastically under prepare for the # of images their products will actually need and end up hitting the 250 image per product cap at the worst possible time.
Video walkthrough
Try it on your store
Live demo here: http://rubikdemo.com/ – just click on a product to browse the swatches, and see the filter in action. All docs for Rubik Variants are here: http://rubikvariant.com/docs – and the video above shows how to set up from install to fully filtering gallery.
Frequently asked questions
Can Shopify show multiple images per color without an app?
Not cleanly. Currently on Shopify you can only have 1 featured image per variant, until recently you could do multiple featured images per product with an alt text hack and theme modification but it gets overwritten every shop update, apps handle this feature correctly.
How many images can a product have?
Shopify now allows up to 250 images per product. When combined with the 2048 variants per product (up from 100 in 2024) and 3 different option types, this is usually enough for any apparel store catalog.
Does the alt text trick hurt SEO?
Yes. Alt text should be meaningful to screen readers but NOT include terms like variant: filter tags don’t belong in alt text and can pollute your accessibility layer and ruin your image search indexing.
Do I need Shopify Plus for this?
False Every Shopify plan supports variant images, multiple images per product, and third-party apps like Rubik Variant Images.
Will Rubik Variant Images slow down my store?
This app does not actually need an external API, as it loads the variant image data from product metafields. Therefore it loads with the page.
Can I assign images to size as well as color?
Yes. You can load images for any option including options that have a combination of color and size or color and style.
What about separate products per color?
If you’ve got different colours as separate Shopify products (for better SEO), use Rubik Combined Listings to display colour options as swatches on the collection and product pages, and also enable gallery filtering with Rubik Variant Images.
