Select product variants by clicking their images

New Member
5 0 0

Hello, 

A while ago I used this shopify guide  to Select product variants by clicking their images. it worked very good, recently I noticed it stopped working, I tried to copy the code like the guide says and still not working. I'm using the same theme. 

any idea why it doesn't working and more?

this is the code:

 <!-- make-image-change-variant start -->

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
(function($) { 
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue;
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
       }
    {% endfor %}
    $(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);
</script> 
{% endif %}

 <!-- make-image-change-variant end  -->
 

 

0 Likes
Highlighted
Shopify Partner
14 0 2

It worked for me to add the variant images, but making them "clickable" doesn't work. (Debut theme)

Custom sites and stores by Squareflair.com
0 Likes
Highlighted
Shopify Expert
650 0 98

Apparently it's not a good practise to change the cart selection when some one clicks on an image.

If a customer has selected the item they want (say green iphone case), they may not notice that the selection has automatically changed when clicking on images.

1 Like
Highlighted
New Member
1 0 1

Finaly is there a easy way to make "Select product variants by clicking their images"? Thanks!

 

1 Like
Highlighted
Tourist
4 0 1

Ricky,

I see your point, but it may work exactly the reverse way. For example., if i see the green image and I click 'add to cart', the customer may expect the green one to be added.  It seems it is an extra work to go back to the drop down to select the green again. Most of Amazon selection seems to work by clicking on the image only. 

Ideally, there should be two sets of images. One set for product details, another for variant selection. See an example here (no affiliation, just came across as an example) :

https://smile.amazon.com/Multi-function-Passport-Package-Document-Accessories/dp/B01LX3HAGG/ref=sr_1...

Not sure if any them provides this. 

0 Likes
Highlighted
Shopify Expert
650 0 98

The Amazon example above, uses color swatches (done as images). The actual image thumbnails are on the left side of the screen and they don't change your selection when you click.

Shopify also has the ability to add color swatches, done as images, buttons or as colored shapes and these do change your selection.

https://help.shopify.com/themes/customization/showcase-products/add-color-swatches

0 Likes
Highlighted
Tourist
4 0 1

Ricky,

Thank you for your quick reply. Also, thanks for pointing to the color swatch option. That may be applicable for those who are showing only one image for the product per color.

I have some basic images that provide some more info. about the product itself and then I have some colors to offer.

Take a look at this link. It also changes the main product images (on the left) when you click on the color option images. This would be an ideal situation for my requirement. I understand this requires lot of combinations of the images, but that is what makes it a good store. 

https://smile.amazon.com/Multi-function-Passport-Package-Document-Accessories/dp/B01LYQ56YH/ref=sr_1...

I tried little closely on this link, and it seems the color options are actually different products because as you click on each the page reloads. But it is a clever trick to offer (related) products as color swatches.

Really appreciate your input,

 

0 Likes
Highlighted
Shopify Expert
650 0 98

There would be ways of achieving this kind of effect in Shopify. Either using Ajax/JQuery to dynamically update the page layout or using multipe product pages, like you say. But it would most likely require some advanced custom development.

0 Likes
Highlighted
Tourist
4 0 1

I found half the solution here:

https://gist.github.com/carolineschnapp/d3c1af82b915e9cae82929e6486f22fe

What this does is when you click on the drop down selection, it updates to the relevant image (note: ALT tag needs to match on that image). So there is some good news.

However, this does not work reverse, meaning if someone clicks on the image itself, the new image will show up but the drop down won't change. 

I found this is possible here

https://help.shopify.com/themes/customization/products/select-variants-by-clicking-images

(see the animated gif how clicking updates the image and the drop down)

unfortunately, my theme does not have the same options (theme.js or theme.js.liquid is not tehre for me - not sure what is the alternative).

Note that none of these do the exact thing as we saw in Amazon's example, so yes, as you said there woudld be some additional coding required.

Kepe an eye and pl share if you find something :)

Best,

1 Like
Highlighted
New Member
2 0 0

Anyone found the solution? I am using the Debut theme but the solution available


@nir_blum wrote:

Hello, 

A while ago I used this shopify guide  to Select product variants by clicking their images. it worked very good, recently I noticed it stopped working, I tried to copy the code like the guide says and still not working. I'm using the same theme. 

any idea why it doesn't working and more?

this is the code:

 <!-- make-image-change-variant start -->

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
(function($) { 
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue;
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
       }
    {% endfor %}
    $(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);
</script> 
{% endif %}

 <!-- make-image-change-variant end  -->
 

 



in the https://shopify.dev/tutorials/customize-theme-select-variants-by-clicking-images doesn't work

0 Likes