How to add zoom and hover effects to product images

 

This article will guide you through the steps to enable the Zoom or Hover effects for your product images.

 

Adding visual effects to your product images increases your site interaction and allows customers to better understand your products, which translates to higher conversions.


GemPages supports the Zoom and Hover effects for your product images right out of the box. Follow the instructions below to enable these effects for your store.

 

Add (P) Image element to your page


Step 1: In the GemPages Dashboard, select your page and enter the Editor using the “Edit” button.


Step 2: Search for the Product module then drag & drop one onto your preferred spot on the page. By default, the (P) Image element will be already included in the Product module.

Skip this step if you already have a (P) Image element to adjust.



Step 3: Click on the (P) Image element, you shall find the Zoom and Hover effects under the element’s Settings tab.

 

Add the Zoom effect


The Zoom effect allows viewers to zoom in on your product images whenever they hover the mouse cursor over it.


 

Step 1: Select the (P) Image element to start configuring it.


Step 2: On the left sidebar, select Zoom in the Image Effect drop-down menu under the Effect section.



After that, you can adjust the Zoom level increments from 1 to 2.5 using the slider or the mini box.

 


Step 3: Hit “Save” and “Publish” once you’ve finished to update your front store.

 

Add the Hover effect


The Hover effect allows another image to appear when users hover the mouse over the image.



Step 1: Select the (P) Image element to start configuring it.


Step 2: On the left sidebar, click the Image Effect drop-down menu under the Effect section and choose Hover.


Choose the hover image by entering the image number into the Image Hover field. The image number is ranked by order of upload on the Shopify Admin.

 

 You can also put in the word “last” to quickly choose the last image on the list.

 

Step 3: Hit “Save” and “Publish” to make your changes to go live.


Feel free to check out more articles to master GemPages like a pro. Should you need any further assistance, please contact our GemPages Support Team via email or live chat at any time.

 


Was this helpful?