Shopify Product Image Standards for the Collection Grid: Ratios, Backgrounds, Sizes and Alt Text

A working set of Shopify product image standards for the collection grid: one aspect ratio, consistent framing and backgrounds, the second image, file sizes Shopify accepts, alt text, and a shoot brief to reuse.

Shopify product image standards are the written rules that make every tile on a collection page look like it belongs to the same shop: the same shape, the same framing, the same background, the same amount of breathing room around the product. Without them, a collection grid becomes a patchwork of supplier photos, phone shots and studio images at different sizes, and the shopper's eye goes to whatever is the odd one out rather than to what you want to sell. On a phone, where a grid usually shows two products per row, those inconsistencies are even more obvious.

This guide sets out a complete set of standards for the collection grid specifically, which is a different job from the product page gallery. It covers the featured image, aspect ratio, framing, backgrounds, the second image that many themes show on hover, file sizes and formats Shopify accepts, alt text, and a shoot brief you can hand to a photographer or a supplier. Shopify limits and settings come from Shopify's Help Center; theme settings vary, so where something depends on your theme we say so.

What the collection grid needs from an image

A product page image has to show detail, texture and scale to someone who has already chosen to look. A collection grid image has a harder job in less space. It has to make one product recognisable at roughly the width of a thumb, in a fraction of a second, next to a dozen others, and earn a tap. That changes what a good image is.

• Recognition beats artistry. The shopper should be able to tell what the product is, and roughly what colour and material it is, from the thumbnail alone.
• Consistency beats individual brilliance. One beautiful lifestyle shot in a grid of plain packshots draws attention away from everything around it, including products that may sell better.
• The product should fill a predictable share of the frame. If one ring fills the tile and the next is a speck in the middle of a white square, the grid looks careless and the small product looks cheaper.
• Nothing important should be near the edges, because themes and different screen sizes may crop the frame.

Most of the time the collection grid shows the product's featured image, which is the first image in the product's media list in Shopify admin. Reordering the media changes which image appears in the grid, so the featured image is a merchandising decision as much as a photographic one.

Rule 1: choose one aspect ratio for the whole grid

The single most visible standard is shape. Shopify's Help Center recommends square product images at 2048 x 2048 pixels as a size that usually displays best, and advises using a consistent aspect ratio across featured images for consistent sizing in collection grids. Square is a sensible default for most categories, but it is not the only good choice.

• Square (1:1) suits jewellery, accessories, beauty, home goods and most packshots. It is also the safest choice if images are reused across marketplaces and ads.
• Portrait, often 3:4 or 4:5, suits apparel, especially on-model images, because a standing person or a kurta laid out flat is taller than it is wide. Portrait tiles also take more vertical space on a phone, which means fewer products per screen.
• Landscape is rarely right for a product grid, except for products that are genuinely wide, such as some furniture or long accessories.

Whatever you choose, check how your theme handles it. Many themes have a product card setting, often labelled something like image ratio, with options such as adapt to image, portrait and square. If your theme crops to a fixed ratio and your photos are a different shape, the theme will cut them, sometimes through the product. If it adapts to each image, mismatched photos create a ragged grid with uneven rows. The fix in both cases is the same: shoot and export every featured image at the ratio you have chosen.

Rule 2: frame every product the same way

Framing is where most grids fall apart, even when the ratio is consistent. Write down three things and hold every image to them.

1. 1Fill: the share of the frame the product occupies. A practical rule is that the product's longest side takes up most of the frame with an even margin around it, so a pair of studs and a necklace both look substantial. Write the margin down, for example a fixed percentage of the frame on each side, so retouchers can apply it.
2. 2Angle: the viewpoint for each product type. Rings at a three-quarter angle, earrings as a pair facing the camera, kurtas flat-laid or on a mannequin at the same height, shoes from the outer side facing left. Mixing angles within a collection makes products harder to compare.
3. 3Centre and alignment: whether products sit centred, or aligned to a common baseline. For items photographed standing, such as bottles or footwear, a shared baseline looks tidier than centring.

