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
Introduction:
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.
Steps to show product magnification/zoom in product view page:
Step 1: Firstly, navigate to the below path and change code accordingly.
app\design\frontend\Themes\Yourtheme\etc\view.xml
And find below code :
|
1 2 3 4 5 6 7 8 9 10 |
<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 :
|
1 2 3 4 5 6 7 8 9 10 |
<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.
Conclusion:
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?
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.