Hide variant images .product-template.liquid

Store Design
1

Hello,

Can anyone help me with making the right logic for this. I have found the string and I want the product to show the gallery, but when selecting a specific product variant (color and size) it should display the attached variant image.

When changing to ‘false’ it correct hides all the variant images, but do not show the attached variant picture unless you change variant again.

{%- for media in product.media -%}
{%- liquid
assign featured = false

if media == featured_media
assign featured = false
endif

I Hope it makes sense.

2

Hi @OrganicUniverse ,

Can you explain more about it, I really don’t understand your request.

You want to disable the feature when clicking variant, the product image will change according to the variant image.

Screenshot.png
Screenshot.png1466×789 109 KB

Please explain more about it, I will guide you in detail how to solve it.

1 Like
3

Thank you very much.

I will try to explain in depth so I would like to have the attached variant image to display when variant is chosen and change whenever but I do not want all the other variant images to be available as product thumbnails.

SO an ideal product page would look like attached. I hope it makes sense.

4

Hi @OrganicUniverse ,

I got it, you want a ‘Group Images Variants’ style feature like this demo: https://cs-maxmin-1.myshopify.com/products/zevity-new-women-simply-candy-color-single-breasted-poplin-shirts-office-lady-long-sleeve-blouse-roupas-chic-chemise-tops-ls9114

It will not display all variant images, but only in groups.

This is going to be very complex, not just a simple liquid, it will include JS.

I checked debutify theme and they don’t support this so I recommend you hire an expert to develop this feature. Refer group: https://community.shopify.com/c/Shopify-Ecommerce-Jobs/bd-p/shopify-job-board

Hope it helps!

5

Alright - thanks for your time. What is possible through .liquid.

I am not interested I paying an professional. I just want some simpel solution or a workaround. That sort of does the job.

The main issue right now, is when I remove the variant images from the product thumbnails with code the variant image do not appear until I change from default variant. Is it possible to just code it, so the product thumbnails only show like 4 images?

Maybe through CSS?

{%- for media in product.media -%}
{%- liquid
assign featured = false

if media == featured_media
assign featured = false
endif

6

Hi @OrganicUniverse ,

When you use liquid, it will display the images in the default variant. So when you click change variant it won’t be able to load other images so you need more JS to be able to ajax load the image area again.

That’s why with liquid alone, this is not possible.

Or when you change variants, you need to reload the whole site, but it’s not really good, so adding JS to load ajax is the best solution.

Hope it is clear to you.

1 Like
7

Sure I understand. But is it possible just to let the variant images stay and code the slider to only show let’s say the first 4 images of the whole gallery. I’m the way I could exclude the variant images..???

8

Hi @OrganicUniverse ,

You want to rearrange it, the 4 image gallery shows first and then the variant image list?

This is possible, you just need to change the code:

{%- for media in product.media -%}
	{%- unless media.attached_to_variant? -%}
		
	{%- endunless -%}
{%- endfor -%}
{%- for media in product.media -%}
	{%- if media.attached_to_variant? -%}
		
	{%- endif -%}
{%- endfor -%}

When you make these 2 loops it will give you a good display.

Hope it helps!

9

Which file is this change made in?

10

Hi, could you explain where to copy that code?

The “Hide other variants after variant selected” option doesn’t work on Dawn even if choosen… I’m going crazy!

Thanks