image too large

Shopify Discussion
,
1

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

2

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

3

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.

4

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

5

Hi, this did not work

6

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.