If your Shopify store has the Venture theme active, which is a very common theme for Shopify, the product page image area consists of an image thumbnails slider that appears on the left of the desktop and a large product image. When clicking a thumbnail image, the large image changes, but nothing happens to the price and on the variants select box. That’s not very useful when you are using this feature to let the customer look through the variants and products…

So how do you fix this? I’ll tell ya!

What we are going for is a situation where... if you click a thumbnail image that is set as a variant image on the product’s administration page, then when the corresponding large image appears, all of the other information about this specific variant will be displayed. We also want to code it so that the Add to cart button will be set so that if you click it, the variant which is displayed will be added to cart, as opposed to the last one that was selected from the variants select box as it normally happens in the theme.

To solve this, there is some code that needs to be added in the theme.js file in this function:

_productThumbSwitch: function() { 

Here, on a thumbnail click, you need to check if this image is set to a variant, and if this is true, you should change the value of the variants select box to the corresponding one.

It is very important that the code is added in the productThumbSwitch function, because if you think about adding it at the end of the theme.js file to be called on document ready or window load, it might not work every time because you might get some timing issues.

That’s it! A few lines of code, and they give your website a whole new level of dynamic functionality that you didn’t have before. Sometimes the simplest changes can amount to the most useful outcomes. Don’t let anything stand in the way between a shopping customer and a purchase, not even a thumbnail picker. For more tips like this, check out our Shopify blog.