All things Shopify and commerce
Hi all , i am using karich shopify theme. Here in my store , i have a products with color variants. When i go to the product page, and select the required color, the related product is not getting displayed.Can any one please help me with that. TIA
my store url : https://anothrone.myshopify.com/
password: ohwhew
Hi,
At product-template.liquid or a similarly named , need to add JavaScript
Code example
<script>
document.addEventListener('DOMContentLoaded', function() {
var variantSelect = document.querySelector('select[name="id"]');
var productImages = document.querySelectorAll('.product-single__photo');
variantSelect.addEventListener('change', function() {
var selectedVariantId = this.value;
productImages.forEach(function(image) {
var variantId = image.getAttribute('data-variant-id');
if (variantId === selectedVariantId) {
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
});
});
</script>
Add data-variant-id attributes to Images
Code example
{% for image in product.images %}
<img src="{{ image | img_url: '1024x1024' }}" data-variant-id="{{ image.variant_ids.first }}" class="product-single__photo">
{% endfor %}
Modify the image tags to include data-variant-id, at product-template.liquid
hi..Thanks for the solution, but can u please explain a little about modifying image tags , and also where to add that code
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn 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, 2025