Make the "zoom" on product images smaller for Dawn 2.0

[LucchiCamma]

Hello all, hope you are well. How can I make the zoom feature smaller when zoomed in on a product image for the Dawn theme?

or

Replace current zoom feature with a "hover zoom".

Thank you 🙂

[diego_ezfy · Accepted solution]

@LucchiCamma

Unfortunately there is not a simple way to go about this. You can try limiting the images' height:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.product-media-modal__content,
.product-media-modal__content>*{
    max-height: 80vh !important;
}

Alternatively, there are copy/paste solutions that automatically creates a slider with the zoomed images (and consequently fixes their height). Here is a live example and here is the tutorial.

I hope it helps.

Kind regards,
Diego

[LucchiCamma]

Thank you so much, appreciate this greatly.

If anyone has information on hover zoom, please hoot us here! 🙂

[websensepro]

Checkout this video tutorial for zoom on hover 

[passot]

Hello,

Where can i find "Asset > base.css"? In wich part of the code can i found it?

Thank you

Sébastien

[3rdDay]

The easiest way to find it is by searching. Go to Online store > themes > ... > edit code > search for base.css and then within that file you can always press ctrl/command + F to search for a portion of the code you're looking to modify. Hope this helps!