How to Adjust Zoom Level on Products – Baseline Theme

Store Design
,
1

How to Adjust Zoom Level on Products in Baseline Theme specifically?

I want to keep the Zoom, meaning people can click on the image, but I don’t want the second Zoom to be so much. It is tooooo Zoomed in.

URL: https://contrakidsmutiny.com/collections/new-arrivals/products/human-revival-t-shirt

See above and click on one of the images and you can see, thanks.

2

Hi @MJ82

To adjust the zoom level on product images in the Baseline theme, you’ll need to modify the theme’s CSS or JavaScript. Specifically, you can target the zoom functionality applied to the product images and reduce the zoom effect.

  1. Go to Online Store > Themes > Actions > Edit Code: https://prnt.sc/6SGefAtH-78z
  2. Look for Assets > theme.css or theme.scss.liquid.
  3. Add custom CSS to control the zoom level:

.product-single__photo-wrapper .zoom {

transform: scale(1.2); /* Adjust this value to control zoom intensity */

}

Note: Modify the scale value to control the zoom level. Test it to ensure it suits your preference.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy

3

Thanks Daisy, I added the code but when I change the 1.2 value for instance to 1.03 to lessen the Zoom, nothing changes. Am I changing the numerical value wrong?