i want to display the product associated with the color in product page

[momsabhiruchi]

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

[Small_Task_Help]

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  

[momsabhiruchi]

hi..Thanks for the solution, but can u please explain a little about modifying image tags , and also where to add that code