Hello Magento Friends?,
Today I will help you How to show product magnification/zoom in product view page for your Magento 2 store. Also, check out the last blog published How to add Dynamic CSS Using Page Assets in Magento 2. Let’s Dive In?
Contents
In online business, the product images matter a lot. The images should be clear to view from the customer’s perspectives. And including the zoom option would be better to recognize the product by the customers. This will help you in converting the users to the customers and also helps in improving customer experience.
Step 1: Firstly, navigate to the below path and change code accordingly.
app\design\frontend\Themes\Yourtheme\etc\view.xml
And find below code :
<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 atcivates zoom (hover/click) --> <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) --> <var name="mode">outside</var> <!-- Zoom type (outside/inside) --> </var>
And replace below code :
<var name="magnifier"> <var name="fullscreenzoom">10</var> <!-- Zoom for fullscreen (integer)--> <var name="top">500</var> <!-- Top position of magnifier --> <var name="left">650</var> <!-- Left position of magnifier --> <var name="width">200</var> <!-- Width of magnifier block --> <var name="height">200</var> <!-- Height of magnifier block --> <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) --> <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) --> <var name="mode">outside</var> <!-- Zoom type (outside/inside) --> </var>
That’s it. After changing the code run Magento clean and flush command.
Therefore by applying the above steps you will be able to show product magnification/zoom in the product view page. If any problems I will be happy to hear in the comment section below. Do share the article with your developer friends.
Happy Coding?
In this guide, we'll explore how to integrate ChatGPT, an AI-powered chatbot, with a Laravel…
In the world of business, understanding financial metrics is crucial for making informed decisions and…
Welcome to the MageComp Monthly Digest, where we bring you the latest updates, releases, and…
In this era, businesses are always on the lookout for ways to engage with their…
Managing a Shopify store efficiently involves keeping your product catalog organized. This includes removing outdated…
E-commerce has transformed the way consumers shop for products and services and interact with businesses.…
View Comments
Hi there i hope you're doing well.
please let us know how can i enable zoom functionality on mobile.
Thanks.
The blog is for the desktop view, for the mobile you need to make customizations.
hi it is not working
What is the error you are facing, specify in some more details.
Kindly confirm that it does not conflict with other extension or customization into your theme.