Why is my 'select thumbnail to choose variant' option not working?

Store Design
1

Hello all,

In my theme I have the option “select thumbnail to choose variant” using the code posted on shopify help. Until about 2 weeks ago this worked flawlessly. However on any new product or variant I create this setting no longer works. Each product I sell is unique so having this working is instrumental to my store.

Example of product where it works - selecting the thumbnail will choose the variant from the drop down menu.

https://rarediscgolf.com/products/axiom-vanish-neutron

Example of where it does not work - selecting the thumbnail does nothing.

https://rarediscgolf.com/products/axiom-hex-neutron

Thanks for your help.

2

Hi @RareDiscs ,

I have checked and see you have added the SelecVariantByClickingImage code in the theme.js file, everything is working properly.

The only reason why the images you added won’t work with this function is your handler function has this line:

const thumbnails = document.querySelectorAll('#'+ sectionId + ' img[src*="/products/"]');

It will take all the images that contain /products/ , then assign handlers to each of those images. However I see your images are formatted like this:

//cdn.shopify.com/s/files/1/0595/9339/2336/files/DSC_0051_150x150.jpg?v=1683938371

So that, it won’t get the images you add → Doesn’t work.

There are 2 solutions given here:

1, Change another image containing /products/ and that code will work

2, You can try this code, replace productJson.forEach in if (productJson.length > 0){ in function _selectVariant:

productJson.forEach((product) => {
        const sectionId = product.id.replace("ProductJson-", "shopify-section-");
        const thumbnails1 = document.querySelectorAll('#'+ sectionId + ' img[src*="/products/"]');
        const thumbnails2 = document.querySelectorAll('#'+ sectionId + ' img[src*="/files/"]');
        if (thumbnails1.length > 1) {
          const productObject = JSON.parse(product.innerHTML);
          const variantImages = this._createVariantImage(productObject);
          // need to check variants > 1
          if (productObject.variants.length > 1) {
            thumbnails1.forEach((thumbnail) => {
              thumbnail.addEventListener('click', (e) =>
                this._updateVariant(e, sectionId, productObject, variantImages),
              );
            });
          }
        }else if (thumbnails2.length > 1) {
          const productObject = JSON.parse(product.innerHTML);
          const variantImages = this._createVariantImage(productObject);
          // need to check variants > 1
          if (productObject.variants.length > 1) {
            thumbnails2.forEach((thumbnail) => {
              thumbnail.addEventListener('click', (e) =>
                this._updateVariant(e, sectionId, productObject, variantImages),
              );
            });
          }
        }
      });

Note: Make sure the number of brackets {} is still full. Since I don’t have access to your store to test this code, I’m not sure if it works well in your case. Do if it still doesn’t work, you can give me access to your store and I’ll help you.

Hope this suggestion can help you.

1 Like
3

Thank you so much for replying. Your code solution fixed it and saved me a ton of manual work!

I also discovered what changed on the Shopify back end. Previously my workflow was uploading images in bulk, then assigning them to the variants after all the images were uploaded. This used to work fine but one day it just stopped working for new listings.

Now if I went into the specific variant and uploaded the single variant image there instead of in the main uploading window, the ‘choose thumbnail to select variant’ function still worked. But it did not if I used the main uploader and assigned the image to the variant after.

But with the new code it works again! so I super appreciate it :slightly_smiling_face:

4

Hi there @RareDiscs , I’m trying to implement the same functionality. May I please ask which files you modified and where you placed the codes above?

Thanks @RareDiscs

5

I ended up changing to a new theme so I might not be much help anymore.

It was in the theme.js file on the old theme if I recall correctly