Shopping Cart
Log in | Create account

Manual Variant Image Switching

You have set everything up (thumbnail selector, data-image-id) but your images are still not switching?

Chances are your theme does things differently from the masses. But you can still get it to work.

Open your theme files  and look for your main javascript file (mostly theme.js or app.js in the assets folder) or sometimes the code we are looking for is also found in the product.liquid.

We are looking for the selectCallback function

 

Insert this snippet into the function(change .yourThumbnailSelector to the one you identified before)

  if(VIG.switchImages != undefined) { VIG.switchImages(selector.product.id,variant.id,'.yourThumbnailSelector'); }

For the devs: you can use the VIG.switchImages function from anywhere in your theme to trigger our image hiding functionality. This can be used for example with the quickview feature of some themes or on a collection page to use the VIP functionality on sites other than the product page.