The selected color shows the wrong photo when the variant and the image are not linked by the same identifier. Fix it by giving every color its own SKU, naming each image file with that SKU, and mapping image URLs to variants in your product CSV. Then verify on a phone that selecting a color swaps the main image before you publish.
This guide is for independent retailers and small ecommerce teams running a Shopify store in the UK or US. It covers the specific job of tying one color, size or material option to one photo, not general packshot styling. The method below uses Shopify's product CSV import and export, which is documented in Shopify's CSV product guide.
Why does the wrong image appear when a color is selected?
A variant image is not chosen by the theme guessing from the color name. It is chosen because the image is attached to that variant in the product data. If the attachment is missing, Shopify falls back to the first image in the product's image list, which is often the default color.
Three common causes:
- The variant has no image assigned, so the theme shows the featured image.
- Two variants share one image URL, so both colors display the same photo.
- The image was uploaded after the variant was created, and the link was never made.
A useful diagnostic: open the product in your Shopify admin, select a color, and note which image is highlighted in the media list. If no image is highlighted, the variant has no image link. That is the fault to fix, not the theme.
What is the cleanest way to name variants and image files?
The reliable pattern is one SKU per sellable variant, and that SKU inside the image file name.
Example (hypothetical): a retailer sells a canvas tote in three colors. They use SKUs TOTE-NAVY, TOTE-SAND and TOTE-OLIVE. Image files are named tote-navy-front.jpg, tote-sand-front.jpg and tote-olive-front.jpg. When the CSV is built, the navy image URL sits on the navy variant row. The naming is boring, and that is the point: it is checkable by eye and by spreadsheet filter.
Rules that prevent most mix-ups:
- Keep SKUs short, uppercase and free of spaces.
- Use lowercase file names with hyphens, no accents.
- Put the color token in the same position in every file name.
- Never reuse a SKU across products.
If you already have messy SKUs, do not rename everything at once. Add a temporary column in your spreadsheet that maps old SKU to new SKU, and rename only the products you are fixing this week.
How do you map images to variants in a Shopify CSV?
Shopify's product CSV includes image URL columns, and variant rows carry the variant details. The image must be at a publicly accessible HTTPS URL with no password protection. Shopify downloads the image during import and re-uploads it to your store, as described in the official CSV import documentation.
A practical worksheet, in order:
- Export your current products to CSV so you have the real column headers in front of you.
- In a copy of that file, filter to the product you are fixing.
- For each variant row, paste the matching image URL into the image URL column.
- Check that no two color variants share the same URL unless they genuinely share a photo.
- Import the file and open the product in the admin.
- Select each color and confirm the main image changes.
The verification step matters more than the import. A CSV can import without errors and still leave a variant unlinked if the URL was blank or the row was misaligned.
If you are not using CSV at all, the same logic applies in the admin: open the variant, edit it, and attach the image there. The CSV route is faster once you have more than a handful of colors.
What should the alt text say for each variant photo?
Alt text describes the image for people who cannot see it and for search engines. It should name the product and the color shown, not repeat the page title.
Weak: product image
Useful: Navy canvas tote bag, front view
Keep it under about 125 characters, avoid keyword lists, and do not claim a material or feature the photo does not show. If the same tote is shown in sand, the alt text should say sand. This is also a fast way to spot a mapping error: if the navy variant shows an image whose alt text says sand, the link is wrong.
How do you check the color swap on a phone?
Most shoppers in the UK and US browse on a phone, and mobile themes sometimes hide the thumbnail strip. Test the actual experience:
- Open the product page on a real phone, not just a desktop browser resized.
- Tap each color swatch.
- Confirm the main image changes within a second or two.
- Confirm the image is not cropped so tightly that the color is unclear.
- Add the item to the cart and check the cart thumbnail matches the chosen color.
If the cart shows the wrong color, the variant-to-image link is still broken even if the product page looked correct. The cart is the honest test.
What mistakes cause the most variant image errors?
- Uploading a new photo and forgetting to attach it to the variant.
- Using the same image URL for two colors because the photos look similar.
- Importing a CSV where the image URL column is blank for some variant rows.
- Naming files with spaces or accents, which can break URLs.
- Assuming the theme will match a color name to a file name automatically.
- Checking only on desktop, where the thumbnail layout hides the problem.
A short pre-publish checklist: every variant has a SKU; every SKU has a matching image file name; every variant row has an image URL; every color swaps correctly on a phone; every alt text names the color shown.
How does this fit with the rest of the product page?
Variant images are one part of a product page that answers questions before purchase. The same principle of answering the shopper's next question applies to pickup and delivery details, covered in Click and Collect: A Product Page That Answers Key Questions. If you are weighing whether a paid diagnostic or tool is worth it for a small store, France's Osez l'IA Plan: Is the Diagnostic Right for Your Small Business? is a useful reality check, though the funding context is French.
Follow-up questions
Do I need a separate image for every size as well as every color?
Only if the size changes what the shopper sees. A t-shirt in the same color usually looks the same in small and large, so one image per color is enough. Shoes, fitted garments and made-to-measure items often need a size-specific photo or a measurement diagram.
Can I fix variant images without touching a CSV?
Yes. In the Shopify admin, open the product, edit the variant, and attach the image to that variant. It is slower for many colors, but it is the safer route if you are not comfortable editing spreadsheets. Verify on a phone afterwards either way.
