Zoom on mouse over (hover) in product page - Brooklyn 2018

Men_s_Conglomer
Shopify Partner
5 0 0

How do I implement what I have just stated on the title.

- I need it on our product pages where it should zoom whenever the mouse cursor hovers over the product picture.

- And should work as stated even after switching variant selections.

 

Please help us.

Store PW: BetaCustomer

 

#ConglomerateMan
0 Likes
Magic_Toolbox
Shopify Partner
55 0 0

If you're happy to pay for it, the best solution is to install Magic Zoom Plus. The user experience is more invigorating than the default zoom tool and Magic Zoom Plus has a powerful full-screen view on click.

The app also supports switching images with product variants.

https://apps.shopify.com/magic-zoom-plus

It's the highest rated product image app on Shopify. We're the creators. Our team provides free support to configure the app if it doesn't work immediately on your store.

Gorgeous image apps for Shopify - zoom, enlarge, magnify, spin, slideshow.
0 Likes
JCezet
Tourist
4 0 3

and what if I'm not happy to pay for it? it seems that JQuery Zoom is already in the Brooklyn theme..

Probably you ve also found this famous zoom tutorial: https://easycodeguide.com/add-zooming-function-shopify-theme.html

but I'm stuck with pasting script (point 5). if I do it in theme.liquid and then /head/ section - it doesn't work :/  I would make a guess that it is colliding with the scrolling function a few lines above:

 

code.JPG

 

... so if anyone knows - speak up please! 

taylormcgee
Explorer
56 2 9

@JCezet I figured it out. 

 

Paste this code at the bottom of your Asset> theme.scss.liquid file 

.product-single__media-flex-wrapper {
&:hover,
a:focus > & {
@include transform(scale(1.20));
}

.product__image-wrapper--empty & {
cursor: default;
}
}

 

SvePapp
New Member
5 0 0

That just enables a janky looking zoom that doesn't inspire trust.

0 Likes