Hide Variant Thumbnails In Minimal

New Member
4 0 0

Can someone tell me how to hide the thumbnails in the Minimal theme? I know it's a pretty simple code and I think I can install myself. I only the selected variant image to show (i.e., red, blue, shirt, hoodie, etc.) thanks.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
145 0 18

Hey Thomas,

Jordan here from Shopify :)

I just tried this and was able to hide the additional thumbnails on product pages by commenting out a bit of code from the Minimal theme's product.liquid template file:

{% comment %}
              <ul class="grid product-single__thumbnails" id="ProductThumbs">
                {% for image in product.images %}
                  <li class="grid__item">
                    <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                      <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                    </a>
                  </li>
                {% endfor %}
              </ul>
{% endcomment %}

You may find the code that you need to comment out around lines 46-54 in the product.liquid file (for the Minimal theme), under the Templates folder in the 'Edit HTML/CSS' area. The top and bottom lines from the code above will 'comment out' the section that you don't need.

Hope this helps! Cheers :)
Jordan

Shopify Guru
support@shopify.com

1 Like
Highlighted
New Member
4 0 0

Thanks! Worked like a charm.

0 Likes
Highlighted
New Member
4 0 0

Hey Jordan. This works when the selected placement is "right of the main image" But how would I do it if I selected the placement as "below the main image".

Having set at below gives a bigger image on mobile and centers it in the screen so it looks alot better. 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
145 0 18

Hey again, Thomas :)

I agree with you there! For this, you will want to comment out a bit of code just above where I originally mentioned, in the product.liquid template file:

You might find this around lines 23-31 in the product.liquid. Let me know if you have any other questions!

Cheers,
Jordan

Shopify Guru
support@shopify.com

0 Likes
Highlighted
New Member
1 0 0

@Jordan_P wrote:

Hey Thomas,

Jordan here from Shopify :)

I just tried this and was able to hide the additional thumbnails on product pages by commenting out a bit of code from the Minimal theme's product.liquid template file:

{% comment %}
              <ul class="grid product-single__thumbnails" id="ProductThumbs">
                {% for image in product.images %}
                  <li class="grid__item">
                    <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                      <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                    </a>
                  </li>
                {% endfor %}
              </ul>
{% endcomment %}

You may find the code that you need to comment out around lines 46-54 in the product.liquid file (for the Minimal theme), under the Templates folder in the 'Edit HTML/CSS' area. The top and bottom lines from the code above will 'comment out' the section that you don't need.

Hope this helps! Cheers :)
Jordan

Shopify Guru
support@shopify.com


Hi Jordan,

 

Even though this thread is almost 4 years old, just wanted to let you know that I was researching for the last hour how to do this and looked at many different threads, watched videos, and was about to hire a shopify expert but your solution was the only one that worked. Thank you!



0 Likes