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
Before adding effects, make sure your product image is ready inside a Product module.
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 already be included in the Product module.
If you already have the (P) Image, skip this step and go directly to the effect settings.
Step 3: Click on the (P) Image element, and you shall find the Zoom and Hover effects under the element’s Settings tab.
Enable the Zoom effect?
The Zoom effect allows viewers to zoom in on your product images whenever they hover the mouse cursor over it, helping them see finer details up close.
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.
Step 3: Hit “Save” and “Publish” to make your changes go live.
FAQs
1. How do I add a zoom image on hover in Shopify?
Use GemPages to enable the zoom image on hover feature by selecting the Zoom option in the (P) Image element’s settings — no coding needed.
2. What’s the difference between hover zoom and hover image swap?
- Hover Zoom: Magnifies the same image
- Hover Image Swap: Replaces the image with another on hover
GemPages supports both effects for maximum flexibility.
3. Can I use both Zoom and Hover effects at the same time?
No. You can choose either Zoom or Hover per image element. We recommend testing which works better for your product type.
4. Does hover zoom work on mobile?
Hover effects are generally desktop-focused. For mobile, we suggest optimizing with swipeable image galleries or stacked images for a better experience.
Thank you for your comments