I've added below code in view.xml file in my custom theme:

<var name="magnifier">
            <var name="fullscreenzoom">2</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top">0</var> <!-- Top position of magnifier -->
            <var name="left">0</var> <!-- Left position of magnifier -->
            <var name="width">300</var> <!-- Width of magnifier block -->
            <var name="height">300</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) -->

But the magnifier doesn't work. It's showing overlay image after hovering over product image but it's not zooming the image.

Any help would be appreciated.

1 Answer 1


Very silly mistake. You just need to keep top and left values blank as below:

<var name="top"></var> <!-- Top position of magnifier -->
<var name="left"></var> <!-- Left position of magnifier -->

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.