Why Shopify Themes Crop Your Product Images

How a Shopify theme decides what to crop

Almost every modern Shopify theme renders product cards the same way. The theme reserves a box with a fixed aspect ratio, usually square (1:1) or portrait (4:5 or 3:4), so that every card in a grid lines up. Your image is then placed inside that box using one of two CSS behaviours:

• Cover (object-fit: cover): the image is scaled until it fills the whole box, and anything that spills over the edges is cut off. No empty space, but parts of the product can vanish.
• Contain (object-fit: contain): the image is scaled until it fits entirely inside the box, and the leftover space shows the card's background. Nothing is cut off, but you get bands of empty space if the shapes do not match.

Most themes default to cover on collection grids because it looks tidier in the theme demo, where every photo was shot to the same shape. Your catalogue probably was not. A 2:3 portrait of a wine bottle placed into a 1:1 cover box loses roughly a third of its height, split between top and bottom. That is the cap and the base, which are usually the parts that tell the shopper what the product is.

A few themes also crop server-side, by requesting a resized image from Shopify's CDN with a fixed width, height and crop anchor through Liquid's image_url filter. The effect is the same: the file the shopper downloads is already trimmed to the card shape. Either way, the original in your admin is untouched, which is why the product looks fine when you open it there.

The theme settings that control Shopify image cropping

Setting names differ between themes, but most themes built on Shopify's Online Store 2.0 architecture expose the same handful of controls in the theme editor. It is worth knowing where they live before you touch a single image.

• Product card image ratio. Usually found under the collection or product grid section, or in theme settings under "Product cards". Shopify's free Dawn theme, for example, offers Adapt to image, Portrait and Square. Portrait and Square reserve a fixed box and crop to fill it. Adapt to image lets each card take the shape of its own featured image, which avoids cropping but produces ragged rows the moment your catalogue mixes shapes.
• Image fit or fill. Some premium themes add a separate toggle for fit (contain) versus fill (cover). If yours has one, it is the fastest way to stop the cropping, at the cost of visible background bands.
• Product page media size and layout. The product page usually has its own settings for gallery width, thumbnails and stacked versus carousel layouts. Carousels and thumbnail strips often use a fixed ratio too, so an image can survive the main gallery and still get trimmed in the thumbnail row.
• Section-level overrides. Featured collection blocks, "you may also like" rows and quick-view drawers are separate sections, and each can have its own ratio setting. Fixing the collection template does not fix the homepage carousel.

Why "Adapt to image" is not the fix it looks like

The obvious response is to switch the card ratio to the adaptive option and move on. Nothing gets cropped, so the problem is solved. In practice it swaps one visible flaw for another.

With adaptive cards, a row containing a square tote bag, a tall bottle and a wide belt becomes three cards of different heights. Titles and prices no longer line up, the grid looks like a mood board, and on a phone the tall cards push everything below them down the page. The unevenness is exactly the "marketplace, not brand" look that we covered in making Shopify collection pages look consistent.

Switching to contain has a similar trade-off. The product is whole, but a tall bottle shown in a square box on a white card ends up small, centred in a strip of empty space, and noticeably smaller than its square-shot neighbours. At thumbnail size that matters: shoppers compare products by how much of the card they fill, and a product that looks small reads as less important.

Theme settings choose which compromise you get. The only way to get no compromise is to upload images whose shape already matches the box.

Diagnosing which product images are being cropped

Before you re-export anything, find out how big the problem actually is. On most catalogues it is concentrated in a few categories: tall products (bottles, candles, boots, dresses), wide products (belts, sunglasses, rugs) and anything shot on a model where the head or feet sit near the frame edge.

