How can I only display variant images when the specific color is selected?

Store Design

Topic summary

A merchant seeks to display only variant-specific images when a color option is selected, rather than showing all variant images in the product gallery simultaneously. The issue causes cluttered product pages with numerous thumbnails.

Proposed Solutions:

  • CSS hiding: Simple approach to hide thumbnail gallery, but removes all thumbnails including non-variant images
  • Liquid code filtering: Use image.attached_to_variant object or alt-tag identification to conditionally display images. Requires editing product-template.liquid file with code like {% if image.attached_to_variant == false %}
  • Third-party apps: Rubik Variant Images and Multiple Variant Images apps offer no-code solutions
  • Custom JavaScript: Community member Hey_Jak provides a tutorial and code solution, though zoom functionality requires additional custom development

Key Challenges:

  • Shopify lacks native bulk deletion for variant images; CSV export/import workaround required
  • Implementation requires Liquid/HTML knowledge or Shopify’s 60-minute complimentary Theme Support (available with paid plans)
  • Custom themes may have different file structures than standard Shopify themes

Status: Multiple participants report varying success with code-based solutions. The discussion remains active with ongoing requests for implementation guidance and feature additions like image zoom.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Good Moorning Guys,

Sorry to bother,I’m sure there’s a way and solution,but i couldn’t find both yet.

I had this product with a lot of variants,and it’s really annoyng,all pictures of them appear in the product image gallery.

You could see it,right here:

https://9s2a0uwnjnwc86u6-5087789091.shopifypreview.com/products_preview?preview_key=dc2554ee02fd88ae8226bac9ac8a4df4

Theme is Minimal One.

What can i do,to show the product color,only when we choose that one in the color box?Thank you so much!

Sofia

1 Like
2

One way to do it would just hide the images with css.

add this to the bottom of your scss or css asset file.

ul#ProductThumbs {
    display: none;
}
3

It works!

But the other product thumbnails desapear :confused:

There’s a way to just hide the variant pics?

Thank you so much,

Sofia

1 Like
4

It is possible, but is a little bit complicated to set up.

The way we have done this in the past is you need to identify the images that need to stay and images that are variants. This can be done in the image alt fields. If you add text there (for example ‘variant’) then you can write in the liquid code to not display those images with that ‘variant’ alt tag.

something like this:

{% unless image.alt contains 'variant' %}
  [IMAGE DATA]
{% endunless %}

An alternative way to do this is to use the ‘image.attached_to_variant’ object. Thought this up while writing this, so haven’t tested it, but in theory you could use this to identify if it is used on a variant and not have to use the alt field with the ‘variant’ tag.

more info: https://help.shopify.com/en/themes/liquid/objects/image#image-attached_to_variant

5

Hello, @sofcastro .

Elias here with Shopify Support. Thank you for reaching out.

There is a solution for this, which involves hiding the variant thumbnails and having the product image change based on the selected variant.

The first part is to customize your theme so that your products will show the featured image until a variant is selected. This is something you can try doing on your end and save some design minutes. If you have limited knowledge with HTML, CSS, Javascript, and Liquid; our Theme Support team will be able to help with this. This will be free of charge as part of the 60 minutes of design time that is included with your subscription.

The next step will be hiding the variant thumbnails, which I can send up to our Theme Support team. I have already located your store and I can update you with a support ticket. Before I send up the request, could you confirm if you’d like me to send one or both requests?

1 Like
6

Thank you so much for the assistance!

And to all the guys in here. Everything i do,just totally don’t work,so maybe i’m doing something wrong.

I’ll request both requests,for sure!

Sofia

7

Hey, @sofcastro .

Elias here with Shopify Support again. Thank you for confirming.

I’ve sent you an authentication email with ticket number (#14893726). Kindly check your account owner’s email and send me a reply. This way, I’ll be able to forward the request to our Theme Support team right away.

All the best,

Elias

8

I receive the email and the Ticket number!

I’ll wait for the Shopify team feedback.

Thanks in advance Elias,

Sofia

9

Hi, I am trying to hide my variant images from the product pages and still have images that are not variants show up. How would I use this object “image.attached_to_variant” and in what template would I drop it achieve this. You had started talking about it and it sounds like a great way to achieve my goal. But, I have never used liquid/shopify so am lost. Thank you so much.

1 Like
10

All experts can’t help me ,so i give up. Shopify assistance says that i need an expert, and i even apenas some money ,and they don’t fix me the problem.

11

Hi!

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

How can i organise and delete the variant images I have uploaded? I now have way too many images showing under the product.

How can I do this?

Thanks!

12

Hey, @VRD .

That’s a great question! There isn’t a way to bulk delete or manage multiple products’ images directly on Shopify; however, you can overwrite the images for multiple products by using CSV files. CSV files will be the fastest method to manage images for multiple products. To do this, you can export your products as a CSV first. Then remove or update the photos links in the CSV. After that, you can re-upload the CSV and overwrite the existing products. It will looks like this:

22-58-6aryf-7eas6
22-58-6aryf-7eas61292×562 187 KB

Another option is by using a third-party app, such as Excelify, which provides tools to bulk edit or import product images directly through their app. If you need any help with this app, you can always reach out to the developer directly through the contact information found in the Support section of their app’s page.

I hope this provides a couple of solutions for you to try out. If you have any other questions on this topic, don’t hesitate to let me know in this thread!

13

Hey,

I just ran into the same situation.

I added a check to see if the image was attached to a variant. Try to look for a section that looks like this in the product-template.liquid.

{% comment %}
      Show other product images below product info if there's any left to show
{% endcomment %}

{% if index < product.images.size %}
   {% for image in product.images offset:index_offset %}
          **{% if image.attached_to_variant == false %}**
               .....
1 Like
14

Hey, @yanceyr .

Thank you for joining the thread! I understand you’re also looking to hide the variant images. Though I’m unable to help with custom coding, this may be something our Theme Support can help you with. If you’re using a Shopify theme and your store is subscribed to a plan, I’d be happy to send a customization request on your behalf to our Theme Support team.

Just to confirm, is this something you still need help with?

15

No I no longer need help. I added that line of code to my theme.

Engineer at heart so it was fun learning liquid :slight_smile:

1 Like
16

Surely these hacks are the wrong approach.
The platform should allow to delete no longer wanted variant images..

2 Likes
17

hey yanceyr,

i am not able to find the section you mentioned, please help i am stuck with this for days.

18

Hey, @devpatel75 .

Thank you for joining the thread! I understand you’re trying to find the same section that @yanceyr was referring to, more specifically the product template. Typically, the product template is named ‘product-template.liquid’. however, this may vary between Shopify, third-party, or custom themes. When you edit the theme coding on a Shopify theme or a third-party theme from our Theme store, the ‘product-template.liquid’ can be found in the Sections folder. It’s important to note, this may vary with custom or third-party themes acquired outside our Theme store.

I hope this helps you locate that section! If you have any other questions on this topic, please don’t hesitate to let me know!

19

So there is no way to delete rogue orphaned variation images other than this awful hack?

20

Thanks for the tutorial it worked

1 Like