0

Magnifier is not showing. Option enable set to true.

Settings in my theme: Vendor/MyTheme/etc/view.xml

<var name="magnifier">
    <var name="fullscreenzoom">10</var>  <!-- Zoom for fullscreen (integer)-->
    <var name="top"></var> <!-- Top position of magnifier -->
    <var name="left"></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) -->
    <var name="mode">outside</var> <!-- Zoom type (outside/inside) -->
</var>
0

I was looking in a lot of questions. Solution was simple, just play with settings,specially with numbers.

My theme is extending blank theme, current settings (its also work well with inside mode):

<var name="magnifier">
    <var name="fullscreenzoom">10</var>  <!-- Zoom for fullscreen (integer)-->
    <var name="top"></var> <!-- Top position of magnifier -->
    <var name="left"></var> <!-- Left position of magnifier -->
    <var name="width">20</var> <!-- Width of magnifier block -->
    <var name="height">20</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) -->
    <var name="mode">outside</var> <!-- Zoom type (outside/inside) -->
</var>

Zoom option is not working for me so I added some css:

.magnifier-preview:not(.hidden) {
    zoom: 2;
}

I found that to better not use CSS, but add better resolution Image to product to take this effect.

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.