How To

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?

Click to rate this post!
[Total: 10 Average: 4.7]
Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate ?️ Certified Magento Developer?‍?. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.?

View Comments

  • Hi there i hope you're doing well.
    please let us know how can i enable zoom functionality on mobile.
    Thanks.

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

Recent Posts

Magento Open Source 2.4.8-Beta Release Notes

Magento Open Source 2.4.8 beta version released on October  8, 2024. The latest release of…

2 days ago

How to Create Catalog Price Rule in Magento 2 Programmatically?

Hello Magento Friends, Creating catalog price rules programmatically in Magento 2 can be a valuable…

2 days ago

Top 10 Tips to Hire Shopify Developers

As the world of eCommerce continues to thrive, Shopify has become one of the most…

5 days ago

Managing Browser Events and Navigation in Shopify Remix: useBeforeUnload, useHref, and useLocation Hooks

Shopify Remix is an innovative framework that provides a streamlined experience for building fast, dynamic,…

5 days ago

Ultimate Guide to Hiring a Top Shopify Development Agency

Building a successful eCommerce store requires expertise, and for many businesses, Shopify has become the…

6 days ago

How to Choose the Best Shopify Development Company?

In today’s digital landscape, e-commerce has become a cornerstone for businesses looking to thrive. Among…

6 days ago