In this tutorial we’re going to explain how to reveal a second image when hovering over a product in the collection template. We’ll be demononstrating this using the popular Debut theme from Shopify, although a similar process could be able to be applied to any theme.

Load the second product image into the collection template

1. Open collection.liquid in the templates directory.
2. Find the product loop {% for product in collection.products %}.
   Sometimes this loop might be called within a separate file located in the snippets directory. This file might be called:
   • product-grid-item.liquid
   • product-card.liquid
   • product-card-grid.liquid
   • product-loop.liquid
3. Find the HTML image tag for your product featured image by searching for: product.featured_image. The code for the product featured image will vary by theme but it may look something like this:

   {% for product in collections.frontpage.products %}
       {% if forloop.first == true %}
           First time through!
       {% else %}
           Not the first time.
       {% endif %}
   {% endfor %}
   

   or more similar to this:

4. On a new line directly above the image tag, paste the following code:
   and on a new line directly below the image tag, paste the following code:

p { color: red }