When I click on my products to open in a lightbox, the lightbox images are wayyy too large (fills the entire page). Is there a way to adjust the size of the lightbox pop-up image? Thank you so much!!
Topic summary
Main issue: In Shopify’s Dawn theme, product images opened in the lightbox appear excessively large, filling the screen.
What worked for the OP: Adding custom CSS to theme.liquid (above ) to limit the modal’s width and center it: target .product-media-modal with a max-width (e.g., 900px) and margin: auto. The OP confirmed success and also shared centering-related CSS they used. Code snippets are central to the solution.
Alternative perspective: Another participant recommends resizing source images (pixel dimensions/file size) for performance, noting code-only resizing doesn’t reduce file weight. Bulk tools (e.g., FastStone) were suggested, though this requires re-uploading images.
Open questions/new issues:
- Some users report the lightbox still appears left-aligned and ask how to fully center it.
- Requests for different sizing behavior for landscape vs. portrait images (control by longest edge).
- On mobile, the lightbox remains too large for some users and needs separate adjustments.
Status: Partially resolved for the original poster with CSS. Several follow-up concerns (centering, orientation-specific control, mobile sizing) remain unanswered/ongoing, with some requests for store URLs to diagnose further.
1 Like
Hi @velvet23
I hope this solution will works. feel free to text me back if you have any question.
Please follow below steps
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above tag
4 Likes
Hi @velvet23 ,
Would you mine to share your URL website? Thanks!
Hi @velvet23
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
This worked! Thank you sooo much, I was going crazy trying to figure it out 
float: left;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
1 Like
If your images are that big, you might just want to make your images smaller, by adjusting the pixel size of the file itself. What is the actual file weight, in kb? A large file is also probably slower to load. Just changing the pixel size in the code, doesn’t make the file smaller, it just renders it that way (sorry Jessica Rabbit).
There are free file resizers (even a Windows power tool) that will bulk resize your images. I prefer FastStone image resizer. It can also rename your images too. Set your image width to the width you want (900px or a standard size) and it will adjust the height to keep your image aspect ratio.
The selected solution, while not incorrect, is not necessarily the best way to go.
Of course the biggest issue would be having to reupload the images. Depending on the size of your store, that may or may not be the easiest way to go.
Thank you!!!
Thank you so much !!! i was crazy too.
Thank you!
Do you know how to centre the pop up? Mine is coming up to the left of the screen…
1 Like
Did you ever get a solution to this? When I use the above code it still always shows up on the left of the screen 
Is there a way to have different controls for landscape and portrait images? Works great for landscape not so much for portrait. Something like control over the longest edge?
Its not the image itself that OP is having an image with, if it was, you’d be absolutely correct 
In this case however, its the image lightbox size that is enormous. Even if you upload an original file of e.g. 300 x 400 px clicking on it will open a lightbox version that more or less fills the screen.
Hi this worked for me, but on mobile, the lightbox images are still way too big. How can I adjust the lightbox image when clicked on for mobile as well?? Please help!