Hide additional product images when one colour option is selected on Shopify product page

0
votes

I'm trying to display only the images of the colour variant I have selected on the product page. They're currently being pulled in by their Img Alt text, which is in the product list CSV. I would to hide the thumbnails of the other colours when they're not selected, and switch to them when they are, including replacing the larger featured image.

Any help would be greatly appreciated. Thank you.

product-template.liquid https://pastebin.com/AyaDpNG4

theme.js https://pastebin.com/KBniw7J8

Blue selected

Red selected

Link to Product page

https://4158qu33fstl4w69-53119090861.shopifypreview.com/products/lightweight-trainers

Link to CSV

https://docs.google.com/spreadsheets/d/1lc8XcHDMyMFGAkegTRrBLLTlQN8oNVbU430vT0aeP4Y/edit?usp=sharing

2
shopifyhideproductliquiddisplay

2 Answers

1
votes

From a data standpoint, there is unfortunately no way to do this in vanilla shopify (without an app or using metafields to set up variant images).

The reason for this is that variants only allow one featured image in the data structure. For this reason, you'll likely need to go the app route.

An alternate "hacky" approach would be to add slugs to the end of your image names ('-maroon', '-black', '-all') and then use javascript to match up the images to the currently active variant. This would always be a bit risky and require work when uploading images, though.

1
votes

Here are some APP, but most of the APPS over Shopify has paid.

  1. Variant Image Wizard

  2. Variant Image Automator