Shopify themes, liquid, logos, and UX
I'm trying to achieve image swatch on dawn theme using this code but its showing 1st image for all variants and if i use different code its shows different image but it is not clickable
{% if product.variants[forloop.index0].image != blank and option.name == 'Color' %} <label class="color-lable" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" style="background-image: url( {{ product.variants[forloop.index0].image | img_url: '' }} );"> </label> {% else %} <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"> {{ value -}} <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span> </label> {% endif %}
{% if option.name == 'Color' %} {% assign found = false %} {% for variant in product.variants %} {% for opt in variant.options %} {% if opt == value %} {% if found == false and variant.featured_image %} <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" style="background-image: url({{ variant.featured_image | image_url: width: 40 }});"> </label> {% assign found = true %} {% endif %} {% endif %} {% endfor %} {% endfor %} {% else %} <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"> {{ value -}} <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span> </label> {% endif %}
2nd code result but image is not clickable
Hi,
Can you share your store url
https://h3pdbp5jbwmpbcri-67056402651.shopifypreview.com/products/floral-cotton-notch-collared-dress?...
IF there is no size variant the its working fine and its also clickable but by adding size variation the code is not working properly
Hi,
Link is not working
i got the solution thanks for your time
you should share the solution with us
Yes, understanding your solution would be very helpful to others.
You just need to follow this video step by step.
Without installing any App:
Hey @MRamzan this is really helpful. However, I have multiple variant pickers and I would like to have image pickers for all variants.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024