Show only the selected variant's images

Highlighted
New Member
2 0 0

As of right now, all of our variant images are showing when you load the product page. What I am trying to do is to only have the selected variant's images to appear. For ex: If I select the red variant, the thumbnail slider will only load the images related to the red variant. 

My current idea is to compare the selected variant with the variant images through the SKU. The variant image src has the SKU within it. The issue I am running into is that I can't seem to pull the current selected SKU/Variant. It only pulls the initial SKU that the page loaded with. I'm still new to Shopify so any advice helps. 

Below is the snippet of what I currently have. It does not display the thumbnail images here. 

{%- if product.images.size > 1 -%}
  <div id="thumbnail-gallery" class="desktop-2">
    
    {% if product.images.size > 4 %}<div class="thumbnail-slider">{% endif %}
      
      {% for image in product.images %}

        {% if image.src contains current_variant.sku %}
        	{% assign current_variant_selected = 'true' %}
        {% endif %}
        {% if current_variant_selected %}
          <div class="product-thumbnail thumb {% if image.id == featured_image.id %}selected{% endif %}" data-image-id="{{ image.id }}" stylename="">
            <img src="{{ image.src | img_url: 'large' }}" alt="{{ image.alt | escape }}">
          </div>
        {% endif %}

      {% endfor %}
    {% if product.images.size > 4 %}</div>{% endif %}
  
  </div>
{%- endif -%}

Anything helps. 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
826 50 104

Hi there Peter!

Don here from Shopify. :)

I'm not sure if this is something we would be able to help out with from here in Shopify support, though I'd like to check it out with you to see!

Could you let us know the name of the theme you are currently using in your store and could you maybe drop us a link to your store here we can hopefully point you in the right direction here?

All the best!


Regards,
Don

Don | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
2 0 0

We are currently using the Mr Parker Theme. The website to my current store is myshany.com 

I've been playing around with a few things with the code to see if I could get the sku to dynamically change when referred to in the thumbnail area. Unfortunately, I have not been successful.

0 Likes
Highlighted
Shopify Partner
21 0 7
Just went on your website and it seems as if you made it work.

Any tips on how you did it?
1 Like
Highlighted
Tourist
3 0 1

ProductWiz app fixes this issue. It's free and works like a charm!

0 Likes