For apparel on models, add rules about crop: for example, the featured image always shows the full garment from shoulder to hem, and never crops the model's head in one image and not in the next. The grid should feel like a rail of clothes, not a mood board.

Rule 3: one background, one light

A consistent background is the cheapest way to make a grid look premium. Pure white is the default for good reasons: it matches most theme backgrounds, it is accepted almost everywhere products are syndicated, and it makes cut-out retouching straightforward. A light neutral, such as a pale grey or warm off-white, can look softer and more editorial, but only if every product uses exactly the same one. Two slightly different off-whites side by side look like a mistake.

• Specify the background colour precisely, as a hex value, and ask retouchers to match it rather than eyeballing it.
• Keep lighting direction and shadow style the same: either a soft natural shadow under every product or none at all.
• Colour accuracy matters more than mood. A grid is where a shopper decides whether the colour is right. If 'maroon' looks red in the thumbnail and maroon in the hand, expect returns.
• If your theme's page background is not pure white, test how white-background images sit on it. A white square on a cream page shows its edges.

Lifestyle images still have a place: as second images, in banners and in editorial sections above or within the grid. They work best as deliberate exceptions, not as the featured image of a random third of the catalogue.

Rule 4: plan the second image

Many themes can show a product's second image when a shopper hovers over a card on desktop. Where your theme supports it, this is a useful slot, and it deserves its own rule rather than being whatever photo happened to be uploaded second.

• On-model or in-use for apparel, jewellery and accessories: the packshot shows the product, the second image shows scale and how it is worn.
• Back or alternate view for products where the back matters, such as kurtas with detailed backs or bags.
• Detail or texture for products sold on craft, such as handloom fabric or hand-set stones.

Keep the second image the same aspect ratio as the first, otherwise the card jumps on hover. Remember that hover does not exist on phones, which is where most Indian D2C traffic browses, so the featured image must do the whole job on its own. The second image is a bonus for desktop visitors, not a substitute for a clear featured image.

File sizes, formats and what Shopify accepts

Shopify's Help Center sets the technical limits for product media. Product and collection images can be any size up to 5000 x 5000 pixels or 25 megapixels, and must have a file size under 20 MB. Shopify suggests that PNG is the best file type for most product images, followed by JPEG, and also accepts formats including WebP, HEIC, GIF and others. For square images, 2048 x 2048 pixels usually displays best.

Within those limits, a few practical rules keep the grid sharp and the page light.

• Export every featured image at the same pixel dimensions, for example 2048 x 2048 for square. Shopify serves resized versions to the theme, so uploading at a consistent, generous size gives it enough to work with without uploading enormous originals.
• Don't upload print-resolution files straight from the camera. They are slow to upload and add nothing on screen.
• Compress before upload with a quality setting you have checked by eye on a phone, especially for fine detail such as filigree, zari or knitwear.
• Name files descriptively before upload, for example silver-oxidised-jhumka-earrings-front.jpg. It keeps your media library searchable and is a small extra signal about what the image shows.

Image weight is one of the bigger contributors to a slow collection page, because a grid loads many images at once. Consistent export settings are the cheapest speed fix there is, and they cost nothing once they are in the brief.

Alt text that helps people and search

Alt text is read aloud by screen readers to shoppers who can't see the image, shown when an image fails to load, and used by search engines to understand what an image shows. Shopify's Help Center allows up to 512 characters, recommends 125 or fewer, and advises keeping alt text brief and descriptive. It can be added by opening a product's media item in the admin and choosing the option to add alt text, or in bulk through a CSV upload.

A simple alt text pattern for featured images works for most catalogues: product type, the key attribute a shopper would use to tell it apart, and the view if it is not the front. For example: 'Oxidised silver jhumka earrings with pearl drops, front view' or 'Indigo cotton kurta set with straight pants, on model'. Avoid starting with 'image of', avoid repeating the brand name in every alt text, and never paste a keyword list. If the alt text would sound strange read aloud to a customer on the phone, rewrite it.

