Why aren't product thumbnails updating with variant pricing?

[darlenejhill]

I'm having an issue with product thumbnails (under main image) vs. variant images (on right for color selection). The variant images (on the right side) change the price & color of the product which is correct, but the thumbnail images (under the main product image) don't change the price which is confusing for the customer. I want to hide variant images from the thumbnail area & only display the non-variant images in that location.

EXAMPLE PRODUCT PAGE: https://pelicanoutdoorshops.com/products/polywood-porch-rocker-vineyard (password: "glosho")

In this example, I want to keep the variant images shown on the right side of the page where the color is chosen since different colors are different prices, but under the large main image keep only Non-Variant images (see below for Non-Varient image example).

I'm comfortable with code editing and have found solutions for much older versions of Shopify. 

[NomtechSolution]

1. Locate the product template: In the theme editor, navigate to the Sections folder and find the product-template.liquid file. This file controls the display of individual product pages.

2. Find the product thumbnail images code: Within the product-template.liquid file, locate the code responsible for displaying the product thumbnail images. It typically looks like:

{% for image in product.images %}
  <img src="{{ image.src | img_url: '600x' }}" alt="{{ image.alt | escape }}">
{% endfor %}

Replace the product thumbnail images code: Replace the existing code with the following code snippet:

{% for image in product.images %}
  {% unless image.variant_ids.size > 0 %}
    <img src="{{ image.src | img_url: '600x' }}" alt="{{ image.alt | escape }}">
  {% endunless %}
{% endfor %}

[darlenejhill]

Thanks. Your suggestion made it so the thumbnails can't be selected and the variant images are still displaying. 

Here is the code for my liquid page ( you can see where I added your suggestion under the comment NEW CODE and the original under ORIGINAL CODE):

<div class="product-image-main col-sm-6">
<input type="hidden" id="check-use-zoom" value="1" />
<input type="hidden" id="light-box-position" value="1" />
<input type="hidden" id="product-identify" value="{{ product.id }}" />
<div class="lightbox-container"></div>
{% assign featured_img_src=current_variant.featured_image.src | default: product.featured_image.src %}
{% assign featured_img_alt = current_variant.featured_image.alt | default: product.featured_image.alt %}
<div class="product-zoom-image">
<a href="{{ featured_img_src | img_url: 'master' }}" class="cloud-zoom main-image" id="product-cloud-zoom" style="width: {{ product_img_size | split:'x' | first }}px; height: {{ product_img_size | split:'x' | last }}px;"
rel="showTitle: false ,zoomWidth:{{ product_img_size | split:'x' | first }},zoomHeight:{{ product_img_size | split:'x' | last }},adjustX: 0,position:'inside' ">
<img src="{{ featured_img_src | img_url: product_img_size, crop: 'center' }}" title="{{ featured_img_alt }}" alt="{{ featured_img_alt }}" />
</a>
</div>
<div class="additional-images owl-carousel owl-theme">
{% if product.description contains '[video]' %}
<a class="thumbnail popup-youtube" href="{{ product.description | split:'[video]' | last | split :'[/video]' | first }}">
<img src="{{ 'video.png' | asset_img_url: product_img_size }}" alt="">
</a>
{% endif %}

<!--NEW CODE-->
{% for image in product.images %}
{% unless image.variant_ids.size > 0 %}
<img src="{{ image.src | img_url: '600x' }}" alt="{{ image.alt | escape }}">
{% endunless %}
{% endfor %}

<!--ORIGINAL CODE-->
<!--{% for image in product.images %}
<div class="item">
<a class="cloud-zoom-gallery sub-image" id="{% if forloop.first %}product-image-default{%else%}product-image-options-{%endif%}" href="{{ image.src | img_url: 'master' }}" title="{{ featured_img_alt }}"
rel="useZoom: 'product-cloud-zoom', smallImage: '{{ image.src | img_url: product_img_size }}'" data-pos="{{ forloop.index }}">
<img src="{{ image.src | img_url: product_img_size }}" title="{{ featured_img_alt }}" alt="{{ featured_img_alt }}" />
</a>
</div>
{% endfor %}-->
</div>
<!-- end wrapper-img-additional -->
</div>
<!-- <div class="col-sm-6 product-info-main"> -->
<div class="col-sm-6 product-info-main">
{% include 'product-page-features' %}
</div>