Products: Change variants by clicking on their thumbnail images

This customization allows your customers to click on product thumbnails to change your variant options. Example, clicking on the second thumbnail has changed both the size and color variants:

In order for that to work, all variant options in the product setup must have an image assigned. Each variant image must be unique for this solution to work. For this product we have 10 images each unique - One per size and one per color option:

All variants need to have an image associated to them. 

Animated example:

This tutorial is based on Shopify's article - Select variants by clicking their images 
Click to view original Shopify article

How to:

Before beginning - Create a duplicate of your theme. This is essential as we will be adding Javascript to your theme. If there's an error, your shop will not function correctly. A duplicate/backup is necessary when performing code modifications like this. 

After making a duplicate, rename the backup theme to easily identify it as a backup before this customization. If you're working on a draft theme, you can use the Actions menu for that theme in your list. 

1

Add code to product template

Choose Edit Code from your Theme Editor:

From the Templates folder, open product.liquid:

The default Pipeline code will look like this (one line of code):

Add a couple blank lines below the first line of code, then paste the following code after (click the link to view the code):

Click to view code

Example:

Save the file:

2

Add Javascript code

From the Assets folder, open theme.js:

(older versions of Pipeline, open shop.js.liquid instead)

Paste the following code from one of the following options to the very bottom of the file (click the link the view code):

Pipeline 4.6 and earlier - Click to view code

Pipeline 4.7 version - Click to view code

How to check your theme version

Example:

(It's a very large file, be sure to add the code to the very bottom of the file)

Save the file:

Notes

Each variant image must be unique for this solution to work. Do not apply until you've gone through all your products and made sure there are unique images assigned to all variants. That is the most important step in making this work. 

Older versions of Pipeline prior to Pipeline 4 will need to open assets/shop.js.liquid in Step 2. Add the same code to the very bottom of that file.