Worked example: standards for a 400-product ethnicwear brand

Here is an illustrative standard for a fictional D2C ethnicwear brand selling kurtas, kurta sets and dupattas. The specifics are invented, but the structure is what we would hand to a photographer.

• Ratio: portrait 4:5 for all featured and second images. Theme product card set to portrait so nothing is cropped unexpectedly.
• Featured image: on mannequin, front view, full garment from neckline to hem visible, mannequin at the same height in every shot, centred, even margin at top and bottom.
• Second image: on model, front or three-quarter view, same background, same crop rule.
• Background: one specified warm off-white, matched in retouching; soft shadow under the mannequin base, removed for flat lays.
• Colour: every shoot includes a colour reference card; retoucher checks fabric colour against the physical sample before export.
• Export: 1600 x 2000 pixels, compressed and checked on a phone, file names in the pattern product-type-colour-fabric-view.
• Alt text: '[Colour] [fabric] [product type] with [one distinguishing detail], [view]'.
• Exceptions: none for featured images. Lifestyle and festive campaign shots go into banners and third-or-later gallery positions.

The brand would not reshoot 400 products at once. It would start with the A products from Shopify's ABC product analysis report, which grades products by their share of revenue over the last 28 days, then the products leading its top collections, and work down over a few months.

Auditing an existing catalogue

1. 1Open your three most-visited collections on a phone. Shopify's Sessions by landing page report tells you which they are.
2. 2Screenshot the first two screens of each and look at them side by side. Note any tile that breaks the ratio, the framing, the background or the colour.
3. 3List the products whose featured image fails the standard, starting with those in the first two rows.
4. 4For each, check whether a better image already exists in the product's media. Often a compliant packshot is sitting in position three, and reordering the media fixes the grid in seconds.
5. 5Queue the rest for reshoot or retouching, in order of how visible and how valuable they are.
6. 6Repeat the screenshot check once a month, and for every new launch before it goes live.

Honest trade-offs

• Strict standards cost money. Matching backgrounds, consistent mannequins and colour checks take studio time that a phone shoot does not. Apply them first where traffic is highest.
• Supplier images rarely comply. If you resell other brands, you may have to choose between reshooting, retouching or accepting a mixed grid. Grouping supplier products into their own collections at least keeps each grid consistent.
• A uniform grid can look sterile. Some brands deliberately use styled imagery for personality. That can work, but it should be a written standard of its own, not the absence of one.
• Portrait images show fewer products per screen on a phone. You gain visual impact per product and lose the number of products seen before scrolling, which makes the order of the first few even more important.
• Theme settings and behaviour vary, including how images are cropped and whether second images show. Test any standard on your actual theme before rolling it out.

A Shopify product image standards checklist

• One aspect ratio for all featured images, matched to the theme's product card setting.
• Written rules for fill, angle and alignment per product type.
• One specified background colour and one lighting style.
• A planned second image for themes that show it on hover, at the same ratio.
• Consistent export dimensions within Shopify's limits: under 20 MB and up to 5000 x 5000 pixels, with 2048 x 2048 a good square default.
• Descriptive file names and alt text under 125 characters.
• A monthly phone screenshot audit of the top collections, and a check on every new launch.

A consistent grid makes the order of products matter more

Once every tile looks like it belongs, the shopper stops noticing photography and starts comparing products. That is the point, and it moves the weight of the decision onto which products sit in those first rows. A grid of perfect images that leads with a sold-out bestseller and buries a new launch that is converting well is still a weak page.

SellRank, our Shopify collection-sorting app, handles that half of the job. It ranks a collection by real performance, including views and add-to-carts counted by its own first-party pixel, as well as orders, revenue, conversion rate and, on Scale and up, profit. You can compose the page as percentage slots, for example in-stock bestsellers first and then new arrivals, preview the exact order, pin or demote by hand, and sync it into Shopify's own manual sort without touching your theme.

See SellRank at /products/sellrank. The free plan includes one collection with the full editor, live preview and one live sync, enough to pair your newly consistent grid with an order that earns it.