Change Variants By Clicking On Their Thumbnail Images

[colinashvin]

I am using Pipeline version 6.1.3. I wish to modify the products thumbnails in the product page so that when they are clicked the variants are automatically changed.

 

I tried the tutorial from shopify and also from Pipeline itself. But none of them seem to work for the Pipeline theme version 6.1.3.

/*Fix for changing variant by selecting thumbnail*/
$(document).ready(function() {
    $('[data-product-slideshow]').on('afterChange', function(event, slick, currentSlide) {
      var thumbImage = $(slick.$slides[currentSlide]);
      if (thumbImage.length) {
          var arrImage = thumbImage.attr('data-thumbs').split('?')[0].split('.');
          var strExtention = arrImage.pop();
          var strRemaining = arrImage.pop()
          .replace(/_(pico|icon|thumb|small|compact|medium|large|grande|crop|center)/gi, '')
          .replace(/_[a-zA-Z0-9@]+$/,'');
          var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
          if (typeof variantImages[strNewImage] !== 'undefined') {
              productOptions.forEach(function (value, i) {
               optionValue = variantImages[strNewImage]['option-'+i];
               if (optionValue !== null && optionValue !== 'undefined' && 
			     $('.single-option-selector:eq('+i+') option').filter(function() {
                   var text = $(this).text();
                   if(theme !== null && theme.strings !== 'undefined' ){
                      text = text.replace(" - "+theme.strings.Unavailable, "").replace(" - "+theme.strings.soldOut, "")
                   }
                   return text === optionValue }).length) {
                   $('.single-option-selector:eq('+i+')').val(optionValue).trigger('change');
                  }
             });
          }
      }
    });
});

I'm not sure if it's taking the data-thumbs attribute.

My shopify store link: the-spec-shop-my.myshopify.com (Password: thespecshopisking)

Would be great if I could help doing this customization.

[Tejas_Nadpara]

@colinashvin  

Yes, I  can help you to do this customization. Please contact me by mail for more help.