Can you hide variant images in Shopify until a color is selected?

sofcastro
Excursionist
59 1 8

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

 

Replies 32 (32)

StoreMedics
Shopify Partner
62 6 15

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;
}
We work on Shopify stores to improve, maintain, and build functionality across all store types.
- Reach Out To Us! | hello@storemedics.com
- Visit Our Site! | https://www.storemedics.com

If we helped, leave a Like / Accept Solution
sofcastro
Excursionist
59 1 8

It works!

But the other product thumbnails desapear 😕

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

Thank you so much,

Sofia

StoreMedics
Shopify Partner
62 6 15

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

We work on Shopify stores to improve, maintain, and build functionality across all store types.
- Reach Out To Us! | hello@storemedics.com
- Visit Our Site! | https://www.storemedics.com

If we helped, leave a Like / Accept Solution
Elias
Shopify Staff
2771 274 483

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?

Elias | 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

sofcastro
Excursionist
59 1 8

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
Shopify Staff
2771 274 483

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

Elias | 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

sofcastro
Excursionist
59 1 8

I receive the email and the Ticket number!

I'll wait for the Shopify team feedback.

Thanks in advance Elias,

Sofia

landed
Excursionist
19 0 24

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

Michelle_Mac
Tourist
3 0 1

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
Shopify Staff
2771 274 483

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!

Elias | 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

Michelle_Mac
Tourist
3 0 1

Thanks @Elias . That’s great! 🙂

Pet_Provider
Tourist
4 0 1

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
Shopify Staff
2771 274 483

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?

 

Elias | 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

rosandrest
Tourist
5 0 3

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.

notamartha
sofcastro
Excursionist
59 1 8
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
Visitor
2 0 2

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
Shopify Staff
2771 274 483

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?

 

Elias | 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

yanceyr
Visitor
2 0 2
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
Visitor
2 0 0

hey yanceyr,

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

Elias
Shopify Staff
2771 274 483

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!

 

Elias | 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

landed
Excursionist
19 0 24

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

hotvortex
Tourist
5 1 1

Thanks for the tutorial it worked

PurplePiglet
Tourist
6 0 1

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
Shopify Partner
5 0 3

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
Tourist
6 0 1

Thats great, thank you so much for your reply!

 

mgalyen
Visitor
1 0 1

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

ironhouse
Visitor
2 0 0

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

PaulNewton
Shopify Partner
6274 573 1319

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

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


ironhouse
Visitor
2 0 0

Thanks @PaulNewton where would I paste this code?

PaulNewton
Shopify Partner
6274 573 1319

@ironhouse wrote:

Thanks @PaulNewton where would I paste this code?


 

 look for the image loop 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


VRD
Visitor
3 0 0

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
Shopify Staff
2771 274 483

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

 

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!

Elias | 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