Perfect Pixel Media All articles
Practical Guides

Nothing in the Basket, Something in the Brand: Auditing the Screens Your Shop Forgets

Perfect Pixel Media
Nothing in the Basket, Something in the Brand: Auditing the Screens Your Shop Forgets

Most small UK shops spend their design budget on the product page. Fair enough — that is where the sale happens. But the screens that appear when there is nothing to sell tend to get whatever the template shipped with, and that is a missed opportunity. A shopper who hits a zero-result search or a sold-out item is not casually browsing. They have told you what they want. The screen they get back is your chance to answer well.

The moments nobody photographs for the brand deck

Think about the last time you searched a shop for something specific and got nothing. Did you feel like the shop was helpful, or did you feel like you had walked into a room and the lights were off? Empty states — zero search results, out-of-stock pages, an empty basket, a 404 — are the quiet customer-service desks of your website. They are also visual surfaces. They carry your type, your colours, your tone of voice and your logo. If they look like a default error message, that is the impression that sticks.

The good news is that these screens are cheap to improve. You do not need a rebuild. You need a short audit, a few honest decisions and a bit of copy that sounds like a human being wrote it.

Zero search results: answer the question behind the query

A shopper searches for ‘linen apron’ and your shop has none. The default response is often a bleak line of text and a blank grid. Instead, treat the search box as a conversation. Acknowledge the miss plainly — ‘We could not find anything for “linen apron”’ — and then offer a route forward. Show popular categories, bestsellers, or a few related products. If you have a cotton apron, say so: ‘No linen right now, but our cotton aprons are made in the same workshop.’

Visually, keep the same header, spacing and type scale as the rest of the site. The screen should feel like your shop, not like a browser error. Add a single, clear action: ‘Browse all aprons’ or ‘See what is new’. Avoid the temptation to fill the space with a generic illustration of a magnifying glass. A small, well-set line of copy and a useful link will always beat clip art.

Out of stock: be honest, be useful and be visually calm

Sold-out products are not failures. They are proof that people want what you make. The mistake is letting the page look abandoned. A good out-of-stock state does three things: it says clearly that the item is unavailable, it gives the shopper a way to be told when it returns, and it offers a sensible alternative.

Use the product photography you already have, but reduce its prominence. A muted overlay or a small ‘Sold out’ label in your brand typeface is enough. Do not remove the product from the page — that breaks bookmarks and search results. Instead, replace the add-to-basket button with an email-me-when-back form, and place two or three related products underneath with a heading like ‘While you wait’. The visual hierarchy should make the unavailable item clear, but the alternatives easy to scan.

Tone matters here. ‘Gone for now’ is friendlier than ‘Out of stock’ in some brands; in others, plain is better. Pick one and use it consistently. If you know a restock date, say it. If you do not, do not invent one. UK shoppers are patient with small brands, but they are not patient with vague promises.

The empty basket: a quiet nudge, not a hard sell

An empty basket is often the first screen a new visitor sees after adding nothing at all. It can feel like a shrug. Use it to reduce uncertainty. A short line — ‘Your basket is empty’ — is fine, but follow it with a clear route back to the shop and a small reassurance about delivery or returns. If you offer free UK delivery over a threshold, this is a reasonable place to mention it, as long as it does not read like a pop-up advert.

Visually, keep it minimal. One illustration at most, and only if it matches your brand. A good rule: if the empty basket screen would look out of place on your homepage, it is too decorative. The goal is to make the next step obvious, not to entertain someone who has already decided not to buy yet.

The 404: the screen that reveals how much you care

A 404 is the one page nobody plans to visit. That is exactly why it is worth designing. A shopper who lands on a broken link has usually come from somewhere with intent — an old blog post, a newsletter, a printed QR code. A blank ‘Page not found’ message tells them the trail has gone cold. A well-made 404 tells them where to go next.

Include your main navigation, a search box and two or three links to popular categories. Keep the copy short and human: ‘That page has moved or never existed. Try one of these instead.’ If you have a brand illustration or a strong photographic style, this is a safe place to use it sparingly. Do not hide the rest of the site behind a full-screen joke.

A short audit you can run this week

Open your shop on a phone and walk through each empty state as if you were a customer. Search for something you do not sell. Open a sold-out product. Clear your basket. Visit a URL that does not exist. For each screen, ask three questions. Does it look like our brand, or does it look like the template? Does it help the shopper take the next step? Does the copy sound like us?

Then check the basics: is the type legible at small sizes? Is the contrast strong enough? Does the page still work with images switched off? Are the links real and current? These are not glamorous checks, but they are the ones that separate a shop that feels considered from one that feels assembled.

Empty states are not the headline act. They are the moments between the acts, and that is exactly why they are worth getting right. A shopper who finds a useful answer on a zero-result page or a clear route forward on a 404 is more likely to come back. That is not a dead end. That is brand work doing its job quietly.

All Articles

Related Articles

The Thumb Owns the Screen: A One-Handed Checkup for Your Mobile Shopfront

The Thumb Owns the Screen: A One-Handed Checkup for Your Mobile Shopfront

The Second Typeface: What Your Brand Says When the Web Font Doesn't Load

The Second Typeface: What Your Brand Says When the Web Font Doesn't Load

The Panel Before the Page: Auditing the Photos Google Shows for Your Shop

The Panel Before the Page: Auditing the Photos Google Shows for Your Shop