Variant images Swatch

[Zeshanzaidi]

I added the below code and now every variants have the same picture and one can't differentiate in color variant

Code replaced in product-variant-options-liquid line 62 to 65

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">

      {{ value -}}

      <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>

    </label>

with;

{% if product.variants[forloop.index0].image != blank and option.name == 'Color' %}

      <label

        for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"

        style="background-image: url({{ product.variants[forloop.index0].image | img_url: '' }});height:40px;width:40px;background-size: cover;"

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

[Team_OSC]

Hi @Zeshanzaidi 

Please provide your store URL and password if store is password protected and also the name of the theme.

[Zeshanzaidi]

Buyhub.store

[websensepro]

Hello @Zeshanzaidi,

Please follow this tutorial because it's very helpful.

Thanks!

[Zeshanzaidi]

@Team_OSC ???

[Team_OSC]

Are you using Dawn theme or another one?

Do you want color swatches?

[Zeshanzaidi]

yes dawn 12.0.0  no color swatches. image swatches. in the picker the customer should see the pictures of the variant, like in aliexpress