How to make image change variant

How to make image change variant


The following tutorial is going to show how to make image change variant.

First of all, we would like the thank you for using our theme.

Apollotheme - a website where you can find the best shopify theme and Extensions as well. We are proud of our professional themes, extensions. With long-term experience working on Opensource, we have created a number of great extensions for Shopify like: Apollo Shopify Framework, Apollo Shopify Megamenu Module ...

Apollotheme is also famous for custom work, if you encounter trouble or need help with your website, coding, .... you can find us on Apollotheme.com then we will support you or give you suggestions.

Demo

How do?


To select product variants by clicking a variant image:

You can go to Admin -> Online store -> Themes -> ... -> HTML/CSS -> product.liquid

Copy & paste below code at the very end of product.liquid file, click Save

				
{% 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 %}
				
			

Recommendation


Hope this tutorial is helpful for you while developing your e-Commerce Shopify site. Access Forum or send us email through the Contact Form. We will try to solve your issues as soon as possible (within 2 days).