Ecommerce 404 Pages: How to Turn Broken Paths Into Better Shopping Experiences
How to design and manage ecommerce 404 pages: correct status codes, recovery content, search, redirects for discontinued products, monitoring and soft 404s.
Quick answer
An ecommerce 404 page should return a real 404 status and help shoppers keep shopping: keep the normal header and navigation, explain plainly that the page wasn't found, put a search field front and centre, and offer main categories, popular products and a contact option. Behind the page, prevent 404s: redirect discontinued products and changed URLs to genuinely relevant replacements, fix internal links that point to missing pages, avoid redirecting everything to the homepage, and monitor 404s in Search Console and analytics.
How Stores End Up With 404s
Stores create 404s constantly: discontinued products, renamed handles, retired campaign collections, migrations, typos in marketing links and old links from other sites. A few are inevitable; many are preventable with a product retirement process and redirects. For the SEO side of inventory changes, see ecommerce SEO.
Designing the 404 Page
The diagram above shows the essentials.
- The site's normal header, navigation and footer
- A short, plain message: the page wasn't found or has moved
- A prominent search field
- Links to main categories and new arrivals
- Popular or bestselling products
- Contact or help links
- Optional: a report-a-broken-link option
Status Codes Matter
The page must return an HTTP 404 (or 410 for deliberately removed content). A “not found” page that returns 200 is a soft 404: search engines may index it as thin content and keep recrawling it. Google's documentation explains how status codes affect crawling and how Search Console reports soft 404s (Google Search Central).
When to Redirect and When to 404
| Situation | Handling |
|---|---|
| Product temporarily out of stock | Keep the page live; show availability and alerts |
| Product discontinued, close replacement | 301 to the replacement |
| Product discontinued, relevant category exists | 301 to the category if it genuinely helps |
| No relevant replacement | 404 or 410 |
| URL changed (handle, migration) | 301 to the new URL |
| Mistyped URL | 404 with good recovery |
Worth noting
Redirecting every missing URL to the homepage is a common shortcut. It confuses shoppers and can be treated as a soft 404.
A Product Retirement Process
Most 404s on established stores come from products being removed without a plan. Decide, for each discontinued product, whether it has a replacement or relevant category, create the redirect before unpublishing, update internal links and feeds, and keep a record. See Shopify product SEO for platform specifics.
Losing traffic to broken paths?
ZSpace finds the 404s and redirect gaps that matter and sets up a process so they don't come back.
Monitoring 404s
- Search Console page indexing report: not found and soft 404
- Site crawls for internal links pointing to 404s
- Analytics events on the 404 template with requested URL and referrer
- Marketing link checks before campaigns go live
- Redirect audits after migrations and redesigns
Platform Notes
On Shopify, the 404 page is a theme template that can be customized, and redirects are managed in the admin's URL redirects, individually or by CSV import; Shopify offers to create a redirect when you change a handle. On custom builds, make sure the framework returns a true 404 status for missing routes. See Shopify store migration.
Accessibility and Performance
The 404 page should load fast and work with keyboards and screen readers like any other page: a clear heading, focusable search, meaningful link text. Avoid heavy animations that delay recovery.
Want every broken path to lead back to shopping?
Talk to ZSpace about recovery UX, technical SEO fixes and Shopify redirects.
Conclusion
A good 404 page recovers shoppers; a good redirect process prevents most 404s in the first place. Return real 404s, offer search and useful routes, redirect only to relevant replacements, and monitor. For valid pages with nothing to show, see ecommerce empty states.
Related: ecommerce empty states and site search.
Common questions
A plain explanation, the normal header and navigation, a prominent search field, links to main categories, popular products and a contact option.