If you want to add product image zoom functionality on the product detail page of Magento, then I am going to show you some steps for this.
Using those steps, you can zoom the image of the product details page.
For this, I have also developed a custom extension. You have to install it in your store.
Basic configuration for zoom functionality is also given in the admin.
You can change the zoom configuration of the images as per your need.
Like how many pixels you have to zoom in.
How much zoom is to be shown on the left-right side. For all these also configuration has been given in admin.
Magnifier in Magento 2 - Product Image Zoom
Magento 2 has a default magnifier widget that allows developers to make changes as per their needs.
You can customize the images by zooming in the display option in 100% scaled size
The product detail page has product gallery images that use a magnifier widget image gallery for zooming in on the product images.
By default, it's not disabled in the Magento 2 but you can enable it in your local theme view.xml configuration file.
<script type="text/x-magento-init">
{
"<element_selector>": {
"mage/gallery/gallery": {
"data": [{
"thumb": "<small_image_url>",
"img": "<small_image_url>",
"full": "<small_image_url>",
"caption": "<message>",
"isMain": "<true/false>"
}],
"mixins": ["magnifier/magnify"],
"magnifierOpts": {
"enabled": <true/false>,
"eventType": "<hover/click>",
"width": <number>,
"height": <number>,
"top": <number>,
"left": <number>,
"fullscreenzoom": <number>,
"mode": "<outside/inside>"
}
}
}
}
</script>
How to Enable Magnifier in Magento 2
In order to enable the magnifier widget in Magento 2 theme, you have to go into the view.xml in your local theme configuration file and then enable the Magnifier widget.
<Your_theme_directory>/etc/view.xml
Now you have to change content like the below code.
<var name="magnifier"> <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) --> </var>
Now the view.xml file will have the content
<var name="magnifier"> <var name="fullscreenzoom">20</var> <!-- Zoom for fullscreen (integer) --> <var name="top"></var> <!-- Top position of magnifier --> <var name="left"></var> <!-- Left position of magnifier --> <var name="width"></var> <!-- Width of magnifier block --> <var name="height"></var> <!-- Height of magnifier block --> <var name="eventType">hover</var> <!-- Action that activates zoom (hover/click) --> </var>
Product Image Zoom Functionality
As you can see in the image, after installing the wishusucess product images zoom extension, you have got the functionality of image zooming added automatically.
Now if you want to disable it, you can also disable it from admin.
If you want to change any kind of resolution, pixels, etc., then all that is given in the admin configuration.
Read More: Top 10 Smart Search Extensions for Magento 2 Store in 2022
Window Zoom
However, by default, you will get this set as soon as you install the extension.
But window zoom allows you to adjust the position of the image zoom.
Change Configuration From Admin
As you can see in the admin configuration, there are different configuration options as per your requirement.
You can also disable the model or make as many changes as you need.
As soon as the customer's mouse moves over the product images, this image will automatically zoom in and appear.
You can implement the product image zoom function by using one of the methods mentioned above.
Conclusion
To add the product image zoom functionality, you have the magnifier widget by default, which you can implement on the detail page by implementing the zooming function.
Another option is to implement a custom extension and install it. and that custom extension you can find it here.
Recommended Posts: