image too large

Shopify Discussion
,

Topic summary

A Shopify store owner is trying to reduce the size of product images when they expand in a popup modal on the product page.

Initial Solution Attempted:

  • One user provided CSS code targeting .media-modal__content img with max-width and max-height values (70vw/70vh) to be added to the theme’s CSS files
  • This solution did not work for the original poster

Follow-up Solution:

  • A more aggressive CSS approach was suggested using !important flags and targeting multiple selectors (.media-modal__content, images, and media elements)
  • Sets fixed dimensions (600px) with object-fit: contain to maintain aspect ratio
  • Includes a note that if this fails, the issue might be related to JavaScript-rendered modals that delay styling application

Current Status:
The discussion remains open—the store owner has not yet confirmed whether the second CSS solution resolved the issue.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

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

1 Like
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.