In my product page detail when i try to hover the product image there's only white box with low opacity overlaying at the top of my image like this :

enter image description here

Usually in Magento 2, when hovering the image it will zoom in the part where the image is hovered like this:

enter image description here

I've tried to edit view.xml in my app/design/frontend/theme, but i can't get it to work, here's the code:

<var name="magnifier">
            <var name="fullscreenzoom">5</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">true</var> <!-- Turn on/off magnifier (true/false) -->
  • 1
    Image size should be large. Please check first image size. – Suresh Chikani May 4 '17 at 5:14
  • @SHPatel my image size is 1200x1200 – Shell Suite May 4 '17 at 6:03
  • I am facing the same issue. Check the css for class "magnifier-preview" in firebug. The 'left' could be out of page. If you reduce the left margin you will see the zoom is working. However I am not able to figure out how to fix this issue. – Sejal Shah Jul 5 '17 at 12:53
  • do you use a custom theme? Did you make any changes to layout, template or css/js? – juhanix Mar 20 '18 at 14:18
  • How to add this file in custom module ? – Mahi M Mar 4 '19 at 7:21

Change below var :

<var name="width">1200</var> <!-- Width of magnifier block -->
<var name="height">1200</var> <!-- Height of magnifier block -->

Your Answer

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

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