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.
This tutorial is based on Shopify's article - Select variants by clicking their images
Click to view original Shopify article
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.
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):
Save the file:
From the Assets folder, open theme.js:
(older versions of Pipeline, open shop.js.liquid instead)
Paste the following code to the very bottom of the file (click the link the view code):
(It's a very large file, be sure to add the code to the very bottom of the file)
Save the file:
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.