Product Variant selected does not change on product page image

Highlighted
New Member
2 0 1

Hi guys, 

 

So I just got this new theme and It already has a swatch color, and everything has been working pretty well to be honest, 

On my home page, main page, I can Select different colors for the product and it shows on the thumbnails product. Exemple if I click to the red short, the image displaying is the red short etc...

 

HOWEVER!!!! 

 

On my product pages, The interface looks great, the swatch color is showing so I can still choose the product I want by colors but when selecting a color, the image of the product doesn't change!!! Let's say I got a fitness top in 5 different colors and the 1st color is Black. On my product page if I want to see the top in Yellow and I click on the yellow color, the product image will stay black

 

My image doesn't change with selected variant ONLY on product pages!! 

 

Let me know hat you guys need to see from my code to help please!!!! 

 

Thank you Shopify community 

 

1 Like
Highlighted
Shopify Expert
1381 111 206

Hi,

 

Well, this is the most common issue faced by Shopify merchant. First of all, I would like to know which theme you are using so that I can ask for the code from the appropriate product template file in order to fix this issue. 

I'm sure I can fix it for you if you can provide me with more details about the theme and template file for the code to see.

 

Thanks,

Perennial Solution

0 Likes
Highlighted
New Member
2 0 1
Thank you for your answer, I am using the Sasha Theme - Cosmetics

what templates do you need to see ? theme.liquid or swatch coding?

below is my item-swatch.liquid and swatch.liquid

item-swatch.liquid:

{% if settings.display_color_variant %}

    {% for option in product.options %}
    {% if option == 'Color' %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    {% for variant in product.variants %}
    {% capture color %}
    {{ variant.options[index] }}
    {% endcapture %}
    {% unless colorlist contains color %}
    {% assign text = color | handleize %}


  • {% if variant.image != null %}

    {% endif %}

  • {% capture tempList %}
    {{ colorlist | append: color | append: ' ' }}
    {% endcapture %}
    {% assign colorlist = tempList %}
    {% endunless %}
    {% endfor %}
    {% endif %}
    {% endfor %}

{% endif %}



swatch.liquid :

{% comment %}
Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or
'gif'.
{% endcomment %}

{% assign file_extension = 'png' %}

{% if swatch == blank %}

You must include the snippet swatch.liquid with the name of a product
option.


Use: {% raw %}{% include 'swatch' with 'name of your product
option here' %}{% endraw %}


Example: {% raw %}{% include 'swatch' with 'Color' %}{% endraw
%}



{% else %}

{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}

{% for option in product.options %}
{% if option == swatch %}
{% assign found_option = true %}
{% assign option_index = forloop.index0 %}
<br> label[for="productSelect-option-0-{{ option_index }}"] { display:<br>none; }<br> #add-to-cart-form .selector-wrapper {display:none}<br> #productSelect-option-0-{{ option_index }} { display: none; }<br> #productSelect-option-0-{{ option_index }} + .custom-style-select-box<br>{ display: none !important; }<br>

{% assign downcased_option = swatch | downcase %}
{% if downcased_option contains 'color' or downcased_option contains
'colour' %}
{% assign is_color = true %}
{% endif %}
{% endif %}
{% endfor %}

{% unless found_option %}

You included the snippet swatch.liquid with the name of a product
option — '{{ swatch }}' — that does not belong to your
product.


Use {% raw %}{% include 'swatch' with 'name of your product
option here' %}{% endraw %}


Example: {% raw %}{% include 'swatch' with 'Color' %}{% endraw
%}


This is case-sensitive! Do not put in
'color' if your product option name is
'Color'.



{% else %}

{{ swatch }} :


{% assign values = '' %}
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}

{% if is_color %}
{{ value }}

{% endif %}

type="radio" name="option-{{ option_index }}" value="{{ value | escape
}}"{% if forloop.first %} checked{% endif %} {% unless variant.available
%}disabled{% endunless %} />
{% if is_color %}

style="background-color: {{ value | split: ' ' | last | handle }};
background-image: url({{ value | handle | append: '.' | append:
file_extension | file_url }})">


{% else %}

{{ value }}


{% endif %}

{% endunless %}
{% if variant.available %}

{% endif %}
{% endfor %}


{% endunless %}

{% endif %}

Thank you, let me know if you need anything else from me.
0 Likes
Highlighted
New Member
2 0 0

Hi did you get this resolved. Having the same issue.... Thanks.

0 Likes
Highlighted
New Member
1 0 0

Hi ,

I am having an issue where if i change my color variant to a different name, the drop down does not show up in my preview.

I am using Infinit fashion megastore Theme.

Any advise would be deeply appreciated.

Thank you.

Regards,

Michael

0 Likes