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

[sofcastro]

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=dc2554ee02fd88ae...

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

[StoreMedics]

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;
}

[sofcastro]

It works!

But the other product thumbnails desapear 😕

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

Thank you so much,

Sofia

[StoreMedics]

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

[Elias]

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?

[sofcastro]

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

[Elias]

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

[sofcastro]

I receive the email and the Ticket number!

I'll wait for the Shopify team feedback.

Thanks in advance Elias,

Sofia

[landed]

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

[Michelle_Mac]

I would also like to hide majority of the variant images until they are clicked on. SO shoppers don’t have to scroll through all images to finish reading the product description.. @Elias Can I get some help with implementing this on my shop? Is there still 60 min of free design time? Thankyou. 

[Elias]

Greetings, @Michelle_Mac.

Thank you for joining the thread!

If you're using a Shopify-supported theme and your store is subscribed to a plan, then the 60 mins of complimentary design time is still available. While we aren't able to provide account-specific support via the Shopify Community at this time, we'd be happy to assist you with sending a customization request to our Theme Support team through live chat, email, or callback. Please visit the Shopify Help Center and log in to your account to create a support request.

I'd love to know when our Theme Support team can help you with this. Keep me posted!

[Michelle_Mac]

Thanks @Elias . That’s great! 🙂

[Pet_Provider]

would you be able to help me do this in my store please? www.petprovider.co and password is 'yowroy'. I am wanting only images without the alt text Variant to show unless a customer has selected a colour, in that case the associated variant image would then show.

[Elias]

Hey, @Pet_Provider.

Thank you for joining the thread and sharing your store URL!

If your store is using a Shopify-supported theme, then our Theme Support team can help you with exploring customizations for your theme. However, in order to be eligible to receive the complimentary design time included with our subscriptions, your store will need to be subscribed to a monthly or annual plan. It's also important to note that there are some limitations and unsupported customizations, and more information on that can be found here: Shopify Design Policy. Did you get a chance to review our monthly plans and find one suitable for your business? 

That being said, depending on your theme, there may be tutorials that can help you with this customization. For example, this is a community guide for the Minimal theme: 'Needing Help Hiding Variant Images - Minimal Theme.' Alternatively, if you simply want to assign multiple images per variant, then you can also consider using a third-party app, like Multiple Variant Images. 

Have you considered using something like Shopify Inbox to interact with customers live on your store? Also, some merchants find removing the 'Powered by Shopify' message helps the professionalism of their store, would this be something that interests you?

[rosandrest]

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.

[sofcastro]

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.

[yanceyr]

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 %}
               .....

[Elias]

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?

[yanceyr]

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

Engineer at heart so it was fun learning liquid 🙂

[devpatel75]

hey yanceyr,

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

[Elias]

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!

[landed]

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

[hotvortex]

Thanks for the tutorial it worked

[PurplePiglet]

Hi there!

I know that this is an old thread, but I'm trying to figure out how to hide variant images myself.  I have tagged the variant images with 'VARIANT' but I am unsure where to post the code...

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

 can someone point me in the right direction??

 Thanks Kate

[JeffW]

Hi Kate,

This works for me:

{% for image in product.images %}

  {% if image.attached_to variant? %}

    ... output thumbnail for image attached to variant ... 
  {% endif %}

{% endfor %}


{% for image in product.images %}

  {% unless image.attached_to variant? %}

    ... output thumbnail for image not attached to variant ... 
  {% endunless %}

{% endfor %}

[PurplePiglet]

Thats great, thank you so much for your reply!

[mgalyen]

Where do you add this code to? Also, what would be in [IMAGE DATA]?

[ironhouse]

Hi - trying to implement this code. What do I put in the place of [IMAGE DATA]

[PaulNewton]

@ironhouse 

 [IMAGE DATA] is a place holder representing the normal image output in your themes code that you wrap with the given logic.

What that code is varies wildly by theme 

The other approach is to look for the image loop and skip images used with variants with the {%-continue -%} tag

{% for image in product.images offset:index_offset %}
    {%- if image.attached_to_variant == true -%}
        {%- continue -%}
    {%- endif -%}
...
....
 

[ironhouse]

Thanks @PaulNewton where would I paste this code?

[PaulNewton]

---

@ironhouse wrote:

Thanks @PaulNewton where would I paste this code?

---

 look for the image loop 

[VRD]

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!

[Elias]

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:

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!