Problem when Adding a zoom-in effect to ecommerce product pages

Design help Animations & Interactions
1

Hi there,

I writing you as I have some issues with my zoom-in effect on my product template page. Indeed, the zoom effect is working on my webflow preview but not on my live website. Could you help me out, please?

Many thanks for your time,
Aurélien

Live website: New Authentic Logo Tee - DROVER CLUB (2022)

Preview webflow: https://preview.webflow.com/preview/dcproject?utm_medium=preview_link&utm_source=dashboard&utm_content=dcproject&preview=264a791c40b4a0aed19800d078ce1bfc&workflow=preview

2

Hey Aurelien, check out Webflow’s video on this. Custom image magnification on mouse hover — Webflow tutorial - YouTube

3

Hey Joejola, I made mine with this video → How to Webflow: Adding a zoom-in effect to ecommerce product pages in Webflow. - YouTube

I will have a look to yours now thank you :slight_smile:

4

@joejola,

Do you know how to make it work for 2 product pictures? Indeed the “zoom in” is only working on my first product picture. When sliding to the second product picture, the loope is lagging as you can see on the below picture. The “zoom in effect” seem to be stick to the first product picture.

Screenshot 2021-09-13 at 16.46.46
Screenshot 2021-09-13 at 16.46.461054×970 65.5 KB

In addtion, as you can see on the below picture, the cercle is not properly align with the design. Do you have a solution to make the circle at the top of the place where I am hoovering?

Screenshot 2021-09-13 at 16.44.41
Screenshot 2021-09-13 at 16.44.411086×994 41.5 KB

Many thanks for your time,

5

Also, do you know how to make it work only on desktop and not smaller screen such as Ipad and mobile, please?

6

Hi there,

Is anyone know how to make the feature only works on desktop and not on a smaller screen, please?

In addition, is there is a way to align the loop with the design. I would like the loop to “zoom in” on the place hoovered. I don’t want to be shift on the side like the above picture as we can’t see the entire design of the product.

Many thanks for your help,

7

Hi @joejola,

I hope you are well.

I am reaching you to know if you know how to remove the “zoom-in” on the mobile version as there is no clear indication in the video you shared with me.

In addition, as you can see in the Youtube video, the loop is hoovering the place the users focus on (attached picture). In my case, the loop is not at the top of the place the user would like to hoover (attached picture). Consequently, we can’t see the all design of the product in a granular way too. Please any recommendation would be really appreciated.

Many thanks for your time,
Aurélien

Youtube Video loop
Youtube Video loop1660×830 123 KB

Website loop
Website loop1042×954 46.9 KB

8

You can hide the Magnify element on smaller breakpoints just like any other element.

Set the Magnify image width and height to 100%.

9

Hi @joejola,

I really appreciated your help on this. I managed to hide the loop on a smaller screen by decreasing opacity from 100% to 0%. Using the hidden element in the Layout section “display” is not working. One problem resolved :slight_smile:

In the meantime, did you have the time to think about the other issue I have with the loop?

Many thanks,
Aurélien

10

Yeah, if you set the magnify image width and height to 100%, it should resolve the off-centered hover.

11

Hi Joseph,

I applied your suggestion but it doesn’t change anything.

See below what I did:
→ under custom code: set up magnifiersize: [100, 100].
→ under the panel section : image with magnify class is set to 100% width and 100% height.

Do you know what can produce this issue?

Many thanks for your time given,

12

Could you give me an update, please?