Variant images Swatch

Zeshanzaidi
Tourist
24 0 2

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

Replies 6 (6)

Team_OSC
Shopify Partner
101 14 16

Hi @Zeshanzaidi 

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

- Need a Shopify Developer?

  Hire Me:  Upwork | Website:  Omni Site Creations
- Connect On: Chat on WhatsApp | Email: info@omnisitecreations.com
- Our Services:  Design Changes | Custom Coding | Modifications | New Website
- Your tip, my code.  Buy me a Coffee  ❤️
Zeshanzaidi
Tourist
24 0 2

Buyhub.store

websensepro
Shopify Partner
1045 144 149

Hello @Zeshanzaidi,

Please follow this tutorial because it's very helpful.


Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Zeshanzaidi
Tourist
24 0 2

@Team_OSC ???

Team_OSC
Shopify Partner
101 14 16

Are you using Dawn theme or another one?

Do you want color swatches?

 

- Need a Shopify Developer?

  Hire Me:  Upwork | Website:  Omni Site Creations
- Connect On: Chat on WhatsApp | Email: info@omnisitecreations.com
- Our Services:  Design Changes | Custom Coding | Modifications | New Website
- Your tip, my code.  Buy me a Coffee  ❤️
Zeshanzaidi
Tourist
24 0 2

yes dawn 12.0.0  no color swatches. image swatches. in the picker the customer should see the pictures of the variant, like in aliexpressScreenshot (6).png