Taming Tall Images: How to Fix Product Page Layouts on Shopify (Desktop & Mobile)

Hey there, fellow store owners!

Ever uploaded a beautiful product photo, only to find it completely messing up your product page layout? Maybe it's a super tall, thin image that just blows up and takes over the entire screen, pushing everything else down. It’s a common headache, and it’s exactly what one of our community members, Satler, ran into recently. They asked for advice on “resizing images on individual product pages” because some were just “too big.”

Now, “too big” can mean a couple of things. Amlani, another helpful voice in the thread, initially wondered if Satler was talking about image compression – you know, reducing file size to speed up the page. While optimizing image file sizes is super important for SEO and load times (and apps like Nabu Image Optimizer & SEO can definitely help there), Satler's problem wasn't about the file size per se, but rather the image's dimensions and how it was displayed. They had a tall, thin image that was just dominating the page, especially on specific themes like the “Trade” theme Ploqo identified.

The Root of the Problem: Aspect Ratios and Layout

The core issue here is often mismatched aspect ratios. Most Shopify themes are designed to handle images within certain proportions – think squares or standard landscape/portrait orientations. When you throw a super tall, narrow image into the mix, the theme struggles to display it gracefully, often stretching it or letting it expand beyond its intended container.

Two Paths to a Solution: Image Editing vs. Code Snippets

The community discussion really highlighted two main ways to tackle this, each with its own pros and cons.

Option 1: The Gold Standard – Fixing the Images Themselves

Moeed and Karim326 were quick to point out that the most robust, long-term solution is often to fix the images at the source. If you have a tall, thin image that's causing trouble, the best approach is to edit it.

Karim326 eloquently explained why this is often superior:

“The thing that decides it for me: CSS only fixes the product page. That same image also shows in your collection grid, in search results, and in a Google Shopping feed if you run one. Fixing the file fixes all of them. The CSS fixes one page.”

So, what does this look like?

• Reshape and Re-upload: Open that problematic tall photo in an image editor. Place it on a square canvas (e.g., 1200 x 1200 pixels) or a standard portrait size (like 1200 x 1500 pixels), ensuring the main product is centered with appropriate white space around it.
• Use AI Tools: Ploqo even suggested using modern AI tools like ChatGPT Image or Gemini Image to quickly re-frame and re-save your images in a more standard aspect ratio. This can be a huge time-saver!

This method ensures consistency across your entire store and wherever your products are displayed.

Option 2: The Code Fix – When You Have 10,000 Images!

Now, let's be real. If you're like Satler, who mentioned having “around 10,000 pictures,” going back and editing every single one isn't practical. That's where a clever CSS tweak comes in handy.

Moeed offered an initial CSS snippet:

However, Satler quickly found a problem:

This code shrunk all images in the gallery, not just the problematic tall ones, and even affected thumbnails. Karim326 correctly identified that the problem was excessive height, not width, and that this solution was too broad.

The Winning CSS Solution (Desktop & Mobile)

Ploqo then stepped in with a more targeted and elegant CSS solution that Satler confirmed worked beautifully for their store. This code specifically caps the height of tall product images on both desktop and mobile, without affecting square or wide photos, ensuring they display whole and centered.

Here’s how to implement it:

1. Duplicate Your Theme (Crucial First Step!): Before making any code changes, always, always duplicate your live theme. Go to Online Store > Themes, find your current theme, click the “…” (three dots) button, and select “Duplicate.” This creates a safe backup in case anything goes wrong.
2. Access Theme Code: In your duplicated theme, click the “…” button again and choose “Edit code.”
3. Open theme.liquid: In the file explorer on the left, navigate to the Layout folder and click on theme.liquid.
4. Paste the Code: Scroll to the very bottom of the theme.liquid file. Just above the closing tag (you'll see it near the end), paste the following CSS block:

5. Save and Preview: Click “Save” in the top right. Then, go back to your duplicated theme and click “Preview” to see the changes. Check your product pages, especially those with tall images, on both desktop and mobile.

Before and after of a tall photo capped on mobile, thanks to Ploqo's solution.

The padding-top: min(125%, calc(100% / var(--ratio, 1))) !important; line is the key here. The 125% value acts as a maximum height cap. If you want your tall images to be a bit shorter, you can lower that percentage (e.g., to 100% or 75%). If you want to allow them to be slightly taller, you can increase it. The object-fit: contain !important; ensures the entire image is visible within that capped space, without cropping, and centered.

This CSS approach is a fantastic workaround when you have a massive catalog of images and need a site-wide fix without manual editing.

Wrapping It Up

So, whether you're tackling a few problematic images with a quick edit using an AI tool or implementing a site-wide CSS fix for thousands of products, the Shopify community has shown us there are effective ways to keep those product pages looking sharp. Remember, consistency in your product imagery not only makes your store look more professional but also significantly improves the shopping experience for your customers. Always test any code changes in a duplicated theme first, and don't hesitate to jump into the Shopify forums if you hit a snag – there's always a helpful expert like Ploqo or Karim326 ready to lend a hand!