How to Add a Product Image Hover Effect in Shopify

In today’s tutorial, we are going to replicate a high-converting feature found on top-performing e-commerce sites like Burberry. Specifically, we will implement a product image hover effect.

When a customer hovers over a product card on a collection page, the image will swap to show a second view (such as a model wearing the item). This simple interactive feature makes your site look less static and can significantly increase your click-through rates by giving customers two different looks at the same product instantly.

Here is a step-by-step guide to coding this into your Shopify theme.

Prerequisite: Backup Your Theme

Before making any code changes, it is crucial to create a backup. This ensures that if any errors occur, you can easily revert to a working version of your store.

1. Navigate to your Online Store > Themes.
2. Click Actions > Download theme file.
3. This will send a backup to your email. Save this file locally.

Step 1: Add the CSS Styling

First, we need to add the CSS styles that control the transition animation. We will be working in the theme.scss.liquid file.

1. In your Shopify Admin, go to Online Store > Themes > Actions > Edit Code.
2. Search for and open Assets/theme.scss.liquid.
3. Scroll to the very bottom of the file.
4. Paste the following "Reveal Module" CSS code:

/* Reveal Module CSS */
.reveal .hidden {
  display: block !important;
  visibility: visible !important;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.reveal:hover .hidden {
  opacity: 1;
}

.reveal {
  position: relative;
}

5. Click Save.

Step 2: Modify the Product Card Liquid File

Next, we need to edit the HTML structure of the product card to include the second image.

1. In the file search bar, look for product-card.liquid (this is typically located in the Snippets folder).
2. Locate the main wrapper div for the image. You are looking for a container that handles the padding/layout.
3. Inside the opening tag of that div, add class="reveal". It should look something like this:

<div class="... reveal">

Adding the Second Image logic

Now, find the existing <img> tag logic within that file. We are going to duplicate the image logic to render the second image behind the first one.

1. Copy the entire existing image block (including the assign statement for the image URL if present).
2. Paste it directly below the first image block.
3. Modify the new block:
   • Change the source from the featured image to the last image of the product (product.images.last).
   • Add the class hidden to this new image tag.

Your code structure should effectively look like this:

<!-- First Image (Standard) -->
<img src="{{ product.featured_image | img_url: 'large' }}" class="..." ... >

<!-- Second Image (Hover Reveal) -->
<img src="{{ product.images.last | img_url: 'large' }}" class="... hidden" ... >

4. Click Save and refresh your storefront to test. You should see the second image fade in when hovering.

Step 3: Remove the Default Overlay Button

Many free Shopify themes include a "View" button or overlay that appears on hover. This can interfere with our new image effect. To fix this, we need to hide that button.

1. Stay inside product-card.liquid.
2. Search for btn or span to find the code responsible for the button overlay.
3. Comment out the code so it no longer renders.

{% comment %}
  <div class="product-card__overlay">
     <span class="btn product-card__overlay-btn">View</span>
  </div>
{% endcomment %}

4. Click Save.

Conclusion

If you navigate back to your collection page or home page, you should now see a smooth transition between the product's featured image and its last image (usually the lifestyle or model shot) when you hover. This functionality works on desktop and keeps the product clickable, directing users straight to the product page.

This small change brings a professional, high-end feel to your store similar to major fashion retailers.