How to make product image change when mouse over in Shopify

You can add a hover effect to your product images on the home page and on collection pages. When a customer moves the cursor over a product image, the image will change to show either an alternate product image:

Follow the steps for the customization:

Step 1: Add CSS to your stylesheet

To add a hover effect, you will need to add some CSS code to your theme’s stylesheet:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click theme.css.liquid. If your theme doesn’t have a theme.css.liquid file, then click styles.css.liquid, or another file with a .css.liquid file extension.
4. At the very bottom of the file, paste this code hosted on GitHub.
5. Click Save.

Step 2: Edit the code for your product images

To edit the code for your product images:

1. In the Snippets directory, click product-grid-item.liquid.If your theme doesn’t have a product-grid-item.liquid file, then look for one of the following:
   • product-card.liquid
   • product-card-grid.liquid
   • product-loop.liquid
2. Find the HTML img tag for your product images by searching for:
   
   <img

   1

   <img

   The code for the tag varies theme to theme, but always starts with <img, and ends with either > or />. It might look similar to this:

   <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}">

   1	<img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}">

3. On a new line above the img tag, paste the following code:
   <div class="reveal">

   1	<div class="reveal">

   On a new line below the img tag, paste the following code:

   </div>

   1

   </div>

   The result should look like this:

   <div class="reveal"> <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"> </div>

   1 2 3

   <div class="reveal">   <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"> </div>

4. On a new line below the img tag and above the closing </div> tag, add the code that changes what is shown on hover. The code that you add will vary depending on whether you want to show an alternate product image, custom text, or a combination of the two.

Step 3: Show an alternate product image on hover

1. On a new line below the img tag and above the closing </div> tag, paste the following code:
   <img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />

   1	<img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />

   Your code should look like this:

   <div class="reveal"> <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"> <img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" /> </div>

   1 2 3 4

   <div class="reveal">   <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}">   <img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" /> </div>

2. Click Save.

DEMO

Related Posts via Categories

• How To Download All Media Files in Your Shopify Themes
• 2+ Best Shopify Delete Customer Account Apps
• Top 3+ Quick Order Apps For Shopify
• Top 4+ “AI Size Recommender” Apps For Shopify
• The Best Shopify Apps for New Order Notifications on Twitch
• How To Check The Total Current Fees of Shopify Apps on Your Online Store
• The Best Shopify Apps For Glasses Virtual Try-On
• The Best Shopify Apps For Converting Prices To Cryptocurrency
• Top Shopify Apps for Seamless Sales Integration Across Multiple Websites
• Top 14+ Best Shopify Video Stories Apps