Make Image Change javascript (for theme.js file)

make-image-change-javascript.js

$(document).ready(function() {
  thumbnails = $('img[src*="/products/"]').not(':first');
  if (thumbnails.length) {
    thumbnails.bind('click', function() {
      var arrImage = $(this).attr('src').split('?')[0].split('.');
      var strExtention = arrImage.pop();
      var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
      var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
      if (typeof variantImages[strNewImage] !== 'undefined') {
          productOptions.forEach(function (value, i) {
           optionValue = variantImages[strNewImage]['option-'+i];
           if (optionValue !== null && $('.single-option-selector:eq('+i+') option').filter(function() { return $(this).text() === optionValue }).length) {
             $('.single-option-selector:eq('+i+')').val(optionValue).trigger('change');
           }
        });
      }
    });
  }
});

hi , I am a newbie at coding ,I came from this guide https://help.shopify.com/en/themes/customization/products/variants/select-variants-by-clicking-images?utm_source=gurucopy&utm_medium=link&utm_campaign=Gurus
the main problem is that clicking on variant image does not choose the variant itself and the image just appears with the last variant chosen manually ... although it may work well sometimes for no reason !
When I followed the guide for solving the problem ,nothing changed !

I am using shopify theme called shoptimized .in coding ,there is no file named theme.js or theme.js.liquid . And so,I created theme.js file in assets section ,and copied the code in it ,I tried the code in this post and in jonathanmoore comment .nothing new happened !

a link to my store product to check how the variant and images work : https://stressreliefworld.com/collections/best-selling-stress-relievers/products/cute-anti-stress-animal-toy-squeeze-cat-and-panda-for-stress-relief?variant=14290380456054

thank you guys for reading ! waiting for answers :)

NEW UPDATE : (( the function works well in a certain case only ))
I have two types of variants :shape and color
hint: the function meant here is choosing the variant from its image.

the function works when >> I choose shape A with the white color variant ... then choose an image of shape B with WHITE color which has THE SAME COLOR OF THE LAST CHOSEN VARIANT ..
-after that,if I choose shape C with white color also >> the function still works ....
-but if I choose Shape D next with ANOTHER COLOR (black color for example) >> THE VARIANT WON'T BE CHOSEN and here comes the bug/error.
-Another hint: if the next image chosen after (shape D black color) was of the same last shape (shape D) but with another color (Color Red) >> the function works and the variant is chosen automatically

Hey @marcomagdy9 I am also using Shoptimized theme. I just read through this tread and implemented on my store.

I went to search and I have timber.js.liquid. So I pasted the code at the bottom of the page and it worked perfectly for me!

I have a question: How can you get this to work for mobile? We use the Retina theme (from OutOfTheSandbox), and this works just fine on desktop, but on mobile it refuses to work. My boss is adamant that it needs to work on BOTH desktop and mobile, but I can't seem to get it working on mobile. Any suggestions?

Hi my some products worked and change variant on clicking thumbnail image but some still doesn't change variant when I click on images and they also give me jquery error maximum stack exceed. when I go to shopify -> products and check they all are same and each variants have theirs own images.

I just figure out that some product images upload by url would not work you have to upload images manually when adding new product some time we use csv and add image url make sure we add images manually in shopify if we want this feature to work.

Hi I have this issue everything working fine but I can not solve this error anybody know what's the issue Maximum call stack size exceeded in jquery

I have a question: How can you get this to work for mobile? We use the Retina theme (from OutOfTheSandbox), and this works just fine on desktop, but on mobile it refuses to work. My boss is adamant that it needs to work on BOTH desktop and mobile, but I can't seem to get it working on mobile. Any suggestions?

I'm having the same issue with the Parallax theme from OutOfTheSandbox. Works fine on desktop, breaks on mobile. Any fixes available?

Hi, This works perfectly for the product page. But in my quick view (quick shop) pop up, this doesn't work. I would appreciate a ton if someone genius can solve the issue. Please.

Hi there,
I'm using Masonry theme and have tried all the above given options, however, its not working. Can someone please help. Thanks

I am using the latest Debut theme (16.5.1) and I cannot get this to fire correctly. When the thumb image is selected the dropdown changes correctly but when I choose to add to cart the first variant is added not the selected color. If I use the dropdown to select a color (default theme behavior) it works fine, just not when the thumbnail image is selected. I have no other modifications to the theme code.
Any help would be much appreciated!

Not sure if this has been updated/solved for mobile issues in the repo, but what I discovered a year ago and forgot to post back here is that when I used chrome on my pixel 3 to select a thumbnail, it did not fire a click event, but a touch event. So I bound the event handler for each element not just to the click event, but also to the touch events and that fixed my issue.

The current code worked well for me in the native language of my Shopify, which is english, but did not work when switching to another language, e.g. french.

I could make it work by replacing "return $(this).text()" with "return $(this).val()" in the code.

The .text() is different from language to language, but .val() is invariant.

I use the Pop theme.

was there an answer for brzy? " -- I am using the latest Debut theme (16.5.1) and I cannot get this to fire correctly. When the thumb image is selected the dropdown changes correctly but when I choose to add to cart the first variant is added not the selected color. If I use the dropdown to select a color (default theme behavior) it works fine, just not when the thumbnail image is selected. I have no other modifications to the theme code.
Any help would be much appreciated!"
I had it working until I downloaded the new Debut theme. Help please! thank you!

impossible pour moi, j'ai beau suivre toute la procédure cela ne fonctionne pas! J'utilise également le théme Début

Since Debut is now shipping without JQuery, we are now utilizing a vanilla js model. Here is one that works for newer Debut themes.

https://gist.github.com/drabbytux/7f3f2c57c01fcd4baba98668c9473adc

I have implemented 2-way binding however the variant names do not switch to the correct name. Also is there a way to bind multiple photos?