Why the collection grid is judged as a whole
On a product page a shopper evaluates one image at a time. On a collection page they evaluate the set. A single warm-toned photo in a row of neutral ones does not read as "that product was shot in warmer light" — it reads as "this store is not quite professional". Shoppers do not diagnose; they just feel the mismatch and lower their trust.
Baymard Institute's e-commerce UX research has repeatedly found that product list pages with inconsistent thumbnail styles make it harder for users to compare products, and that users lean on the visual grid to scan quickly before reading anything. When the grid is uneven, scanning breaks, and the shopper has to open individual product pages to work out what they are looking at. Every extra click before a decision costs a share of the audience.
There is also a mechanical reason. Shopify collection templates typically crop every thumbnail to the same aspect ratio and render them at the same size. Two images that looked fine on their own product pages can crop very differently in the grid, with one product filling the tile and its neighbour floating in white space. The template makes inconsistency more visible, not less.
The five things that make a grid look inconsistent
When merchants say "our collection page looks messy," the cause is almost always one or more of five variables. Naming them is most of the work, because each one has a different fix.
| Variable | What the shopper sees | Typical cause |
|---|---|---|
| Background | Pure white next to off-white next to grey sweep | Different shoot days, different camera white balance, supplier images mixed with your own |
| Scale | A mug that fills its tile next to a lamp that fills 40% of its tile | Each product framed to look good alone, never framed relative to its neighbours |
| Crop and margin | Products touching the edge on some tiles, floating on others | Inconsistent headroom in the original files, then a uniform template crop |
| Angle and orientation | Three-quarter view beside a straight-on beside a flat lay | No agreed hero angle per category |
| Colour and exposure | Same-material products looking like different shades | Lighting drift, mixed retouchers, JPEG re-saves |
Scale is the one most merchants underestimate. Human eyes tolerate a small difference in background tone, but a product that occupies twice the tile area of its neighbour is impossible not to notice. It also carries meaning shoppers do not intend — the larger product reads as more important or more expensive. If you only fix one variable, fix scale.
Mixing manufacturer-supplied images with your own is the fastest way to a messy grid. Supplier shots come from a different studio with different standards, and they were framed for a wholesale catalogue, not your collection template. Treat them as raw material to be normalised, not finished assets.
Write a collection image standard before touching a single file
Consistency is not a retouching task; it is a decision followed by a retouching task. Before editing anything, write down the standard every featured image must meet. It fits on one page and it prevents the problem recurring every time a new product is added.
A workable standard covers:
- Background: one named colour, written as a hex value, not a description. "White" is not a standard;
#FFFFFFis. Most Shopify themes render the collection grid on white, so a pure white background lets the product float in the tile without a visible box edge. - Aspect ratio: match the theme's collection tile. Square is the default in most Shopify themes; some fashion themes use 4:5 or 2:3. Check your theme settings rather than guessing.
- Fill percentage: how much of the frame the product's longest edge occupies. 80–85% works for most categories. Tall, narrow products (bottles, lamps) need a rule of their own or they end up as a thin stripe with white on either side.
- Margin: a minimum gap between the product edge and the frame, so the template crop never clips it.
- Hero angle per category: footwear at a three-quarter profile, apparel as a flat lay or ghost mannequin, drinkware straight on. One angle per category, no exceptions in position 1. Alternate angles go in position 2 onward.
- Shadow policy: none, soft contact shadow, or drop shadow — chosen once for the whole catalogue.
The standard belongs somewhere the whole team can see it, and it should be applied at the point a product is created, not retro-fitted. Retro-fitting is what this article is about, but the goal is to only have to do it once.
Normalising an existing catalogue without a reshoot
Once the standard exists, the job is to bring every featured image up to it. For a catalogue of any size a reshoot is the wrong tool: it costs studio days, it takes products out of stock while they travel, and it recreates the same drift the next time you shoot. The alternative is to treat the existing photo as the source and normalise it in software.
Reshoot
- Studio day per 40–80 SKUs
- Products shipped to and from the studio
- Consistency depends on the same photographer, same day, same setup
- Drift returns with the next new-product batch
Normalise in software
- Works from the images you already have
- Background, scale and margin applied by rule, so every SKU gets the same treatment
- Runs across the whole catalogue in one pass
- The same rule applies to every future product
The normalisation pipeline has three steps, and the order matters:
- Cut the product out. Separate the product from whatever background it was shot on. This is the step where AI tools have made the biggest practical difference in the last few years; a clean cutout of a folded shirt on a stockroom table is now routine rather than a manual masking job.
- Frame by rule. Measure the cutout, scale it so its longest edge hits the standard's fill percentage, place it in the frame with the standard margin, and paint the exact background colour. This step should be deterministic — the same rule, applied the same way, to every product. This is the difference between "we made the backgrounds white" and "the grid looks consistent". Retouchable's product pipelines do exactly this as a final framing step, with per-category scale rules, so a mug and a lamp end up at sensible relative sizes rather than both filling 85% of their tiles.
- Match colour. Correct exposure and white balance so the same fabric or finish reads the same across SKUs. If you use AI colour correction, do it after framing, against the neutral background, where drift is easiest to see.
For background handling in particular, consistent product photo backgrounds goes deeper on the choice between pure white, off-white and coloured plates, and AI colour correction for catalogue consistency covers the colour-matching step.
Pushing the normalised images back to Shopify in position 1
Normalising the images is half the job. The other half is getting each one into the featured slot for the right product, with the metadata that keeps it findable. On Shopify, the collection grid uses whichever image is in position 1 — so if the new image lands in position 4, the grid does not change.
Doing this by hand means opening every product in the admin, uploading the file, dragging it to the front, and typing alt text. For 400 products that is a full week of someone's time and a guaranteed source of new inconsistency, because some products will get alt text and some will not.
The better route is to push images programmatically. Retouchable's Shopify integration connects with product read/write access only (no orders or customer data), lets you pick the product from inside the tool, and pushes the finished image directly to it. Three fields matter for the collection page:
| Field | Why it matters for the grid | Recommended value |
|---|---|---|
| Position | Position 1 is the featured image — it is what the collection grid and in-store search show | 1 for the normalised hero; 2+ for alternate angles |
| Alt text | Read by screen readers and by Google Images; also the text shown if the image fails to load | Product name plus one distinguishing attribute, e.g. "Linen shirt, sage, folded" |
| Filename | A weak image SEO signal and a strong housekeeping one — you can tell what a file is a year later | sku-colour-hero.jpg pattern, lowercase, hyphenated |
Setting position explicitly is the step people forget. Shopify appends new images to the end of the gallery by default, which means a batch upload of beautifully consistent images can leave the collection page exactly as messy as before. Shopify image position and gallery order covers the mechanics in more detail.
Push the old featured image down to position 2 rather than deleting it, at least for the first week. If a normalised image has a cutout error nobody caught, the product page still has a usable shot and you can swap positions back in seconds.
Checking the result and keeping it consistent
After the push, the check is visual and it should be done on the live collection page, not on the individual files. Open each collection, zoom the browser out so you see 30–40 tiles at once, and look for anything that jumps. At that zoom level you are not looking at products; you are looking for outliers in tone, size and position, which is exactly what shoppers register subconsciously.
Those proportions are from our own catalogue audits rather than an industry survey, but the ordering is consistent: scale problems are found more than twice as often as colour problems, and they are the ones merchants notice last because each image looks fine on its own.
Keeping the grid consistent afterwards comes down to process:
- New products go through the same normalisation step before their first image is pushed, so position 1 is never an un-normalised shot.
- Supplier images are never pushed directly. They are treated as inputs.
- Alternate angles, lifestyle shots and model shots live in position 2 onward. The collection grid only ever shows the standardised hero.
- Once a quarter, repeat the zoomed-out check on the top ten collections by traffic. Drift creeps in through exceptions, and a fifteen-minute review catches it before it compounds.
The payoff is a collection page that reads as one brand. Shoppers scan faster, compare more easily, and open product pages because they are interested rather than because they are confused — which is the difference between a grid that sells and a grid that just lists.