This article will show you how to add multiple variant images to product pages in the Launchpad Shopify theme. The code may need to be adjusted to suit the theme you are working on. 

The code assumes you are using the OptionSelector javascript in your theme as well as variant images.

Take a look at the demo to see how it should end up functioning:

To get started, I have loaded my variant images but now I want to associate additional images with each variant.  I only want to display the associated images as thumbnails when the variant option is changed on my product pages. 

For example: I only want the yellow chair image, and the yellow pillow image to show as thumbnails when "Option 2" is selected. 

I will be using alt tags to associate the additional images (alt tags don't need to be applied to the feature images). 

Apply the matching variant option title to each of the additional images:


We will begin our changes in the product.liquid file. Find the code for the image thumbnails, it should look like this:

{% for image in product.images %}

Above this line add:

{% assign featured_alt = product.selected_or_first_available_variant.option1 %}

Just after the for loop add an if statement (featured image should have already been defined above):

{% if image.alt == featured_alt or image == featured_image %}

This is how my code looks: 

We then need to add the script from the first file in this gist (the second file is the thumbnail code from the above screenshot). Add the code to to the bottom of the product.liquid template.

This is an example of what the switchImage function from the gist could look like:

var switchImage = function(newImageSrc, newImage, mainImageDomEl) {
  jQuery(mainImageDomEl).attr('src', newImageSrc);
  $(mainImageDomEl).parents('a').attr('href', newImageSrc);

Hopefully the images are now switching for each variant!