How to Create a Hover Image Effect in Shopify Using Metafields

One of the most effective ways to increase user engagement on your Shopify collection pages is by adding a hover effect to your product cards. This feature allows customers to see a second image—or even a video GIF—when they move their mouse over a product.

In this tutorial, I will show you how to implement this feature using Shopify's native Metafields. This method is cleaner and more efficient than older workarounds that relied on specific image ordering.

Note: This tutorial specifically targets the Debut theme, but the logic applies to most Shopify themes with minor adjustments.

Step 1: Create the Product Metafield

First, we need to define a place in the Shopify backend to store the specific image we want to show on hover.

1. From your Shopify Admin, go to Settings > Metafields (or Custom Data in newer admin versions).
2. Click on Products.
3. Click Add definition.
4. Enter the following details:
   • Name: Hover Effect
   • Namespace and key: my_fields.hover_effect (Make a note of this key; we will need it for the code).
   • Description: This image will display on hover.
5. Click Select content type and choose File.
6. Set validation to accept Images (JPEG, PNG, GIF).
7. Click Save.

Step 2: Assign Images to Your Products

Now that the Metafield is defined, you will see a new field at the bottom of your product editing pages.

1. Go to Products and click on an item.
2. Scroll to the bottom of the page to find the Metafields section.
3. Click on the Hover Effect field.
4. Upload your desired secondary image or GIF.
5. Click Save.

Pro Tip: Using GIFs for Video Effects

If you want to show a video preview (like a product rotation) on hover, you should convert your MP4 to a GIF first.

1. Go to Ezgif.com and select Video to GIF.
2. Upload your MP4 file.
3. Trim the video: Keep it under 3-5 seconds to ensure fast loading times.
4. Set FPS: Change the Frame Rate to 25 for smooth playback.
5. Resize: If the generated GIF is too large (e.g., 20MB+), use the Resize tool to scale it down. Aim for a file size under 3-5MB.
6. Troubleshooting: If Shopify rejects the upload with a processing error, go back to Ezgif, use the Optimize tab, then the Repair tool, and save the file in an "unoptimized" format.

Step 3: Edit the Theme Code

Now we need to tell the theme to display this Metafield image when a user hovers over the product card.

Important: Before editing code, always duplicate your theme to create a backup.

1. Go to Online Store > Themes.
2. Click Actions > Edit Code.

Update the CSS

We need to add styles to handle the reveal animation. Open the Assets folder and find theme.css (or theme.scss.liquid).

Scroll to the very bottom of the file and add the following CSS:

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

.reveal:hover .grid-view-item__image:first-child {
  opacity: 0;
}

.reveal:hover .hidden {
  opacity: 1;
  z-index: 2;
}

Click Save.

Update the Liquid Template

Next, we modify the product grid snippet. Open the Snippets folder and search for product-card-grid.liquid.

1. Locate the Main Image: Find the existing img HTML tag or the Liquid code generating the main product image.
2. Add the Wrapper Class: Find the div wrapping the image (often has an ID or classes like grid-view-item__image-wrapper). Add the class reveal to this div.

It should look something like this:

<div class="... reveal">

3. Insert the Hover Image Logic: Inside that wrapper, you currently have code generating the main image. You need to copy that code and duplicate it immediately below itself.

4. Modify the Second Image: In the duplicated code block, we need to replace the image source with our Metafield image and add the hidden class.

Here is an example of how to modify the variables before the image tag:

<!-- Original Image Code (Keep this) -->
{% assign preview_image = product.featured_media.preview_image %}
{% assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<!-- ... existing image tag ... -->

<!-- HOVER IMAGE CODE (Add this below) -->
{% if product.metafields.my_fields.hover_effect != blank %}
  {% assign hover_image = product.metafields.my_fields.hover_effect %}
  {% assign hover_img_url = hover_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
  
  <img id="{{ img_id }}"
       class="grid-view-item__image hidden lazyload"
       src="{{ hover_image | img_url: '300x300' }}"
       data-src="{{ hover_img_url }}"
       data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
       data-aspectratio="{{ hover_image.aspect_ratio }}"
       data-sizes="auto"
       alt="{{ hover_image.alt | escape }}">
{% endif %}

Note: Ensure you add the class hidden to this second image tag so it doesn't show initially.

5. Click Save.

Step 4: Test Your Hover Effect

Navigate to your homepage or a collection page where the product is listed.

1. Static Images: Hover over a product with a secondary image. It should smoothly fade into the hover image.
2. GIFs: If you uploaded a GIF, the animation should play immediately upon hovering.

Conclusion

Using Metafields for hover effects provides a robust way to manage visual content without relying on messy code hacks. Whether you are displaying a product lifestyle shot or a video preview via GIF, this small interaction can significantly enhance the browsing experience on your store.

If you found this helpful, try implementing it on your featured collection sections to grab customer attention right from the homepage!