How to enable zooming on product page? [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 1 year ago.

Improve this question

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?

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

Answer 2

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>