- Use the alt text to associate the additional images - besides the variant image - to the option value. Example: say you have 3 images that show the Blue variants, then a) associate the first image as variant image to all Blue variants, and b) set the alt text of the 2 additional images to 'Blue'.
- Copy+paste the code found in the product.liquid snippet below at the bottom of your product.liquid template.
Only the images associated to the currently selected variant are shown. Other images are hidden.
- On page load, only the images associated to the selected variant will be shown.
- When a new variant is selected, only the images associated to that new variant will be shown.
- The wrapper of the image, if one is used, is hidden, so there will be no left-over border shown on the page when an image is hidden.
jQuery 1.7 or later.
Caroline- I'm trying to work out how this code could be modified to accommodate more than one Shopify option selector, for example: [Format] and [Size], or even [Format] [Size] [Color]. I took a few tries at it, but I need a little more work on my JQuery skills... my alternative is to flatten my options to one selector containing all variants, but this is not an ideal user experience.
Thank you in advance for any advice you have time to supply. From what I've come across online, you have already been very generous with your assistance to the Shopify community!