How can I use liquid code to hide unavailable product images?

Technical Q&A
1

Hi! On our website, we have set up a hover interaction that displays a second product image on hover. But some products only have 1 image available. In this case, Shopify shows a grey/placeholder which says ‘no image’. Does anyone know how I could use liquid code to hide this image if there are no variant options available?

The site isn’t live yet so I can’t share the link. But here is a video showing the issue: https://www.loom.com/share/58ad5d47744f4d92b60088c73b132fd8
And here is the current liquid code:

Thank you! Ashley

2

Hi Ashley,

I would approach it by checking if the alternate image exists before rendering it. Depending on your theme, you may need to render the featured image in place when alt is missing.

Something like this:


    {% if product.images[1] %}
    	
    {% else %}
    	
    {% endif %}
3

Hi @ashley-rose ,

Please change the code as below:


{%- if product.images[1] -%}

{%- endif -%}

So when there is no 2nd image, it won’t show and you can disable hover with class “grid-image-hover”. Hope it helps!

Please mark as a solution if you find my comment helpful. Thanks and good luck!

4

Thank you Robert, that worked perfectly! I really appreciate your quick reply :blush: :folded_hands:

5

Your welcome!