How can I change the default zoom in the product page to a lightbox?

[Rahul55]

Hi Experts,

I need to change the default zoom in the dawn theme to a lightbox when I click on it. The default zoom function enlarges the product to the entire screen and looks very bad. It requires clicking on the next image to view the product, which is not ideal. Thanks for your help in advance.

This is the Live site:

alayabystage3.com

[Dan-From-Ryviu]

Hi @Rahul55 

Dan here from Ryviu: Product Reviews & QA. 

You can change it from Online Store > Themes > Customize > Products > Default product

[Raj-webdesigner]

What do you want with zoom do you want to remove zoom or minimize the effect of zoom

If You Zoom effect Remove Add This Css in your Base.css File 

.card:hover .media.media--hover-effect>img:first-child:only-child, .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child{
  transform:none !important;
}

And You Need minimize the effect of zoom So Add This css In Your Base.css File

.card:hover .media.media--hover-effect>img:first-child:only-child, .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child{
  transform:scale(1.01) !important;
}

And Do you Have Show Secound Image In hover on product Than show .
Follow My Step:

This Check box is Show a Secound Image In next Product.

[Rahul55]

I understood this step, but it doesn't work in mobile view. I would need something similar to this

As you can see the navigations here after clicking the product image in the product page. But dawn doesn't have this feature.