Stop Cropping! How to Fix Product Images Getting Cut Off on Shopify Desktop

Ever had that frustrating moment when your beautiful product images look perfect on mobile, but then you check your Shopify store on a desktop, and BAM! – half your product is gone, cropped out of existence? It’s a super common headache, and it’s exactly what one store owner, NickyZabetian, ran into recently on the Shopify Community forums. Luckily, the community jumped in with some fantastic insights and fixes!

The Case of the Cropped Desktop Images

NickyZabetian posted about a product image with text serving as their main homepage header on kinisium.com. On desktop, this image was getting cut off, hiding parts of their product. They weren't looking to crop the photo themselves but wanted it to resize properly, staying centered and showing the product in its entirety. This is a classic responsiveness issue, and it's something many of us have wrestled with.

Here’s what NickyZabetian was seeing:

Why Is This Happening? Common Culprits

Before diving into fixes, it's good to understand why images misbehave. As tim_tairli pointed out in the thread, sometimes it’s an outdated theme applying an unwanted animation or transformation (like a transform: 130%) that scales the image beyond its container. Older themes, especially those around version 2.x.x when current versions are 5.x.x, might not handle modern browser responsiveness as gracefully. Chloe.paker also spotted a potential "top black bar" issue that could be contributing to the cut-off, suggesting specific CSS could resolve it.

However, the most common underlying cause, and the one most community members honed in on, is how images are told to fit within their designated space. By default, many themes might use object-fit: cover, which scales the image to fill the container, cropping any excess. What we want for full product visibility is object-fit: contain.

The Heroic CSS Solution: object-fit: contain

This is where the magic happens! The object-fit CSS property is incredibly powerful for controlling how an or element should resize to fit its container. When you set it to contain, the image scales down to fit entirely within the content box, preserving its aspect ratio. If the aspect ratio of the image doesn't match the container, you'll see "letterboxing" (empty space) around the image, but your entire product will be visible – exactly what NickyZabetian needed!

Option 1: Targeting Specific Image-with-Text Sections

Moeed provided a clear, step-by-step approach that proved effective for NickyZabetian. This method involves adding a simple style block directly into your theme.liquid file. This is great for targeting specific sections like the "image with text" block that NickyZabetian mentioned.

Here’s how to do it:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your current theme, click Actions > Edit Code.
3. In the left-hand sidebar, find the theme.liquid file under the Layout directory.
4. Scroll to the very bottom of the theme.liquid file. Just above the closing tag, paste the following code:

5. Click Save.

Moeed even shared a "before and after" image of the fix, which is super helpful:

Option 2: A More Comprehensive Selector (devcoders' Suggestion)

If Moeed's specific selector doesn't quite hit the mark for your theme or section, devcoders offered a slightly broader set of selectors that might be more effective:

.image-with-text__image .media,
.image-with-text__image picture,
.image-with-text__image img {
object-fit: contain !important;
}

You’d follow the same steps as above, just swapping out the CSS inside the