make image change variant sections

make-image-change-variant-sections

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue,
    productOptions = [];
    {% 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 %}
       }
       productOptions.push(variant);
    {% endfor %}
</script> 
{% endif %}

Hi

I use the debut theme and input your code. thank you, but i have one issue: in the drop down menu, the "Pick a Color" became "Pick a undefined" after i added your code. Do you know why?

thanks!

I have the same problem - has there been an answer given for this? Also, I'm using Venture theme, not Debut

Hi, I was wondering if this could be used in the same way if adding to a Lightspeed eComm theme or if any adjustment need to be made. Thanks!

Hello! I have the Flex theme (by Out of The Sandbox) in the Shopify store and use Scrolling as the product page template.

When I click on a product variant on the product page, SKU changes but the picture of the product remains the same (each variant has a different photo assigned).

Do you think this code will be suitable for solving this problem?

Thank you for any advice!