image too large

[Ecomowner]

Anyone know how to make images in product page smaller when you click on them to pop up and expand

[moshbray]

do you mind sharing URL of the product OR you do a video for clarity. and this can be just an effect

[Ecomowner]

Hello here is the url
https://zenfactr.com/products/vibrating-massage-ball-for-muscle-pain-relief

[Kudosi-Carlos]

Hello @Ecomowner 

1. Go to your Shopify Admin → Online Store → Themes.
2. Click “Edit code” on your active theme.
3. Find and open this file: assets/component-product.css (or base.css, depending on theme version)
4. Scroll to the bottom and add this custom CSS:

/* Resize product image popup modal */
.media-modal__content img {
max-width: 70vw; /* Controls how wide the image is on desktop */
max-height: 70vh; /* Controls height */
object-fit: contain;
}

Adjust the 70vw and 70vh to suit your needs. lower numbers = smaller image.

[Ecomowner]

Hi, this did not work

[moshbray]

If the previous CSS didn’t work, it might be due to how your theme handles modal images. Try this more specific CSS with !important to override the modal image size:

.media-modal__content,
.media-modal__content img,
.media-modal__content .media {
max-width: 600px !important;
max-height: 600px !important;
width: auto !important;
height: auto !important;
margin: auto;
object-fit: contain;
}

Add it at the very bottom of your base.css or component-product.css file and check again. Let me know if it still doesn’t show up might be worth checking if the modal is JS-rendered in a way that delays styling.