Product variant in drop down not updating for all images

Product variant in drop down not updating for all images

JanetGGA
New Member
6 0 0

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?

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
8534 1683 1692

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 Screenshot 2024-01-15 at 14.19.13.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

JanetGGA
New Member
6 0 0

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, Screenshot 2024-01-15 at 8.20.49 AM.png

 

Dan-From-Ryviu
Shopify Partner
8534 1683 1692

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

JanetGGA
New Member
6 0 0

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
Shopify Partner
8534 1683 1692

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

Screenshot_4.jpg

Not work one

Screenshot_3.jpg

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

JanetGGA
New Member
6 0 0

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
New Member
6 0 0

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

Sturm_und_Bräm
Shopify Partner
6 0 2

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);