Most articles about 404 error page design show you a gallery of funny illustrations and stop there. A cute astronaut floating in space is nice, but it does not answer the only question that matters for an online store: what happens to the visitor after they land on that page?
On an e-commerce site, a 404 is rarely a random accident. It is a deleted product, an old campaign URL, a mistyped link in a newsletter, a category that was renamed, or a backlink pointing to a page that no longer exists. In other words, it is very often a visitor who already had buying intent. If your error page is a dead end, that intent evaporates and the bounce rate climbs. If it is a recovery point, a large share of those visitors continue browsing.
This guide breaks down the elements every 404 page needs, analyses nine memorable designs and explains exactly why they keep people on site, then shows how to implement all of it on PrestaShop.
What a 404 error page actually is (and why it matters commercially)
A 404 is the HTTP status code returned by a server when the requested URL does not exist. The page the visitor sees is separate from the status code the server sends, and confusing the two is the most common technical mistake in 404 error page design.
- The status code talks to crawlers: it tells Google the URL is gone so it can be dropped from the index.
- The page talks to humans: it explains what happened and offers a route back.
Get both right and a 404 becomes harmless for SEO and useful for conversion. Get them wrong (a pretty page returning a 200 status, known as a soft 404) and you flood the index with empty pages that dilute crawl budget.
The real cost of a bad 404 page
- Visitors who hit a blank server error page leave almost immediately, which inflates bounce rate and wastes ad spend on paid traffic.
- Broken links inside your own site create navigation traps that hurt internal link equity.
- Backlinks pointing to dead URLs lose most of their value if you do nothing.
- On mobile, an error page with no navigation is a guaranteed exit because there is no visible menu to fall back on.
The 7 elements every 404 page needs
Before looking at inspiration galleries, build the functional skeleton. Design comes after. Here is the checklist we apply on every PrestaShop project.
| Element | Why it matters | Priority |
|---|---|---|
| A clear, human message | Removes confusion and reassures the visitor that the site is not broken | Essential |
| Search bar | The single highest converting element on an error page for a catalogue site | Essential |
| Full header, menu and footer | Keeps every normal navigation path available instead of isolating the page | Essential |
| Suggested pages or products | Turns the error into a merchandising slot (bestsellers, top categories, new arrivals) | High |
| One primary call to action | Gives a default next step: back to homepage, back to shop, contact us | High |
| Consistent branding | Signals the visitor is still on your site and not on a hijacked or expired domain | High |
| Correct 404 HTTP status + tracking | Keeps the index clean and lets you find which URLs generate errors | Essential |
1. Write a message a human would say
Avoid raw jargon such as “HTTP Error 404 Not Found: the requested resource could not be located”. Say what happened, in one line, then offer a way out:
- “This page no longer exists. It may have been moved, renamed or the product is out of our catalogue.”
- Keep the number 404 visible somewhere for the technical audience, but do not make it the headline of the whole experience.
- Never blame the user. “You typed the wrong address” is bad copy; “the link may be outdated” is better.
2. Put the search bar above the fold
On a store with hundreds of references, a visitor who wanted a specific item will happily retype its name. Pre-fill the search field with keywords extracted from the broken URL when you can. If the URL was /en/blue-running-shoes-42, pre-filling “blue running shoes” instantly converts an error into a results page.
3. Never strip the navigation
Full-screen creative 404 pages with no header look great in a portfolio and perform poorly in real life. Keep the main menu, the cart, the account link and the footer. The error page should feel like a page of your site, not a separate universe.
4. Suggest content, do not just apologise
Blocks that work well on e-commerce 404 pages:
- Top 4 to 8 bestsellers
- Main categories as large clickable tiles
- Current promotions or a discount code to compensate the friction
- Recently viewed products (very strong when the visitor already browsed the site)
- Latest blog articles for content-heavy sites
5. Give one obvious button
Two or three links maximum in the main call to action zone. “Back to the shop” as a primary button, “Contact us” as a secondary text link. Too many options recreates the paralysis you are trying to solve.
6. Stay on brand
Same fonts, same colours, same tone of voice. Humour is welcome if your brand is playful, but it must never replace the functional elements. A joke plus a search bar beats a joke alone every time.
7. Return a real 404 and track it
Two non negotiable technical points:
- The server must return status 404 (or 410 for content permanently removed on purpose).
- Fire a dedicated event in GA4 (for example
page_not_found) with the broken URL and the referrer as parameters, so you can build a report of your most damaging dead links.
9 creative 404 error page designs and why they work
Each of these examples is well known for its visual identity, but what interests us is the recovery mechanism hidden behind the illustration.
1. Slack: personality plus a real exit
Slack pairs a hand drawn, slightly absurd illustration with a short apologetic line and clear links back to the help centre and the homepage. Why it works: the tone matches the product perfectly, and the links target the two intentions a lost user actually has: get help, or start over.
Takeaway for a store: map your links to intentions, not to your sitemap.
2. GitHub: brand mascot plus site search
The famous parallax scene featuring the Octocat is memorable, but the important part is the search field and the navigation bar that stay in place. Why it works: the animation buys attention for two seconds, the search bar converts that attention into a new session path.
Takeaway: creativity earns the extra seconds, functionality uses them.
3. Spotify: turning the error into a category
Spotify keeps the full application shell in place, so the error is only a panel inside a working interface. Browsing, search and library remain one click away. Why it works: the visitor never leaves the product environment.
Takeaway: on a shop, embed the 404 content inside your normal layout instead of replacing it.
4. Airbnb: animation plus a support path
A light looping animation, one sentence, and links to the homepage and help centre. Why it works: Airbnb knows that a broken listing URL often means a frustrated user, so it puts customer support directly on the error page.
Takeaway: if your 404s often come from expired products, add a “tell us what you were looking for” link or a live chat trigger.
5. LEGO: the visual metaphor done right
A broken or misplaced brick character carries the message with zero text needed. Why it works: the metaphor is understood in half a second by every age group, including non native speakers, and the store navigation stays visible.
Takeaway: a visual metaphor beats a long paragraph for international audiences.
6. Marvel: comic panel storytelling
Marvel treats the error as a comic frame with a character breaking the fourth wall. Why it works: the page feels like content rather than an incident, which reduces the perceived failure of the site.
Takeaway: if you own a strong visual universe, use the 404 as an extra brand touchpoint, but keep the menu.
7. Patagonia: full width imagery plus shop links
A large lifestyle photograph, a short message, then direct links to the main shop sections. Why it works: the image reinforces desire while the links immediately push toward the catalogue, so the emotional and the commercial layers work together.
Takeaway: a hero image plus three category buttons is the simplest high performing e-commerce 404 layout. figma.com published something useful on the subject.
8. Pixar: borrowing an emotion from the brand universe
Pixar uses a sad character from its own films to express the disappointment for you. Why it works: the visitor smiles instead of blaming the site, and the negative emotion is defused before it becomes an exit.
Takeaway: humour and empathy reduce the frustration that drives immediate bounces.
9. NPR: the error page that becomes content
NPR famously redirects lost visitors toward a curated selection of archive stories, effectively transforming the error into a reading recommendation engine. Why it works: instead of one exit link, it offers a genuine reason to stay and consume content.
Takeaway: this is the model to copy on an online store. Replace “archive stories” with “bestsellers, current deals and recently viewed products” and you get the highest recovery rate of all the patterns listed here.
Quick recap table
| Example | Main recovery mechanism | Copy this if |
|---|---|---|
| Slack | Intent based links | You have a strong support need |
| GitHub | Search bar in focus | You have a large catalogue |
| Spotify | Error inside the normal layout | You want the simplest fix |
| Airbnb | Direct access to help | Your 404s come from expired listings |
| LEGO | Universal visual metaphor | You sell internationally |
| Marvel | Brand storytelling | You own a visual universe |
| Patagonia | Hero image plus category links | You are a lifestyle brand |
| Pixar | Emotional defusing | Your tone of voice is warm |
| NPR | Content or product recommendations | You want maximum recovery rate |
How to build a custom 404 page on PrestaShop
PrestaShop already returns a proper 404 status for unknown URLs, so most of the work is on the template and the content blocks. ramotion.com published something useful on the subject.
Where the template lives
- In your child theme, edit or create
themes/your-theme/templates/errors/not-found.tpl. - Extend the standard
page.tpllayout so the header, menu, cart and footer are inherited automatically. - Keep the file translatable: wrap every string with the translation function rather than hardcoding text, otherwise multilingual shops will display English on all fronts.
Blocks worth adding
- The native search widget, ideally pre-filled from the requested URL.
- A products block: bestsellers, new products or a hand picked category.
- The main categories as image tiles.
- A contact block or a link to your customer service page.
- A newsletter or discount code block if you want to capture the visit rather than lose it.
Do not forget the redirects
A great 404 page is a safety net, not a strategy. Every URL that receives real traffic deserves a 301 redirect toward the closest equivalent page:
- Deleted product to its parent category, or to a replacement reference.
- Old category URL to the renamed one.
- Legacy URLs from a previous CMS to their new counterparts.
Redirect to a relevant page, not systematically to the homepage: mass redirects to the homepage are usually treated as soft 404s and bring no SEO benefit.
Find your broken URLs
- Google Search Console, Pages report, “Not found (404)” section: shows what crawlers hit.
- GA4 with a dedicated event: shows what real users hit, which is the list that costs you money.
- A crawler (Screaming Frog, Sitebulb or similar): shows internal broken links you can fix directly in your content.
- Server logs: the most complete source, especially for bot traffic and old backlinks.
Common mistakes in 404 error page design
- Returning a 200 status with a “page not found” message. Classic soft 404, pollutes the index.
- Auto redirecting after 5 seconds. It removes the visitor’s control and often breaks the back button.
- A full screen illustration with no menu. Beautiful in a portfolio, terrible on mobile.
- Blaming the user in the copy.
- Forgetting to translate the page on multilingual shops.
- Indexing the 404 template as a real page because it is reachable at a static URL such as /404.
- Never measuring anything, so the same broken links keep bleeding traffic for years.
A simple KPI to track
Define your 404 recovery rate: the percentage of sessions that hit a 404 page and then view at least one more page. Below 40 percent, your error page is a dead end. Above 70 percent, it is doing its job. Test one variable at a time (search bar position, number of suggested products, wording of the button) and keep the version with the best recovery rate. That single metric is what separates a decorative 404 from a profitable one.
FAQ
What should a 404 page look like?
It should look like a normal page of your site with your header, menu and footer, plus a short human explanation, a search bar, two or three navigation links and a block of suggested products or articles. Illustration and humour are optional; the functional elements are not.
How do I create a 404 error page?
Design the layout with the seven elements listed above, then implement it in your CMS template. On PrestaShop, that means editing templates/errors/not-found.tpl in your child theme and making sure the server still returns the 404 status code. On a static site, declare the file in your server configuration (ErrorDocument 404 /404.html on Apache, error_page 404 /404.html; on Nginx).
Can you customise a 404 page?
Yes, on virtually every platform. You can control the layout, copy, imagery and dynamic blocks. The only thing you should never change is the HTTP status code returned by the server.
Are 404 pages bad for SEO?
404s in themselves are normal and expected on any site that evolves. They become a problem when they are numerous, when they receive traffic or backlinks you never redirect, when internal links point to them, or when they return a 200 status. Fix the valuable ones with 301 redirects and let the rest return a clean 404.
Should I use 404 or 410?
Use 404 for a page that is simply not found, and 410 when you deliberately and permanently removed content and want it dropped from the index faster. Both are safe; 410 is just a stronger signal. There’s a good explainer over at thestory.is.
How many products should I show on a 404 page?
Between four and eight. Enough to trigger interest, not enough to compete with the search bar and the main call to action.
Conclusion
Great 404 error page design is not about winning a design award, it is about recovering a visitor who was one click away from your catalogue. Start with the seven functional elements, add your brand personality on top, return the correct status code, track the broken URLs and redirect the ones that matter. Do that and your error page stops being a leak and becomes one of the cheapest conversion improvements you can make on your store.