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

Rahul55
New Member
5 0 0

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

 

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
7729 1507 1515

Hi @Rahul55 

Dan here from Ryviu: Product Reviews & QA. 

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

Screenshot 2024-04-08 at 14.10.21.png

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Raj-webdesigner
Shopify Partner
253 57 60

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:

Rajwebdesigner_0-1712561187305.png

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

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Rahul55
New Member
5 0 0

Rahul55_0-1712569622424.png

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

 

Rahul55_1-1712569762177.png

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