Products mobile zoom

Store Design
,
1

Hey,

is there a way that i can change the mobile zoom from the dawn theme (zoomed in)

IMG_8196 2.PNG
IMG_8196 2.PNG1170Ă—2532 219 KB

to this:

IMG_8197.jpg
IMG_8197.jpg1170Ă—2100 90 KB

website: hoodlovevintage.de

pw: hoodliebe2024

2

Hi @HoodLove

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
product-modal[open] .product-media-modal__content > img {
    width: 100% !important;
}
}

image (11).png
image (11).png346Ă—759 74.7 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like
3

Bildschirm­foto 2024-11-15 um 16.33.52.png
Bildschirm­foto 2024-11-15 um 16.33.52.png716×1204 273 KB

Hey, thank you that helped.

Do you maybe also know how i can remove the border of every product on my store and the “zoom option”?

Thanks

4

Hi @HoodLove

You can adjust the code below in the Custom CSS field I shared above as well.

Here is the code:

@media screen and (max-width: 768px){
.product-media-container.media-type-image.media-fit-cover.global-media-settings.gradient {
    border: none !important;
}
modal-opener.product__modal-opener.product__modal-opener--image > span.product__media-icon {
    display: none !important;
}
}

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team