Product variant in drop down not updating for all images

[JanetGGA]

I’ve just noticed that for recently added product variants, the drop down picker is not autoupdating to reflect the photo that is selected. It is working fine for variants that I have previously added, but more recent variants are not updating resulting in the wrong item being ordered. The reverse seems to be working, ie if the client selects a variant from the drop down, the corresponding photo is displayed. But my clients select their variant based on the photo.

Can someone advise?

[Dan-From-Ryviu]

Hi @JanetGGA

Please go to your Online store > Themes > Customize > Products > select your product template > Product information, unselect “Hide other variants’ media after selecting a variant”, click Save your template and check again

[JanetGGA]

Hi Dan,

Thanks for this…unfortunately, my admin doesn’t give me the options you show. Assuming it’s related to my theme. But thank you anyway,

[Dan-From-Ryviu]

What theme are you using? Could you share your store URL?

[JanetGGA]

Debut 17.4.0

https://greengablealpacas.com/collections/yarn/products/dory-sock-yarn?variant=43076504355041 - Choose the colour, “truffles” from the colour drop down - and you get the correct picture. But trying to select this from the pictures… the url of the variant doesn’t change

[Dan-From-Ryviu]

Please try to update the image of that variant and check again because I can see the different image URLs of the image that changed the variant and the issue one.

Working one

Not work one

[JanetGGA]

I’ve tried adding new photos, even creating new products and then adding variants to the new products and the drop down no longer changes with the changing of the new variant pictures. It has been working correctly for 3+ years. It’s only recently when adding new variants that it is no longer working

[JanetGGA]

I will add that I tried changing the picture of the new variant to an existing product variant, and it worked…

[Sturm_und_Bram]

Shopify has changed the place where your uploaded product images will be stored. Some old JavaScripts will have hardcoded paths in order to select the product thumbnail which will in turn update the drop-down menu. You might find something in your code:

$(function() {
      thumbnails = $('img[src*="/products/"]').not(':first');
      if (thumbnails.size()) {
        thumbnails.bind('click', function() {
          var image = $(this).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
          if (typeof variantImages[image] !== 'undefined') {
            {% for option in product.options %}
            optionValue = variantImages[image]['option-{{ forloop.index0 }}'];
            if (optionValue !== null && $('.single-option-selector:eq({{ forloop.index0 }}) option').filter(function() { return $(this).text() === optionValue }).length) {
              $('.single-option-selector:eq({{ forloop.index0 }})').val(optionValue).trigger('change');
            }
            {% endfor %}
          }
        });
      }
    });
})(jQuery);

The /products/ path does no longer exist, so you will have to adapt it to the new path (‘/shop/’):

$(function() {
      thumbnails = $('img[src*="/shop/"]').not(':first');
      if (thumbnails.size()) {
        thumbnails.bind('click', function() {
          var image = $(this).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
          if (typeof variantImages[image] !== 'undefined') {
            {% for option in product.options %}
            optionValue = variantImages[image]['option-{{ forloop.index0 }}'];
            if (optionValue !== null && $('.single-option-selector:eq({{ forloop.index0 }}) option').filter(function() { return $(this).text() === optionValue }).length) {
              $('.single-option-selector:eq({{ forloop.index0 }})').val(optionValue).trigger('change');
            }
            {% endfor %}
          }
        });
      }
    });
})(jQuery);

[Zakami]

Hello!

This could be to be the solution to my problem, however I cannot seem to find where to find the code you are talking about to check if its wrong or not. Would you be able to instruct me on where to go on my code to look for this?

Thanks!

[Sturm_und_Bram]

You have to go to you Template / Theme Editor (Online Store → Themes). Click the three dots beside the “Customize” button, and select the Edit Code item.

Then search for product.liquid and/or product.textfeld.liquid then you should find the code above, and correct it. This was for my template th case, maybe yours is a bit different.