how to make pop up image smaller

Store Design

Topic summary

A user seeks help adjusting product page image popup sizes that appear too large on desktop (requiring scrolling) and too small/off-center on mobile devices.

Multiple CSS Solutions Provided:

Several developers offered code snippets to resolve the issue:

  • Option 1: Custom CSS added to theme.liquid that controls modal dimensions and removes excess whitespace
  • Option 2: Modification to section-main-product.css setting popup width to 25% on desktop screens (min-width: 750px)
  • Option 3: Alternative theme.liquid code targeting both desktop and mobile responsiveness

User Feedback:

The original poster tested at least one solution but rejected it due to excessive white space around the image.

Status: The discussion remains open with multiple alternative solutions proposed but no confirmed resolution marked. All solutions involve adding CSS code to theme files, with variations in approach and styling outcomes.

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

Hi, could you help me adjust the image popup size on the product page?
On laptop, it’s too big and people have to scroll.
On mobile, it’s too small and sometimes off-center.
I want it to show the full image properly on all devices — not too big, not too small.

Example site is https://saladtee.store/products/vegan-definition-tee

Screenshot 2025-06-13 at 1.05.30 PM.png
Screenshot 2025-06-13 at 1.05.30 PM.png2940×1664 284 KB

2 Likes
2

Hello @Senku

Please share store url and password if it is password protected.

3

Hey @Senku

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1749795265696.png
Moeed_0-1749795265696.png1446×878 47.5 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

thanks but i don’t wanna have that much white space

1 Like
5

Hello @Senku
Go to online store ----> themes ----> actions ----> edit code ----> assets —> section-main-product.css
add this code at the end of the file and save.

@media screen and (min-width: 750px) {
.product-popup-modal__content {
width: 25%;
}
}

result

42.png
42.png565×568 110 KB

If this was helpful, hit the like button and accept the solution.
Thanks

6

Try this code instead

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

7

Hello @Senku

Try this CSS to adjust the popup for both desktop and mobile devices.

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag

Result:

screenshoteasy (38).png
screenshoteasy (38).png1297×625 354 KB

Screenshot (3).png
Screenshot (3).png361×557 43.2 KB

8

Hi @Senku ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!