Re: How can I achieve image swatch on the Dawn theme?

How can I achieve image swatch on the Dawn theme?

SanyamJain
New Member
8 0 0

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 

Screenshot 2023-10-17 133223.png

{% 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 %}

 

 

Replies 9 (9)

SanyamJain
New Member
8 0 0

2nd code result but image is not clickable 

Screenshot 2023-10-17 133549.png

zaczee
Globetrotter
855 46 42

Hi,

 

Can you share your store url

SanyamJain
New Member
8 0 0

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 properlyScreenshot 2023-10-17 143057.png

zaczee
Globetrotter
855 46 42

Hi,

 

Link is not working

SanyamJain
New Member
8 0 0

i got the solution thanks for your time

 

MrPAtul
Tourist
4 0 1

you should share the solution with us 

WC-Brealz
Visitor
3 0 0

Yes, understanding your solution would be very helpful to others. 

MRamzan
Shopify Partner
339 3 35

You just need to follow this video step by step.

Without installing any App:

Hire Me:

WhatsApp: +91-9145985880
Email: [email protected]
Skype: mohdramzaan112
prithvi1
Visitor
1 0 0

Hey @MRamzan this is really helpful. However, I have multiple variant pickers and I would like to have image pickers for all variants.