Product variants not updating no matter what

New Member
10 0 0

Hello,

This problem has been bugging me for over a month now. My product variant images do not update when I click their corresponding options from the options list. For example, if I choose a color black, the featured image does not switch to the one related to black color. I have tried so many solutions, but it does not work. I will post my product.liquid and theme.js below for your insights"

 

Product page is: https://ztars.myshopify.com/products/first-product

 

 

product.liquid:

 

<div class="product-template__container page-width"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
>




<div class="container">
<p class="mob-prod-title">Ded do Eiusmod Tempor Incididunt</p>
<div class="row">
<div class="col-sm-6 product-image" id="product-image">
<div class="product-image-inner">

{% assign current_variant = product.selected_or_first_available_variant %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}



<div>
<a href="{{ featured_image | product_img_url: 'original' }}" class="featured-image elevatezoom product-single__photo" data-image-id="{{ image.id }}">
<img id="show-img" class="zoom-image" src="{{ featured_image | product_img_url: '1024x1024' }}" data-zoom-image="{{ featured_image | product_img_url: 'original' }}" alt="{{ product.title | escape }}" />
</a>
</div>


<div class="owl-carousel owl-theme">

{% for image in product.images %}
<ul id="gallery-image" class="gallery-image-thumb item ">

<li >
<a class="thumb-img{% if forloop.index == 1 %} active{% endif %}" data-image="{{ image | product_img_url: '1024x1024' }}" data-zoom-image="{{ image | product_img_url: 'original' }}">
<img src="{{ image.src | img_url: '500x500' }}" alt="{{ product.title | escape }}" class="thumb-prod">
</a>
</li>

</ul>
{% endfor %}
</div>
</div>
</div>
<!--Product Info-->
<div class="col-sm-5 product-info ">
<h2 class="desk-prod-title">Ded do Eiusmod Tempor Incididunt</h2>
<p>Lorem ipsum dolor sit amet</p>
<!--Start Product Form-->

{%- assign current_variant = product.selected_or_first_available_variant -%}

 

{% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}

{% comment %}
Combined Select
{% endcomment %}




<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js" style="display:none;">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>


{% comment %}
Add to cart button
{% endcomment %}

<div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}

 

<!-- End Product Form -->

</div>
{%- comment -%}
Live region for announcing updated price and availability to screen readers
{%- endcomment -%}
<p class="visually-hidden" data-product-status
aria-live="polite"
role="status"
></p>
</div>
<!-- End Product Info-->

</div>


{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}




{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
var variantImages = {},
thumbnails,
variant,
variantImage,
optionValue,
productOptions = [];
{% for variant in product.variants %}
variant = {{ variant | json }};
if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
variantImage = variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
variantImages[variantImage] = variantImages[variantImage] || {};
{% for option in product.options %}

{% assign option_value = variant.options[forloop.index0] %}
{% assign option_key = 'option-' | append: forloop.index0 %}

if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
}
else {
var oldValue = variantImages[variantImage][{{ option_key | json }}];
if ( oldValue !== null && oldValue !== {{ option_value | json }} ) {
variantImages[variantImage][{{ option_key | json }}] = null;
}
}
{% endfor %}
}
productOptions.push(variant);
{% endfor %}
</script> 
{% endif %}

 

0 Likes
Highlighted
New Member
5 0 0

Hi, I am having the same issue, any progress?

0 Likes
New Member
5 0 0

Solved! - found an old saved version of my Theme under Theme/Customise....was able to use it as it wasn't too much different to my most recent version when I saved it - Save often people!

0 Likes