Your credits refresh every month for as long as ListingRVA AI exists. No renewals, no annual increases, nothing to cancel.
Available on select plans. No renewals, ever.
October 28, 2026 · 12 min read · by Aashirvad Kumar
Shopify collection images cropped at different scales are almost always a ratio problem, not a resolution problem. Your theme draws every product card in a collection grid at one shape, and when a photo's aspect ratio does not match that shape, the theme either crops it to fill the card or shrinks it to fit. Square, landscape and portrait shots then end up zoomed in, clipped at the edges or floating at different sizes in the same row. The lasting fix is to give every featured image in a collection the same ratio before it reaches the theme.
Sellers usually notice it the day they switch themes. In a Shopify Community thread titled "Category photos showing too zoomed in" (27 August 2026), a Studio theme user saw collection photos cropped tight and fixed it with one line of Custom CSS. In "Image size on Horizon theme looking weird" (17 November 2025), the poster said the carousel offered only an "Auto" option, and the thread ended without a fix. A third thread, "Resizing imaging on a collection page so they do not crop" (opened August 2025, last reply August 2026), got the most durable answer: pre-crop or letterbox every image to one ratio. Pixel dimensions and file weight are a separate topic, covered in the guide to Shopify product image specs.
Key takeaways
object-fit: contain CSS fix stops cropping but leaves blank bars around off-ratio images, and selectors differ by theme.
Shopify collection images cropped in the grid are the theme doing its job: each product card has a fixed frame, and anything that does not match that frame gets cut or scaled. A collection grid is built for even rows, so the theme forces every featured image into the same box rather than letting tall and wide photos break the layout.
Product cards in most themes follow the same logic as other theme sections, and the theme decides whether each card is square, portrait or matched to the image. Shopify's help page on theme images and cropping puts the rule plainly, saying "If your image's aspect ratio is different from the aspect ratio of that area, then the section crops the image to fit."
Featured product images should all use one aspect ratio, and for most catalogues that ratio is square. Shopify does not force a single shape on every store, because the right one depends on the theme and the products, but it does ask for consistency across featured images and it names a square size that usually displays best.
| Topic | What Shopify says | Help page |
|---|---|---|
| Square images | "For square product images, a size of 2048 x 2048 px usually displays best." | Product media types |
| Featured images | Use "a consistent aspect ratio, or height-to-width ratio" | Product media types |
| Maximum dimensions | "Your product and collection images can be any size up to 5000 x 5000 px, or 25 megapixels." | Product media types |
| File size | "smaller than 20 MB" | Product media types |
| Theme section images | Best dimensions "depend on your theme and theme version" | Theme images |
Square is the safest default because a 1:1 image survives most card shapes with the least loss: a square card shows it whole, and a slightly portrait card trims only a sliver from the sides. A portrait ratio suits apparel shot on a model, and that works too, as long as every product in the collection uses it. File type matters far less than shape, and the two help pages disagree on it: the theme images page recommends JPEG for product images or slideshows, while the Shopify product media guide says "The best file type for most product images is PNG, followed by JPEG."
The image ratio and fit settings live in the theme editor, usually in the product card or collection grid settings rather than on the product itself. Labels differ between themes and between versions of the same theme, so open the theme editor for your live theme and look through the collection template and the theme settings that control product cards before you change any code. Settings worth looking for (names vary, so check your own editor):
If your theme offers an adapt-to-image option for cards, it usually removes cropping by letting each card follow its photo, which only looks tidy when the photos already share a ratio. If it offers only fixed shapes, or only an "Auto" choice like the Horizon carousel in the thread above, no setting can rescue a mixed set, and the images have to be fixed at the source. Fixing at the source is the same discipline behind making a catalogue look consistent.
The CSS object-fit fix works when you would rather see the whole product with some empty space than a cropped product, and it leaves gaps whenever an image's ratio differs from the card. It is the quick fix most often suggested for Shopify collection images cropped by a new theme. Changing object-fit from cover to contain tells the browser to scale the image down until all of it fits inside the box, so nothing is cut, but the leftover area shows the card background.
In the Studio theme thread, the fix that worked was .media > img { object-fit: contain; } added to the theme's Custom CSS. That selector is a fix one user found for one theme, not Shopify guidance: other themes name their image wrappers differently, a theme update can rename them, and some sellers report that similar rules leave gaps or stretched images in their theme. Because the rule changes only how an image is drawn, not the file itself, it has no effect on load time, and the guide to Shopify image page speed covers what does.
| Approach | What the shopper sees | When to use it |
|---|---|---|
Crop to fill (what object-fit: cover does) | Even cards, but off-ratio photos lose edges or look zoomed in | Only when every image already matches the card |
Fit inside (object-fit: contain) | Whole product, with blank bars around off-ratio photos | A quick patch while you fix the images |
| Adapt to image | No crop, but card heights vary when ratios vary | Collections that already share one ratio |
| Pre-crop or letterbox to one ratio | Even cards, whole product, same scale | The lasting fix for any catalogue |
Gaps are most visible when a product was shot on a grey or coloured background and the card is white, because the bars show as a different colour from the photo. If your photos are on pure white and the card background is also white, contain can look nearly seamless, which is why the same fix pleases some sellers and disappoints others running the same theme.
Horizontal and vertical photos show at different scales because a theme that fits images into a fixed card scales each one until its longer side touches the card edge. A landscape photo fills the card's width and leaves space above and below, a portrait photo fills the height and leaves space at the sides, and the product inside each one looks bigger or smaller depending on how much of the frame it occupied when it was shot.
Scale also depends on how much of the frame the product fills. Two square photos can still look mismatched if one product nearly touches the edges and the other sits small in the middle, so set a rule for margins as well as for ratio. Product pages break the same way when a swatch click swaps in a differently shaped photo, a problem covered in the guide to swatch and variant image problems.
Never stretch to fit: resizing a 4:3 photo to 1:1 by changing only its width or height squashes the product, and buyers notice a squat bottle or a wide shoe at once. Crop spare background or pad the canvas, but never scale one axis on its own.
You bring a mixed catalogue to one ratio by padding each photo out to the target shape on a matching background, and cropping only when there is spare background to remove. Padding, also called letterboxing, keeps every part of the product, while cropping a photo that is already tight cuts off edges, which is how a mug loses its handle in the grid.
Padding works cleanly when the photo has a plain background you can extend. Lifestyle shots on wood, fabric or a room scene are harder, because extending the scene by hand leaves visible seams and odd repeats. For those, cutting the product out and placing it on an even background gives you a frame you can pad to any ratio, which is the job of a product image background remover.
Keep the scale rule as you go. Place each product so it fills a similar share of the frame, with similar margins top and bottom, so a row of mugs, bottles and boxes reads as one set. Keep the original files too, because a future theme may favour portrait cards and you will want to re-export from the full-size source rather than from an already cropped square.
Focal points keep the important part of an image visible when a theme crops it, while slideshow banners crop every slide that does not match the first one. Shopify's theme images page says "Focal points always display in frame, even if you have a theme that crops your image to fit the layout." Set a focal point on any image you cannot re-export, such as a banner with the product on one side, so the crop moves around the product instead of slicing through it.
For sections with a Height setting, the same page says the "Adapt to first image" option "sizes the section to your image instead of cropping it." That helps a single image banner, but it does not rescue a slideshow with mixed slides, because "In a slideshow, the section matches the first slide, so any slide with a different aspect ratio is still cropped." Export every slide at the same dimensions, and treat the first slide as the template the rest must match.
Check the grid by viewing a full collection page at phone width and at desktop width, because many themes change the number of columns between the two and some change the card shape as well. A crop that trims a sliver on a wide desktop grid can cut much more on a two-column phone grid if the theme uses a different card shape on mobile.
Fix the worst row first, then look again. Collection pages show many product thumbnails on one screen and are often the pages that rank for category searches, so a clean grid is worth the effort for buyers and for search alike. If you are also working on how those pages get found, the content side is covered in the guide to Shopify collection page SEO.
Quick test: take a screenshot of one row at phone width and draw a box around each product. If the boxes are clearly different sizes, the ratios or the margins differ, and no theme setting will even them out.
Between 25 May and 20 October 2026, ListingRVA AI users generated 170 images for Shopify. Of those, 123 (72%) were 1:1 and 47 (28%) were 4:3. Across the 39 products with Shopify images, 3 had images in more than one aspect ratio, which is a small share but exactly the kind of product that breaks a tidy row.
The lesson: most sellers already standardise on square, and the mixed sets are the ones that crop unevenly in a grid. When Shopify collection images cropped at odd scales show up in a store, the cause is usually a handful of products like those 3, not the whole catalogue, so audit the outliers before you touch theme code. Whatever tool makes your images, export every image for a product at one ratio, and compare the studios and formats on the ListingRVA AI image features page.
Source: ListingRVA AI generation records (totals only, no customer data).
Turn one product photo into clean, consistently framed images for your Shopify collections, plus listing copy you control. Start with 50 free credits, no credit card.
Start free →The new theme draws product cards at a fixed shape that differs from the ratio of some of your photos, so it crops them to fill the card or shrinks them to fit. Check the card ratio and crop or fit settings in your theme editor, then export every featured image in the collection at one ratio.
Shopify's product media guide says "For square product images, a size of 2048 x 2048 px usually displays best." Product and collection images can be any size up to 5000 x 5000 px, or 25 megapixels, and the file should be smaller than 20 MB.
It stops the crop by fitting the whole image inside the card, but any image with a different ratio gets blank bars around it. Selectors such as .media > img are theme-specific fixes shared by users, not Shopify guidance, so they may not work in your theme or after an update.
Pad when the product already fills the frame, and crop only when there is spare background on the long side. Fill the padded area with the photo's own background colour, or cut the product out first. Never stretch one axis, because it squashes the product.
Shopify's theme images page explains that in a slideshow the section matches the first slide, so any slide with a different aspect ratio is still cropped. Export every slide at the same dimensions as the first one.
No. Focal points do not stop cropping, but Shopify says they always display in frame even when a theme crops the image to fit the layout. Set one on banners and any image you cannot re-export at the right ratio.
ListingRVA AI now works inside Claude. Connect your workspace and ask Claude to generate listing copy and publish product images to your store, without leaving your editor. See the Claude connector →
Comments
No comments yet, be the first.
Leave a comment