Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi everyone
I'm struggling with this problem, seems like only I have it.
I chose a main Picture for my product, but instead of showing it in the product page , it defaults back to the first variant image upon entrance for some reason.
I realized it has something to do with this line of code:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
But as I lack coding knowledge, I have no idea what to do with it. Everything I try gives back an error or deletes the whole thumbnail section.
Any ideas for how to solve this? The variant picture doesn't match there at all 😞
Hi,
Need to update the Liquid code to use the main product image as the default
Use javascript if required to handle dynamic image changes as per variant
Javascript code example
document.addEventListener('DOMContentLoaded', function () {
var variantSelect = document.querySelector('select[name="id"]'); // Adjust selector as needed
var imageContainer = document.querySelector('.product-image'); // Adjust selector as needed
variantSelect.addEventListener('change', function (event) {
var selectedVariant = event.target.value;
var selectedImage = document.querySelector('.variant-image[data-variant-id="' + selectedVariant + '"]');
if (selectedImage) {
imageContainer.src=selectedImage.src;
}
});
});
Please share your store URL as well
Evetually I found a solution here that worked for me:
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