How to remove variant thumbnails

Highlighted
New Member
1 0 0

Hi,

I am trying since many hours to find a way to remove the variant thumbnails under the big picture of the product page. Is there a simple way to do this ?

Thank you

0 Likes
Highlighted
Community Moderator
Community Moderator
3244 245 556

Hi Jean-Sébastien, 

Nick here from Shopify. 

You can add some code to remove the variant thumbnails here. You would need to add the following code to the bottom of the theme.scss.liquid file (Online store >  Themes > Actions > Edit Code > theme.scss file). 

.thumbnails-wrapper {display:none;}

Alternatively, if you are not comfortable using code there is an app for this called the Variant Image Penguin app

If you are not comfortable with code and don't want to use an app, your best bet would be to reach out to a Shopify Expert to help you with a customization like this as a small task job. 

Don't hesitate to ask any other questions. 

All the best, Nick

Nick | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
3 0 0

I am having the same issue, and this code doesn't work for me. I'm using Simple.

I would like to suppress the variant images below the main product image (so they do not show). They are confusing. When you click on them, they do not force the variant drop down selection to change. This can result in customers ordering the wrong variant.productpage.jpg

0 Likes
Highlighted
New Member
3 0 0

I figured it out (I think). The code is slightly different for Simple:

.product-single__thumbnails {display: none;}

I still think this should be an option in the theme customization. And the fact that selecting the variant thumbnails does not force the variant drop down selection to change seems like a bug. It can result in customers ordering the wrong variant.

0 Likes
Highlighted
Shopify Partner
2294 116 352

Keep in mind '.product-single__thumbnails {display: none;}' only visually hides the thumbnails your customers browsers may still have to load everything.

To disable that area in simple theme you want to  comment out the #ProductThumbs block of code ,

lines somewhere around ~46 to 64  https://shopify.com/admin/themes/current?key=sections/product-template.liquid&line=46 

{%comment%}... {% endcomment}

 

Variant image linking has  tutorial https://shopify.dev/tutorials/customize-theme-select-variants-by-clicking-images

Right now it's mostly DIY ,so don't expect support to add it for you with current events.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
1 Like
Highlighted
New Member
3 0 0

Thank you so much Paul! Great tip! I think it's working.

0 Likes
Highlighted
New Member
1 0 1

I’ve tried entering this line of code into the asset, but I’m not sure it works for my theme “boundless”. Can you help me and my team with this?

1 Like
Highlighted
Shopify Partner
7473 1034 2599

Hello, @Encapsulator 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
10 0 5

How do I do this in boundless theme?

1 Like
Highlighted
Shopify Partner
7473 1034 2599

Hello, @Lemmy 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes