Best way to show a different set of product images when a variant is selected?

9 0 1

I understand this is impossible with Shopify's built-in features which is absolutely insane to me because that seems like basic functionality. 


I have hired a developer to create a solution and they made my product page so that it only displays the images whose Alt Text contains the name of the Variant. 


Is this the standard / best method?



Reply 1 (1)

Shopify Expert
3565 301 1328

This is a very popular method, probably the oldest. Has drawbacks:

  1. if you use exact match against image alt (say "Red" option value equals "Red" alt text) this means you can't put  anything else into your alt text which is not best for SEO
  2. if  you use simple "contains" condition ( "Red" is contained in "Red leather glove" alt text) you may have false triggers -- say ("Red" is also contained in "Red and Black leather glove" which should probably belong to another variant). There are workarounds.
  3. Requires actually editing alt for your image, can be overridden by some SEO or image optimization apps.

You can also match against image filename -- it's more precise, leaves ALT for proper content but harder to manage (you'd need to properly name your images before uploading, which is a good thing by itself, but...). Say "classic-leather-gloves(red).jpeg" would be matched against "red" but not "red-black".


You can now use variant metafields to assign multiple images to each variant (I guess you can treat it as a semi-built-in method).


Finally, a method used by Variant Image Automator app (probably others as well):

the app basically treats unassigned images after the variant image as belonging to the same variant until it encounters another image assigned to a variant. Images before the first variant image you may treat as common.

"when you are choosing the image for the variants, all you have to do is ensure the variants and the images are in the right order, and any extra images are slotted after the main variant picture. That's it. Nothing more"


In my opinion, this approach is significantly easier to manage and leaves your image ALT for whatever you want to use there.


Actually sorting images to variants is just a part of the task and not the most complex one, so I believe your dev should be able to easily adopt a different method if you wish.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail