Why isn't the product image updating when the variant changes?

Technical Q&A
1

Hello,

This is our store : https://www.paisleygraceboutique.com/

In this store’s product page, we are displaying variant options as swatches. Everything working fine, like when we change the options url also updating with selected option variant id. But, product image is not updating even everything is properly setup.

Here is some related code :

product-template-custom.liquid :

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

{%- for media in product.media -%}
              {% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
            {%- endfor -%}
        ...
       ....
{%- endfor -%}

// Script 
$('.single-option-selector').on('change',function() {
           var selectedValues = $.map(
               $('.single-option-selector'),
               function(element) {
                   var $element = $(element);
                   var type = $element.attr('type');
                   var currentOption = {};

                   if (type === 'radio' || type === 'checkbox') {
                       if ($element[0].checked) {
                           currentOption.value = $element.val();
                           currentOption.index = $element.data('index');

                           return currentOption;
                       } else {
                           return false;
                       }
                   } else {
                       currentOption.value = $element.val();
                       currentOption.index = $element.data('index');

                       return currentOption;
                   }
               }
           );
           var product = JSON.parse(
               document.getElementById('ProductJson-{{ section.id }}').innerHTML
           );
           var variant = product.variants.filter(function(v) {
               var condition = selectedValues.every(function(values) {
                   return v[values.index] == values.value;
               });
               return condition;
           });
           if (variant != null && variant.length == 1) {
               $('#ProductSelect-{{ section.id }}').val(variant[0].id);
               if (!history.replaceState || !variant) {
                 return;
               }

              var newurl =
                window.location.protocol +
                '//' +
                window.location.host +
                window.location.pathname +
                '?variant=' +
                variant[0].id;
                window.history.replaceState({ path: newurl }, '', newurl);
           }
           else {
            //disable add to cart button
           }
       }
   );
  });

Script in Swatch.liquid :

Can anyone please help us why image is not updating on variant changes ?