0

I installed Magento's latest version on the XAMPP server. But, I'd like to add zoom for product images the same as Magento 1.

How to enable zooming on the product page?

2

You have to create custom theme and add below code to your view.xml file.

Code to enable magnifier:

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

Check here if you have no idea regarding how to create custom theme.

|improve this answer|||||
  • Its not working for me – Teja Bhagavan Kollepara Sep 13 '19 at 9:35
  • What's problem ? You've custom theme or what ? – anonymous Sep 13 '19 at 11:06
  • Yes i am using porto theme, i used path /app/design/frontend/Smartwave/porto/etc/view.xml – Teja Bhagavan Kollepara Sep 18 '19 at 3:38
0

Create your custom theme and put view.xml under app/design/frontend/Vendorname/Themename/etc

Copy that file form magento installation/vendor/magento/theme-frontend-luma/etc/view.xml

In that file you can find following 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>

Make this <var name="enabled">false</var> true so it should be

<var name="enabled">true</var>
|improve this answer|||||