On mobile, there are 4 main approaches

  1. No zoom feature, but users can pinch to zoom in the page, which also zooms in the product image.
  2. Allow to zoom within the product gallery area (and it does NOT zoom the rest of the page)
  3. Opening an overlay panel above the page with all the larger images (with or without thumbnails of other images) in which you can pinch and double-tap to zoom in and out.
  4. Opening an overlay panel with all the larger images placed one after the other in which you can pinch to zoom in more

 

On desktop…

Since mouse hover is possible, then I recommend zooming in the photo whenever users hover their mouse on it (the part of the image they’re hovering on).

 

IKEA’s zooming approach is great

On mobile

When you tap on the product image, it also shows the same full-screen view as on desktop, with all the images which you can easily zoom in by pinching.

While that’s a great user experience, that view on mobile is particularly buggy and not fluid. So if it was better implemented, it would be near-perfect. The other recommendation I’d make, besides fixing the pinching on mobile, would be make the X in the corner always visible, even when zoomed in.

 

On desktop 

When you hover your mouse over the product image, it shows a ‘+ lense’ icon. When you click on the image, it opens a full-screen view of the image, with a X in the corner to close it.

You can scroll down with the mouse to see all the zoomed-in images.

 

Avoid automatic zoom

An automatic zoom can be quite annoying. Let users decide when they’re ready to see the zoomed in version. If you can, test both, as a “click to zoom” functionality is likely to increase your CTR.

 

Which approach did you opt for?

Did you test it properly to make sure it provides a smooth experience to your shoppers?

 

Examples