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

Solved
avadipietro
Excursionist
25 0 5

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).

 

 scsc.png

 

Thanks for your help

ryanpwaldon
Explorer
51 6 12

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!

0 Likes
avadipietro
Excursionist
25 0 5

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
Explorer
51 6 12

This is an accepted solution.

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 %}
  <li class="product-single__thumbnails-item...>
    ...
  </li>
{% endfor %}

 

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

 

{% for media in product.media %}
  {% assign image = product.images | where: 'src', media.src | first %}
  {% if image.variants.size == 0 %}
    <li class="product-single__thumbnails-item...>
      ...
    </li>
  {%- endif -%}
{% endfor %}

 

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
Excursionist
25 0 5

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:

Product-page-001.jpg

 

0 Likes
PaperOcelot
New Member
2 0 1

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

Thanks!

avadipietro
Excursionist
25 0 5

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 %}
<div class="text-center return-link-wrapper page-width">
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
{% include 'icon-arrow-left' %}
{{ 'products.product.back_to_collection' | t: title: collection.title }}
</a>
</div>
{% endif %}

<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>

{% 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? %}
<li class="grid__item product-single__thumbnails-item product-single__thumbnails-item--medium product-single__thumbnails-item-slide js">

</li>
{% endunless %}
{% endfor %}

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_media -%}
{%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
"image": [
{{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
],
{%- endif -%}
"description": {{ product.description | strip_html | json }},
{%- if current_variant.sku != blank -%}
"sku": {{ current_variant.sku | json }},
{%- endif -%}
"brand": {
"@type": "Thing",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ shop.url | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>

 

0 Likes