Magento 2: How to Show Product Magnification/Zoom in Product View Page

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?

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  :

<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.

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?