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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024