0

I installed magento lattest veriosn on local server (xampp). But i would like to add zoom for product images same as magento 1.

How to enable zooming on product page ??

thanks

1

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.

  • Its not working for me – Teja Bhagavan Kollepara Sep 13 at 9:35
  • What's problem ? You've custom theme or what ? – Vivek Sep 13 at 11:06
  • Yes i am using porto theme, i used path /app/design/frontend/Smartwave/porto/etc/view.xml – Teja Bhagavan Kollepara Sep 14 at 4:07
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy