When Clicking On New Photos On Product Page The Variant In The Dropdown Menu Doesn't Change.

When Clicking On New Photos On Product Page The Variant In The Dropdown Menu Doesn't Change.

DragonBunny
Shopify Partner
11 0 0

Hi,

Been using Minimal (yes, I know it's been retired!) since we opened our store September last year. 

Until the last month you could click on product photos and it would change the variant displayed in the drop down list. We modified the code following this script and everything worked fine until a month ago.

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-...

Now, it still works on the older photos/variants but NOT for the newer photos/variants we have added!  

 

I've looked into the code a little and found there are some errors in the product template liquid as shown below.

Something related to lazy load I believe? Would this be affecting the photo/variant change? 

Or is it something else?

Thanks

DragonBunny_0-1698478370381.png

 

 

 

 

<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

<div class="section-header section-header--breadcrumb">
{% include 'breadcrumb' %}
</div>

<div class="product-single">
<div class="grid product-single__hero">
<div class="grid__item post-large--one-half">

{% if section.settings.product_thumbnails_position == 'below' or product.images.size < 2 %}

<div class="product-single__photos">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

{% for image in product.images %}
{% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

<div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
{% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
data-src="{{ img_url }}"
data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
alt="{{ image.alt | escape }}">
</div>
</div>
{% endfor %}

<noscript>
<img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
</noscript>
</div>

{% if product.images.size > 1 %}

<ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
{% for image in product.images %}
<li class="grid__item wide--one-quarter large--one-third medium-down--one-third">
<a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
<img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>

{% endif %}

{% else %}

<div class="grid">

<div class="grid__item four-fifths product-single__photos" id="ProductPhoto">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

{% for image in product.images %}
{% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

<div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
{% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
data-src="{{ img_url }}"
data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
alt="{{ image.alt | escape }}">
</div>
</div>
{% else %}
<img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
{% endfor %}

<noscript>
<img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
</noscript>
</div>

<div class="grid__item one-fifth">

<ul class="grid product-single__thumbnails" id="ProductThumbs">
{% for image in product.images %}
<li class="grid__item">
<a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
<img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>

</div>

</div>

{% endif %}

Replies 4 (4)

Josh_Laird
Tourist
9 0 2

Having the same issue. Did you figure out the issue?

DragonBunny
Shopify Partner
11 0 0

Not yet, short term fix was to remove the old photos and replace with new of products available so that at least individual product page photos will act the same way! A stop gap fix until we have time to focus on it. Also was hoping for some feedback here but nothing forth coming yet!

 

 

Josh_Laird
Tourist
9 0 2

Thank you for the reply. Does anybody else have any suggestions?

612Moto
Visitor
2 0 0

Having the same issue. I have a couple of old items that are set as draft due to the product being discontinued so i tried to use those products with new content and images. Still having the same issue. I don't know anything about code or how to navigate them. Looking for someone to fix the issue. This is the one i added yesterday.

https://612moto.com/collections/all-dunlop-tires/products/dunlop-trailmax-raid

I removed all but 2 images until the issue is resolved.