Hide Variant Thumbnails In Minimal

Highlighted
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 19

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

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 19

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
2 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
Highlighted

Hi Jordan

I need the same solution, just not sure what 'comment out' means lol, sorry not to clued up.

Should I just paste the code below in the relevant space in the product.liquid template file or delete specific code? Would appreciate any assistance. Thanks!

Nadia

0 Likes
Highlighted
New Member
2 0 0

Hi there,

 

iI know this is an old thread but it's something i'm trying to do and i dont know what commenting out means. I tried pasting the comment and end comment parts of the code in the shown places but this didnt work. what is it exactly i need to do.

0 Likes
Highlighted
Shopify Partner
522 58 80

Hey there @JohnnySzymanski ,

You can try removing the code instead of commenting it. Let me know if it works or not.

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gmail.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes