Disable Product Image Rollover If There Is Only 1 Image

This guide is for disabling a second product image rollover functionality on the home page if a product only has 1 image. This will prevent the rollover displaying a generic "no-image" placeholder if your store has a product with only 1 image to show. First, open your product-loop.liquid or __product-image.liquid file and find a div with the class of "reveal". Inside this div, we are going to loop through the product's number of images and count them. The code will look like this:

{% comment %} check for number of alt images product has {% endcomment %}
  {% for image in product-loop.images %}
    {% comment %} assign the number to a variable {% endcomment %}
    {% assign number-of-images = forloop.index %}
  {% endfor %}

We will then check the number-of-images variable in an if statement. It will look like this :

{% comment %} if there is more than 1 {% endcomment %}
  {% if number-of-images >= 2 %}

    {% comment %} display hidden class with additional hover image {% endcomment %}
    
    
      
    

  {% else %}

    {% comment %}if not just show lone image {% endcomment %}
    

  {% endif %}

The comments in the code help explain what's going on. If there's 2 or more images, keep the rollover functionality. If there's less, only display that one image. The entire code including the reveal div will look like this in the end.