Magento 2 Product Zoom

Description

Magento 2 Product Zoom is an extension suitable for any e-commerce website, which helps customers can view products clearly and in more detail thanks to the professional product image zoom feature.

This extension displays in 3 styles: window, inner, lens, which allows the website to zoom in or out of the product and set up zoom features quickly and easily. The closer your customers reach your product, the more likely it will be to convert.

How does it work?

1. Zoom product beautifully with 3 zoom types

With Product zoom for Magento 2 website, customers can view detailed pictures of any product on your website. In the admin panel, you can choose zoom types according to your product specifications and requirements. The 3 zoom types can choose is “Window”, “Inner”, “Lens”.

- Window Zoom: Positioning the window can be done by setting a default position and then using x and y offset to adjust. You can also position the window into a container. 

The administrator can customize the size of the Zoom window (width, height) and zoom window offset (x-axis, y-axis) in the admin panel.

- Inner Zoom: the zoom can be placed inside of the image

- Lens zoom: You can use the lens zoom setting to "Magnify the image". The image to the least has been constrained so it tucks underneath the image.

In the admin panel, the Administrators can customize 

• Lens size (used when zoom type set to lens, when zoom type is set to window, then the lens size is auto calculated).
• Lens FadeIn: Set as a number e.g 200 for speed of Lens fadeIn.
• Lens FadeOut: Set as a number.
• Zoom lens: set to false to hide the Lens.
• Lens border: Width in pixels of the lens border.
• Lens Shape: can also be round (note that only modern browsers support round, will default to the square in older browsers).
• Contain Lens Zoom: for use with the Lens Zoom Type. This makes sure the lens does not fall outside the outside of the image.
• Lens Colour: the color of the lens background.
• Lens Opacity: used in combination with lens color to make the lens see-through. When using tint, this is overridden to 0.

2. Product image zoom hover

You can easily zoom the product by rolling the mouse. You can scroll over the image to zoom in closer! Hover over your product image, scroll forward to enlarge product details, scroll back down to reduce zoom. 

To active Product image zoom hover, access the admin panel of Magepow_productzoom, choose “True” in the Scroll Zoom. 

3. Smooth zooming with Easing effect and FadeIn & FadeOut Speed.

FaceIn & FadeOut Speed: You can fade in and out on the Lens, Window

Easing: Set to true to activate easing. Possible values: "True", "False"

Look the frontend

More Features

• Enable/Disable Magepow_Productzoom with one click.
• Choose Cursor: The default cursor is usually the arrow if using a lightbox, then set the cursor to the pointer so it looks clickable - Options are default, cursor, crosshair.
• Support responsive. If you have a theme that changes size, or tablets that change orientation this is needed to be on. Possible values: "True", "False".
• Image Cross Fade: Set to true to activate simultaneous crossfade of images on gallery change. Possible values: "True", "False".
• Customize Border: ZoomBox's Border Size - This must be set here because the border is taken into account for the plugin calculation and Set Outline Color.
• Admin panel easy customizes and configs.
• Customize Tints: You can easily set tints for the zoom, you can set the color and opacity of the tinted overlay to be any value. Tint Color and Tint Opacity.

With a feature-rich system, Magento 2 Product zoom will help your product become more intuitive and beautiful in the eyes of customers.

Pro and Free version

How to use Magen to 2 Product zoom

1. How to install Product Zoom in Magento 2

Product zoom settings

Extract files from the archive.

Deploy files to the Magento2 directory app/code/Magepow/Productzoom Run the following command in the Magento 2 root directory:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento cache:flush

2. Instructions for use Product zoom

See more video documentation:

Get in touch with us!