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

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

momsabhiruchi
Shopify Partner
37 1 3

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

Replies 2 (2)

Small_Task_Help
Shopify Partner
830 28 74

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  

To Get Shopify Experts Help, E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Expert Agency
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad
momsabhiruchi
Shopify Partner
37 1 3

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