Why cart images are a conversion surface, not decoration
Baymard Institute's research puts the recoverable revenue from better checkout experiences at roughly $260 billion across the US and EU, and finds that fixing checkout UX issues can lift conversions by up to 35.26%. Imagery is a component of that UX, and it is one of the cheapest to fix because the assets already exist — they just need to be selected and rendered correctly.
The function of an image changes as the shopper moves down the funnel:
| Stage | Image job | Failure mode |
|---|---|---|
| Category grid | Earn the click | Product unrecognisable at thumbnail size |
| Product detail page | Sell and de-risk | Too few angles, no scale reference |
| Cart | Confirm the selection | Wrong variant shown |
| Checkout summary | Reassure while paying | Image missing or broken |
| Confirmation / email | Reduce anxiety and WISMO tickets | Hotlinked image blocked by mail client |
Note the shift. Everything before the cart is persuasion. Everything from the cart onward is reassurance. Teams that reuse their hero-shot logic all the way through checkout are answering a question the shopper stopped asking two clicks ago.
Open your own cart on a phone with three items in it, two of them variants of the same product. If you cannot tell them apart from the thumbnails alone, neither can your customers.
The variant accuracy problem
This is the single most common defect, and it is almost always a data problem rather than a photography problem. A shopper selects the sage green colourway, adds to cart, and the cart renders the product's default image — the charcoal one — because the cart template pulls product.featured_image rather than line_item.variant.image.
The shopper now sees a charcoal item in their cart. Best case, they re-check the PDP and lose momentum. Worst case, they assume the site got it wrong and leave. Categories where the variant is the purchase decision suffer most — which is exactly why Beauty & Personal Care carries the highest abandonment rate of any vertical at 82.51%, with shade matching a documented driver.
Fixing it takes two things. First, every purchasable variant needs its own image assigned at the variant level — not just present somewhere in the gallery, but explicitly attached to that variant. Second, your cart and checkout templates need to request the variant image with a fallback chain: variant image, then product featured image, then a branded placeholder. Never an empty box.
The gap is usually coverage. A 40-SKU catalog with six colourways each needs 240 variant-level images, and most brands shot 40. Generating the missing colourways from existing shots — rather than rebooking a shoot for a colour that already exists in the warehouse — is where AI variant generation earns its keep. Our guide to colour variant product photos covers the production side in detail.
What to show at each checkout step
Specifications that hold up across most storefronts:
| Surface | Rendered size | Content |
|---|---|---|
| Mini-cart / drawer | 60–80px square | Variant-accurate, tight crop, plain background |
| Full cart page | 100–140px square | Variant-accurate, product fully in frame |
| Checkout order summary | 50–64px square | Same asset as cart — consistency matters more than detail |
| Confirmation page | 80–120px square | Same asset, plus variant named in text |
| Transactional email | 120–200px, 2x for retina | Absolute HTTPS URL, alt text, no lazy loading |
Three rules apply across all of them.
Crop tight, but never crop the product. At 60px, a packshot with generous margins renders the product about 30px across. Use a crop that fills the frame while keeping the whole item visible — a cropped-off sleeve reads as the wrong item.
Keep backgrounds plain and consistent. A cart mixing white-background packshots with dark lifestyle shots looks like a broken page. Whatever your PDP does, cart thumbnails should be visually uniform. If your catalog is inconsistent, standardising backgrounds is the prerequisite fix.
Show the variant in the text too. The image confirms; the label proves. "Merino Crew — Sage Green / M" underneath the thumbnail removes the ambiguity a small image cannot fully resolve.
Typical cart
- Default product image regardless of variant
- Full-bleed lifestyle crop, product tiny
- Mixed backgrounds across line items
- Broken image icon when an asset 404s
- Email images hotlinked from a CDN that blocks mail clients
Audited cart
- Variant image with a defined fallback chain
- Tight square crop, product fills the frame
- Uniform plain backgrounds
- Branded placeholder, never an empty box
- Absolute HTTPS URLs with alt text in email
Performance: small images, big consequences
Checkout is the worst place on your site to ship heavy images. A cart with eight line items loads eight thumbnails, and every one competes with the payment form for bandwidth on a connection you do not control.
The most common waste is serving a 2000px PDP asset into a 64px slot. The browser downscales it and the shopper waits for roughly 1,000 times more pixels than they will ever see. Serve a purpose-built derivative instead.
Practical rules:
- Serve at 2x the rendered size, no more. A 64px slot needs a 128px asset. Use your image CDN's resize parameters rather than uploading separate files.
- Use modern formats. WebP or AVIF at these dimensions lands comfortably under 15KB with no visible loss. See format comparison for the tradeoffs.
- Do not lazy-load cart thumbnails. They are above the fold in a short list. Lazy loading adds a visible pop-in that reads as instability.
- Set explicit width and height. Unsized images shift the layout as they load, and a checkout page that jumps while someone is entering card details is a genuine conversion risk.
- Pre-warm the derivatives. If your CDN generates sizes on first request, the first shopper to add a given variant pays a cold-start penalty at the worst moment.
Many checkout platforms — Shopify's hosted checkout among them — render the order summary from their own templates. You control which image is attached to the variant and its filename and alt text, but not the markup. Get the source asset right, because you cannot patch it downstream with CSS.
Post-purchase: the images that reduce support tickets
Once payment clears, product images shift jobs again. Now they answer "did I order the right thing, and is it on its way?" — the two questions behind most "where is my order" tickets.
The confirmation page and the confirmation email should show the same variant-accurate thumbnail the shopper saw in the cart. Continuity is the point: an image that changes between cart and confirmation makes people re-read the order to check nothing went wrong.
Email introduces its own constraints, and they catch teams out regularly:
- Absolute HTTPS URLs only. Relative paths resolve against the mail client, not your domain, and render as broken.
- Alt text on every image. Many clients block images by default; alt text is what a meaningful share of recipients actually read.
- Fixed pixel dimensions in the HTML. Email clients are inconsistent about CSS sizing, so set
widthandheightattributes directly. - No lazy loading, no CSS background images. Support is patchy and the failure is silent.
- Check your CDN's referrer policy. Hotlink protection configured for your storefront will happily block Gmail's image proxy.
Shipping and delivery notifications benefit from the same treatment. A delivery email showing the actual item is far more useful than an order number alone, especially for households receiving several parcels a week.
Auditing your own cart in under an hour
A concrete pass you can run today. Work through it on a phone, not a desktop — that is where three quarters of the abandonment happens.
- Build a mixed cart. Add four items: two variants of the same product, one item from your newest collection, one from your oldest. Old SKUs are where missing variant images hide.
- Check variant accuracy. Does each thumbnail show the exact variant selected? Log every mismatch as a data fix, not a design fix.
- Check the fallback. Temporarily point one line item at a nonexistent image. Do you get a branded placeholder or a broken-image icon?
- Measure the payload. In DevTools, filter the network tab to images and read the transferred size of each cart thumbnail. Anything over 30KB at 64px is a misconfigured derivative.
- Look for layout shift. Reload with throttling on. If line items jump as images arrive, your dimensions are unset.
- Complete a real order. Check the confirmation page and email on a phone, with images initially blocked, then unblocked.
- Log the gaps by SKU. You will typically find the problem concentrated in older products and long-tail colourways rather than spread evenly.
Step seven is usually the surprising one. Most catalogs are not uniformly broken — they have a specific cohort of SKUs that predate a process change. That makes the fix a bounded backfill rather than an open-ended project. Retouchable can generate the missing variant images from your existing photography and push them straight to the right product, with the filename and alt text already set. For the wider catalog view, see our catalog audit checklist.