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

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

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 %}
2 Likes

Thats great, thank you so much for your reply!

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

1 Like

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

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

Thanks @PaulNewton where would I paste this code?

look for the image loop

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.

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!

1 Like

Thanks @Elias . That’s great! :slightly_smiling_face:

1 Like

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.

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?

Display variant images when the specific color is selected

1 Like

Hi, this is a common problem on Shopify and there is a no-code solution for this problem. Rubik Variant Images app solves this problem easily and only variant-specific images are shown on your product pages.

You can give it a try: https://apps.shopify.com/rubik-variant-images

See the demo video here:

Hey Jak, this is awesome. So simple and it filters the variant images perfectly. Thank you very much. Only issue I am facing is zoom: I use “click and zoom”, but nothing happens when I click on the main image. May I ask you to have a look?

Hey, glad to hear you found it helpful! The image zoom feature is disabled because the existing zoom function only works with the default image gallery. For variants, you’d need to create a custom zoom feature, which is a bit more complex—that’s why I didn’t include it in the video.

1 Like

Ok, thank you for the information. That zoom-feature would be awesome. Is there a chance you will look into this? I have tried countless of javascript hacks and 3rd party apps to make the variant images work but your solution was the only one really working the way I wanted it. You could make me (and I guess many others that are unhappy with other solutions) very, very happy if you added zooming :slightly_smiling_face:

Hi Hey_Jak, I’m trying to implement this on a paid theme called Lorenza which seems to not have this option either. Where do I find your code to copy-past the .js to make this happen? Thank you very much, this video is really clear and easy to follow!