1. Find your theme's card ratio. Open the theme editor, go to the collection template and read the product card image ratio. If it is adaptive, note that and check the featured-collection sections separately.
2. Audit your source ratios. Export your products with their image dimensions, or spot-check the featured image of each product type in the admin. Anything that is not the card ratio is a cropping candidate.
3. Look at the grid on a phone. Most traffic is mobile, and mobile grids are two columns of small cards, where a trimmed cap or missing toe is most noticeable. Scroll every collection with the theme preview in a phone-width window.
4. Check the other surfaces. Search results, recommendation rows, the cart drawer and a shared link preview. Paste a product URL into a messaging app and see what the preview shows.
5. List the offenders by category. The fix is almost always per category, because a category shares a shape. You rarely need to touch every image.

Those percentages are simple geometry, not estimates: a cover crop removes the difference between the two ratios, split across both edges.

The fix: pick one ratio and design for a safe area

The fix that holds up is a catalogue standard with two parts: a canvas ratio that matches your theme's card, and a safe area that the product must sit inside.

Choose the canvas ratio. Square (1:1) is the most portable. It matches the default card in many themes, it is what most marketplaces expect for main images, and it crops predictably into other shapes. Portrait 4:5 suits apparel and anything shot on a model, and it takes up more vertical space on a phone, which some fashion stores prefer. Pick one and set your theme's card ratio to match it. Our product image aspect ratio guide goes into how to choose between them for different channels.

Define the safe area. Even with matching ratios, some surfaces will still crop slightly: a 4:5 image appearing in a square recommendation row, or a social link preview that uses its own shape. Keep the product inside a central zone with margin on every side, typically 5 to 10% of the canvas, so that a modest crop from any direction only removes background.

Scale by category, not by image. A ring and a floor lamp should not both fill 90% of the frame, but every ring should fill the same share as every other ring. Setting a fill percentage per product type keeps the grid consistent without making small items look huge.

These are starting points, not rules. What matters is that they are written down and applied the same way every time.

Re-exporting and pushing corrected images back to Shopify

Once you have a standard, the work is mechanical: reframe each affected image to the canvas ratio, place the product inside the safe area at its category's fill, and put it back on the product. Doing this by hand in an editor is feasible for a dozen products and tedious for a few hundred, which is where most stores stall.

This is the part of the process Retouchable is built to automate. Its product-only outputs finish with a deterministic framing step that measures the product, scales it by a per-category rule, places it in the safe area and paints an exact background colour, so a whole category comes out at the same size on the same plate. With the Shopify connection, you can pick products straight from your store and push the finished image back with its filename, alt text and gallery position set in the same step.

Whatever tool you use, three details matter when replacing images:

• Put the corrected image in position 1. Position 1 is the featured image, the one every grid and search result uses. A corrected image that lands at the end of the gallery fixes nothing in the grid. We covered this in depth in controlling Shopify image position and gallery order.
• Keep alt text and filenames. Replacing an image is a chance to write descriptive alt text and a readable filename, not a reason to lose the ones you had.
• Remove the old version. If the cropped original stays in the gallery, you now have two near-identical images, and the thumbnail strip shows both.

The Shopify connection only needs product read and write access. It does not touch orders, customers or payments, which is worth checking for any app that edits your catalogue.

Keeping new uploads from reintroducing the crop

Cropping problems come back when the standard lives in one person's head. A new supplier sends lifestyle shots at 3:2, a seasonal campaign is shot in portrait, or a theme update changes the default card ratio, and within a few weeks the grid is mixed again.

Three habits prevent that:

1. Write the standard down. Canvas ratio, minimum resolution (2048px on the long side is Shopify's own recommendation for square product images), safe-area margin, per-category fill and background colour. One page is enough.
2. Check every new featured image against it before it goes live. This is a ten-second check at upload time, and far cheaper than a catalogue-wide audit later.
3. Re-test after any theme change. New themes and major theme updates can change card ratios, add new sections or switch fit behaviour. Scroll the main collections on a phone after every change.

A consistent ratio also helps outside your storefront. Google Shopping, marketplaces and social catalogues each render your featured image in their own box, and a square image with a comfortable safe area survives nearly all of them untouched.