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.
Learn 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, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025