Hiding variant thumbnails, keeping non-variant thumbnails on product page

[avadipietro]

Hi! I have products with many colored variants. However, I would like to keep my swatches on the right (I use Variant Options Swatch King to show swatches) and hide the variant images that show underneath the product. Can anyone help me? I am comfortable writing in HTML/CSS but my knowledge of Liquid is limited.

I attached a screenshot to show what my product page looks like now. For this product, for example, I would like to remove the variant thumbnails below the product but keep the original thumbnails (the silver color is not a variant and just showcases the angles).

Thanks for your help

[ryanpwaldon]

Hey @avadipietro !

If you’re using Debut, I believe the following CSS should do the trick:

[data-thumbnail-slider] {
  display: none;
}

Let me know how it goes!

[avadipietro]

Hi, thanks for the response! I already tried this solution, and it hides all of the thumbnails on the left. I am looking to only hide the variant options; the two silver photos are not purchasable, but are there to show the angles of the product. I would like to keep only those two thumbnails on the left side. The colors on the right are the colors we offer.

Thanks again!

[ryanpwaldon]

My mistake!

In that case you’re right – this is best solved with liquid. I just had a look into it, this is what I came up with:

Find for the following block of code in the product-template.liquid file:

{% for media in product.media %}
  

Make the following changes (add 3 lines of code):

```plain
{% for media in product.media %}
  {% assign image = product.images | where: 'src', media.src | first %}
  {% if image.variants.size == 0 %}
    

Let me know how it goes! (Don't forget to make a copy of your code beforehand, just incase you need to revert back).

**Important notes:**

I can't guarantee that this code will work for everyone.

This code was tested for the Debut theme as at 12th Dec 2020.

Please backup your code before making any changes. Whether you do this by simply copying your pre-changed code and saving to a separate file, by duplicating your theme, or by any other method, it doesn't really matter. You always want to make sure you can revert your code back to its original state if something breaks.

[avadipietro]

That totally worked, thanks so much! However, I think it might have conflicted with the app I am using for color swatches, Variant Options Swatch King

I can scroll through the variants but the images are not showing in the color navigation section, it only shows the title, while the images don’t show up. Any idea why this could happen?

I’m reaching out to their support team in the meantime as well. Thanks again, any help would be much appreciated.

Here’s an image to check it out:

[PaperOcelot]

This worked perfectly for me!
The line I had to find was {% for image in product.images %} not “for media…”

Thanks!

[avadipietro]

The worked for hiding the variants, but it is causing another issue. The main image is defaulting to the Shopify variant image and not on the first image of the media. It also making the other images that are in the media and not uploaded to any of the variants, show very small. What can I do differently, please?

Here is my code for the product page:

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section ‘product-template’ %}
{% section ‘product-recommendations’ %}

{% if collection %}

{% include 'icon-arrow-left' %} {{ 'products.product.back_to_collection' | t: title: collection.title }}

{% endif %}

{% assign current_variant = product.selected_or_first_available_variant %}

{% comment %}
ADMIN EDIT FOR HIDING VARIANT THUMBNAILS
{% endcomment %}

{% for image in product.images %}
{% unless image.attached_to_variant? %}

{% endunless %} {% endfor %}

[Svitlana_11]

Hi Ryan,
I used you code on my Sense 5.0.1 theme and unfornutanelly it didn’t work
I have main-product.liquid in sections with the code line that you wrote. I added the code you mention to existing code - didn’t work and also I deleted all existing code and put yours there - didn’t work too. Maybe you can help me with that?
Is it possible to hide variant images only for some products?
Thank you.