Hide variants thumbnails (Minimal theme)

Solved
hotvortex
Tourist
5 1 1

Hello

I searched a lot but didn't find a satisfied answer

I am using Minimal theme, and I am looking to hide ONLY the variant thubnails and keep only the feature images.

I have marked the variant image in the alt text with the word "variant". Any Idea how to hide them from the thumbnail ?

Many thanks

0 Likes
hotvortex
Tourist
5 1 1

This is an accepted solution.

Found the solution 

product.liquid .template

added 2x this

  {% for image in product.images %}
    {% unless image.attached_to_variant? %}
      <li class="grid__item ...
          ...
      </li>
     {% endunless %}
  {% endfor %}

 

0 Likes
avadipietro
Excursionist
25 0 5

I am trying to accomplish the same thing but with the Debut theme. I'm sure it's something similar, but can you tell me what should replace the ... in the code you suggested? Thanks!

0 Likes
VelasArtes
Explorer
56 1 9

@hotvortex 

Hi, I am having a similar issue. Could you please expand on how to determine if the image is attached to a variant using the alternative text?

 

I am using the Debut theme, but I think I could figure things out if you provide me an example.

Thanks

0 Likes
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>