Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
Yes, I can help you to do this customization. Please contact me by mail for more help.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025