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.
Step 3: Hit “Save” and “Publish” to make your changes to go live.
Thank you for your comments