Need help hiding variant images - Minimal Theme

[RoadToFreedom]

Hi Guys,

I am new to the Shopify Community and decided to build my first website today. At the moment I am encountering some issues with my product page. So I am going to sell a product which has multiple variants. On the main page it's all nicely in order, customer can select a variant and it will show the correct image. Here comes the issue --> once clicking on "Full Details" it will redirect the customer to the product page. On the product page it shows all the images of the variants I am offering. They are stacked from top to bottom. I don't mind those images to be there, but I prefer not to. 

Result I had before:
The variants were stacked one by one from top to bottom. 

Below the result I would like: 


Hopefully I was clear enough. 

Thanks in advance!

[24by7themes]

can you please share your store url

[Jasoliya · Accepted solution]

HI @RoadToFreedom 

If you want to hide your variants images from product page then add bellow css in Asset->theme.scss file at bottom:

.product-single__thumbnails {   display: none;}

[RoadToFreedom]

Wow. Thank you very much! Solved my issue! 🙂 

[Edv]

Hi Guys,

So that code hiding all thumbnails. is it possible to hide all variants images, but keep there none variants images?

[Jasoliya]

For that you can use this variable "image.attached_to_variant?"

Find code in section->product-template.liquid file

Check condition in variants loop like 

{% unless image.attached_to_variant? %}
//your thumb image code goes here 
{% endunless %}

[Edv]

Thank you for your reply! What code should i find in product-template.liquid file? and that command need to add somewhere or...? Sorry to bother you! 🙂

[Jasoliya]

Yes you have to add code in section->product-template.liquid file and find 

{% for image in product.images %}

give condition next to this and end just before {%endfor%}

[Edv]

Thank you for getting back to me! 🙂 I found that {% for image in product.images %} x4 times in that page. Tried to put that code which you provided above, but not sure where exactly i need to paste it...

[Jasoliya]

Sorry but that you have to check in which condition image generating i can check it form here. 

[Edv]

Ok, that will be complicated to do by myself 🙂 anyway, thank you very much for your help !

[jennifervdz]

Thank you! it worked for all variant images and that's great, but is there a way to do it with variant images with alt == xxx

[Calicos-Curios]

Awesome! Thank you so much!

[DanielMullaly]

You are a rock star, somehow I missed this in the docs. Thank you!

[Salman_Khan1]

Hi,

Our app offers exactly the same functionality which you are looking for.

The app will display only the images to the corresponding variant and hide the other images without making changes to your store's theme code.  

Have a look: https://apps.shopify.com/easy-variant-images

[np212585]

will this work if I have more then 1 image for the variant? I want the first 3 images to be visible and when click on the color you select you should only see the color. 

[Jasoliya]

HI 

No this code cant work for this situation,

you want to just show image of select variant right? for that we have to manage custom code.

[VRD]

Hi!

I have a bunch of variant images that I need to delete. I can upload more images but cannot delete images that are already uploaded!

How can I do this?

Thanks!

[Jasoliya]

HI @VRD 

If you want t remove variant images and want to add new then you can remove it form admin product section where from you have created product.

[LyndaDanielle]

Thank you! I was also looking for this code. Saved me a headache. Thanks again ❤️ 

[Elik1]

where should I write that?I mean, what line should I write this?

[Jasoliya]

What should you want to do exactly ? let me know and share your store url.