How to Add a Hover Effect to Product Images in Shopify

Shopify themes typically come with a wide array of customization options, allowing merchants to tweak the design and functionality of their store according to their own unique needs. 

But these default customization options might not cover everything that you would like to do with your online storefront — for example, many themes don’t come with a setting for adding a hover effect to the product images on your product pages. If you want to add this feature, you may need to either write some code or install a third-party app. 

Adding a Hover Effect to Product Images using Code Changes within the Theme

Let’s say you’re using Shopify’s Momentum theme, and you want to add a zoom-in effect that’s triggered whenever visitors hover their cursor over the product image on your product pages. 

You won’t be able to find any option for this effect in the settings for this particular theme — by default, nothing happens when someone hovers over your product images, and there’s no button you can press in the backend of your site to simply change that.

The Momentum theme doesn’t offer any built-in settings for adding a hover effect to product images.

But in cases like these, you can still add whatever features you want by inserting some of your own code.

Don’t know how to code? No problem. We can walk you through every single step of this process, and we’ll even provide you with the exact lines of code that you need to add to your store:

  • Log in to your Shopify account and select the sales channel that you would like to customize in the left sidebar of the main Shopify control panel. 
  • Click on the “Customize” button next to your theme — this will open Shopify’s built-in theme editor. 
  • Use the dropdown menu located at the top of the page to navigate to whichever template you want to customize (in most cases, product pages are assigned to the “Default product” template). 
  • Select the section or block that contains the product image you want to add a hover effect to — this will open the customization settings for the section/block in the left sidebar of Shopify’s built-in theme editor. 
  • Scroll down to the bottom of these customization settings and click on the “Custom CSS” option. 
Shopify’s theme editor allows you to insert custom CSS code.

Enter the following chunk of code into the “Custom CSS” field: 

img {
    transition: all 0.3s !important;
}
img:hover {
    transform: scale(1.2) !important;
}

If you’d like, you can adjust this code in order to change the speed of your zoom or how much it zooms in:

  • The “0.3s” figure in the code snippet above determines the quickness of your zoom. Replacing it with a smaller number will make your zoom faster, while replacing it with a larger number will make your zoom slower.
  • The “scale(1.2)” figure determines how much you zoom in. Replacing it with a smaller number will zoom in less (anything under 1.0 will actually zoom out), while replacing it with a larger number will zoom in more. 

After you have set up this CSS code just the way you want it, make sure to save your changes. 

After adding your code, save your changes.

Once the code has been added to the page, you’ll see that the zoom-in effect is now active in both Shopify’s built-in theme editor and the live version of your website. 

The hover effect will now be active on your storefront.

Using Shogun to Add Hover Effects to Product Images without Code Changes

Shogun offers the easiest way to add a hover effect to product images in Shopify — the app allows you to implement this feature with just one click. 

But first, you’ll need to import any product pages that you want to customize in Shogun over from Shopify:

  • After downloading and installing Shogun, select the “Apps” option in the left sidebar of the main Shopify control panel.
  • Open Shogun. 
  • Go to the “Pages” section of the Shogun app. You’ll see two tabs in this section: one labeled “Shogun” and another labeled “Shopify”. 
  • Open the “Shopify” tab. Here, you’ll find all of the pages on your Shopify store that have not yet been imported into Shogun. 
  • Set the page type filter to “Product” and find the page you want to import (you may be able to find it by just scrolling down, but there’s also a search bar that can help you speed up this process). Then, click on the “Import page” button next to it.
  • You have three page layout options to choose from for your import — be sure to select “Custom layout” (the other two options won’t allow you to add any effects to the product image). Then, select “Import this page”. 
Select the “Custom layout” option for your page import.

Now that your page has been imported, you will be able to customize it with Shogun’s visual editor:

  • Go back to the “Pages” section of the Shogun app.
  • This time, open the “Shogun” tab. Here, you’ll find all of the pages that have already been imported from Shopify into Shogun. 
  • Select the product page that you just imported — this will open up the page in Shogun’s visual editor.
  • Click on the product image — this will open the customization settings for the image in the right sidebar of the visual editor. 
  • Toggle the “Zoom on hover” option on. 
Toggle the “Zoom on hover” option on in the customization settings for your product image.

This hover effect will be especially helpful to your customers, as it allows them to use their cursor to move around the zoomed-in version of your product image. They’ll be able to get a close look at any details that they might be concerned about, and this extra visual information may very well make them more comfortable with placing an order. It’s just one of the many ways that Shogun can help you improve your conversion rate and make more sales.

Shogun also provides you with several other options for customizing your product images, including:

  • When image is clicked: In addition to how your product image behaves when the visitor hovers their cursor over it, you can also use Shogun to change what the image does when the visitor clicks on it. For example, you can set it up so that the image is expanded into a lightbox popup when the visitor clicks on it, or you can have it so that nothing happens at all. 
  • Aspect ratio: Determine the aspect ratio that you would like to use for your product image. This is especially important for the mobile version of your site, as an image that looks fine on one type of device may look awkwardly stretched or squashed on another. Shogun’s visual editor allows you to toggle between four different screen sizes (large/desktop, medium/laptop, small/tablet, and extra-small/smartphone) whenever you’re customizing a page, so you can make sure this issue isn’t happening.  
  • Margins and padding: You can determine how much space separates your product image from surrounding elements on the page, right down to the exact pixel.
  • Borders: If you’d like to add a border to your product image, Shogun gives you three different styles to choose from — solid, dashed, and dotted. You can also customize the border color, thickness, and radius (how rounded the corners are). 
  • Box shadow: Want to add a box shadow to your product image? Shogun gives you a variety of options for this styling effect. You can change the box shadow’s color as well as the amount of horizontal offset, vertical offset, blur, and spread.

Just about every other element in Shogun’s visual editor also comes with this level of flexibility. From product pages to blog posts and everything in between, you can use this tool to create any custom content you need for your Shopify store. 

Back to blog