Please visit this blog post if you are looking for free Product Zoom Magento Plugin please note no support is provided for free plugin. Please check the features difference below between free and paid plugin. Link of pro version from Magento Marketplace.
Features | KTree Product Zoom Pro | KTree Product Zoom Free Plugin |
Types of Zoom | Provided three types of zooms (Window, Lens and Inner) So admin can select the zoom type. | Provided only single type of zoom (Window) |
Mouse Scroll can be Used? | User can also use mouse scroll when hovering on the product image,based on the scroll the zoom image in the window ill 'zoom in' or 'zoom out' accordingly | Not provided |
Lens Shape Options | Provided Lens Shape (Square and Circle) | Not provided |
Different Cursor Options | Provided Cursor type option (Default, Pointer and Cross hair) | Not provided |
Double Tap for Mobile Image | User is given option to double tap for Zoom Image. | Not provided |
Different Settings for Mobile and Desktop | Differentiated Mobile and Desktop settings to have a clear idea for admin | Not provided |
Mobile Hints | In mobile Provided Hints (Touch to full screen and Double tap to zoom), So user can zoom it accordingly | Not provided |
Responsive | Yes | No |
Easing | Yes | No |
Magento Version Support | 2.0, 2.1.X and 2.2.X | Tested only in 2.0X |
| Click Here | Click Here |
Features
- Product Zoom Pro provides ability to magnify product images in Product detail page. Plug in also comes with lots of settings to make image gallery beautiful. E.g: magnify position,lens zoom, inline zoom support.
- Customers can instantly view details of product without clicking on images and wait for the popup. Using JavaScript, the zoomed image shows on mouse over when the user hovers on the small image.
- Very easy to configure it fits your existing magento theme and it works in all major browsers, including the iPad and iPhone.
- User can customize for desktop & mobile various zoom settings such as Zoom Magnifier type, Position, Lense Shape etc as in the above screen from the backend configuration.
Frontend Functionality
Desktop
Zoom for Product image in product detail page, can be shown in three different ways Window Zoom, Inner Zoom, Lens Zoom. This is named as zoom type in the backend configuration. Let's look at them in detail.
Window Zoom
- In Window Zoom the selected part of the image is displayed in zoom in window besides the original image as in the below picture.
- Window zoom type zoom can be customized additionally with the following options
- Zoom window height and width.
- Tint effect with tint color and tint opacity.
- Zoom window position.
- Zoom effect (Fade in/Fade out, Easing, Mouse wheel).
- User can also use mouse scroll when hovering on the product image, based on the scroll the Zoom Image in the window will ‘zoom in’ or ‘zoom out‘ accordingly. Please check our video in this extension to see this effect.
Inner Zoom:
- Using Inner Zoom Option, the Zoom Image is displayed at the original image area when the user hovers on the Product Image. Once the user hovers back from the image area, the original image is displayed.
- User can also use mouse scroll when hovering on the product image, based on the scroll the Zoom Image in the window will ‘zoom in’ or ‘zoom out‘ accordingly. Please check our video in this extension to see this effect.
- Inner Zoom type can be customized additionally with the following options
- Zoom effect (Fade in/Fade out, Easing, Mouse wheel)
Lens Zoom
- In Lens Zoom a Lens is displayed on the original product image, and the lens ‘Zoom In’ image of the selected area is displayed.
- Lens Zoom type can be customized additionally with the following options.
- Zoom lens type (Circle or Square).
- Zoom lens size.
- Zoom effect (Fade in/Fade out, Easing, Mouse wheel).
- User can also use mouse scroll when hovering on the product image, based on the scroll the Zoom Image in the window will ‘zoom in’ or ‘zoom out‘ accordingly. Please check our video in this extension to see this effect.
Product Zoom Pro Settings for Desktop
- Login to the Magento Admin as an administrator.
- Navigate to Stores -> Configuration -> Ktree Extensions -> Product Zoom
Mobile
In mobile since the mouse is not available, the functionality of Product Zoom Pro Plugin is different from the desktop. Please see below steps how the Zoom works in mobile
- Step 1: In Mobile if we Navigate to product detail page (PDP), on product image Hint “touch to full screen “ is displayed. If the user taps on that product image, the product image is displayed in full screen
- Step 2: User now sees another Hint “Double tap to zoom”, and if User does a Double Tap, the ‘Zoom In’ Image is displayed.
- Step 3: User now sees ‘Zoom in’ Product Image after double tap on the product image.
Product Zoom Pro Settings for Mobile
- To change the text Hint which will be displayed on the image the configuration is store → Configuration → KTree extensions → Product Zoom Pro → Mobile view settings