Hiding variant images in supply theme

New Member
2 0 0

Hello,

Some products I sell on my web site have as many as six sizes, with 12 colours available.

On a product page, this works out to be 72 product images, one for each variant.

How do I get shopify to only display the images pertaining to the size selected?

0 Likes
Shopify Staff
Shopify Staff
640 59 127

Hey there, Michael!

Bo here from Shopify Support.

That is a really great question and I can totally see where you are coming from. Having that many thumbnails would not look great on your page and would slow down the loading time for sure. If you are comfortable with making a very slight alteration to the HTML of your website I would be more than happy to show you!

  • Go to Online Store > Actions > Edit Code.
  • In the "Sections" folder open up product-template.liquid.
  • Scroll to line 70 and type in {% comment %} and then type in {% endcomment %} in line 84.
  • The finished result should look like this:

  • Click Save.

  • If your theme is numbered slightly different just make sure to put the {% comment %} tag in the line before {% if product.images.size > 1 %} and the {% endcomment %} on the line after {% endif %}.

NB If you do decide to proceed with the coding tutorial yourself we would recommend that you duplicate your theme as per this guide before making any changes to your theme's code.

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help

All the Best,
Bo

Bo | Social Care @ 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
New Member
2 0 0

Hi, that's great. Thank you for your help!

0 Likes
New Member
13 0 0

Hello

 

We have an app which will help you arrange variant images automatically and make your product pages professional.

 

We helped 1000+ store owners arrange their variant images automatically.

 

Please check the app - variant image Automator in the Shopify app store

 

take care..keep smiling

0 Likes
New Member
1 0 0

Hi Bo !

 

Thank  you for the tip I tried it, but there is one problem.

It actually hide all the variant images, which is good BUT we have to reload the page every time we pick a different variant to see the good image diplay, so how can we hide the variant images but still be able to display the good variant image without having to reload te page everytime (we cannot ask customers to do it) Thank you !

0 Likes
Tourist
7 0 1

the price for this app is absurd.  This is such a basic option - why is not available to shopify users?  If you have a lot of variant images, you should not automatically display every single one of them.  I tried the code fix above and it worked, however, it messed up all the alignment of my page so I had to put it back.  Can someone please help? 

0 Likes
Highlighted
New Member
1 0 0

This is super helpeful - However, now it only shows 1 image. I have 2 main images that I would like to show up for all variants, then a 3rd image that would change based on which variant the shopper chooses. Can you explain how to do this? Thanks! 

0 Likes
New Member
1 0 0

I am using this theme : turbo-portland Bold Tier-2. Do you know how to make changes in the code to hide the variants for all products?

Thanks

0 Likes