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

Solved

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

LucchiCamma
Excursionist
17 0 6

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 🙂

 

Screenshot 2022-09-01 182019.png

Accepted Solution (1)

diego_ezfy
Shopify Partner
2967 571 901

This is an 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

View solution in original post

Replies 5 (5)

diego_ezfy
Shopify Partner
2967 571 901

This is an 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
Excursionist
17 0 6

Thank you so much, appreciate this greatly.

 

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

websensepro
Shopify Partner
1053 149 157

Checkout this video tutorial for zoom on hover 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
passot
Tourist
3 0 0

Hello,

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

Thank you

 

Sébastien

 

3rdDay
Excursionist
21 1 2

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!

Asa (3rd Day)
3rdday.co.uk