Best 404 page examples in e-commerce

Good day to all Amasty blog readers!

Today we’re speaking on a topic that’s often missed by shops: making your 404 stand out.

What we can do with 404 error pages

The bigger your shop is, the more important the issue of 404 page appears to be.

For e-commerce sites, 404 page plays a huge role: it should hook the visitor not to let him go away from the wrong page. Thus, there are many options you could use for your 404 page:

  • search box;
  • popular/bestselling items;
  • a coupon code or special offers;
  • the right piece of text explaining what happened;
  • category list;
  • featured/last posts/items;
  • key links;
  • or any combination of these elements.

However, there’s another side of the story: as always, you have to stand out of the crowd. Beyond the techy and marketing tasks this pages solve, you could use it for bigger ideas:

404 error pages are still ignored by shops

Doing research for the article, I looked through hundreds of top Alexa sites on Shopping, choosing the funniest or the most beautiful or creative 404 error page examples. And that’s what I’ve found:

  • lots and lots of shops use the default 404 page – which isn’t a deadly sin, but is definitely an opportunity to do a little bit more here;
  • lots of shops redirect from non-existent pages to category/previous/home pages, which is also okay, but still may be rather confusing, especially for inexperienced Internet users. It’s good to show a small notification that the page a visitor requested does not exist and he was redirected.
  • lots of shops do not have a proper 404 page at all. In this case you see an empty page, or a page showing a standard 404 error message returned by the server, no design, no links whatsoever. I would estimate the number of shops without a proper (at least default) CMS 404 page around 40%, which is a surprisingly big amount for the top Alexa list!
  • other small issues like showing the 404 error text in a wrong language.
  • creative, funny or at least remarkable 404 pages are not more than 3% – in fact, I spend much more time I though it might need me to compose a decent list of 404 page examples.

Finally: best 404 error page examples for 2014 in e-commerce

But still I was lucky to meet interesting, amusing, funny and beautiful 404 error pages from e-commerce sites; they’re worth a mention and a couple of your minutes. Who knows, maybe you’ll find inspiration from this list.

If you need to have a look at the details of the screenshots, just click to enlarge the pictures.

1. underarmour.com

Nothing complicated – but the powerful image and coloring make this 404 page stand out.

Best 404 error page examples for e-commerce 1

2. nespresso.com

Brand everything! Just one powerful image with a perfect cup of coffee turns unpleasant experience of visiting a deleted or moved page into something better.

Best 404 error page examples for e-commerce 2

3. futureshop.ca

A nice example: Future Shop made a 404 page which really adds to the website’s design and uses a nice idea of the gadget showing the custom 404 error text.

Best 303 error page examples for e-commerce 3

4. modcloth.com

A dog in pants and a funny call to action; good mood guaranteed.

Best 404 error page examples for e-commerce 4

5. lego.com

A perfect 404 page branding example from Lego:

Best 404 error page examples for e-commerce 5

6. backcountry.com

This is one of my fav 404 e-commerce pages; here we can see a full sized powerful picture strongly connected with the brand.

Best 404 error page examples for e-commerce 6

7. bedbathandbeyond.com

Nice example of combining great wording and a custom picture. A very bright and emotional 404 error page.

Best 404 error page examples for e-commerce 7

8. ikea.com

A very simple but keen page!

Best 404 error page examples for e-commerce 8

9. etsy.com

Things happen, says 404 page for Etsy.

Best 404 error page examples for e-commerce 9

10. munchkin.com

Somebody looks very upset because of the page missing.

Best 404 error page examples for e-commerce 10

11. shop.lululemon.com

At first sight this page looks rather ordinary: a header, some text and a stock image. But if you take a closer look…

Best 404 error page examples for e-commerce 11

12. dish.com

Another nice example of using a photo of high contrast and powerful colors.

Best 404 error page examples for e-commerce 12

13. mlb.mlb.com

This 404 error page shows random oof-y GIFs. Some folks might even need will power not to get stuck.

Best 404 error page examples for e-commerce 13

14. bluenile.com

A simple and elegant 404 page example; also it’s a very mild call to action, as from our nature we don’t like empty boxes and tend to fill them.

Best 404 error page examples for e-commerce 14

15. karmaloop.com

Even a man without pants can be okay if it suits your audience.

Best 404 error page examples for e-commerce 15

16. duluthtrading.com

Well… Don’t know who was the first to catch up with the idea.

 Best 404 error page examples for e-commerce 16

17. otterbox.com

Another nice idea from Otterbox: unicorns and creative wording. ‘If you are feeling optimistic’ is definitely a hit.

Best 404 error page examples for e-commerce 17

18. converse.com

An excellent example of a minimalistic 404 error page: black and white, no pics, just color and a couple of words plus a link to the main page.

Best 404 error page examples for e-commerce 18

19. opticsplanet.com

And again a decent example of using products you actually sell on the 404 page.

Best 404 error page examples for e-commerce 19

20. stevemadden.com

Here’s a lovely design that suits the overall website layout perfectly and uses its powerful sides: wise typography and soulful pics.

Best 404 error page examples for e-commerce

21. patagonia.com

Thumbs up for a page that joined a heavy metal band.

Best 404 error page examples for e-commerce 21

Conclusion

So, what makes an outstanding 404 page if we look at these examples? (Excluding the standard blocks like search, links and so on)

  • branding: using your brand, products or services pics or mentions;
  • powerful pictures that catch the eye; use high contrast or rich color and try to combine it with your website’s design;
  • wise wording: a tweak or two will do;
  • humor, jokes and funny things that your audience will love.

Did you like some particular ones? Or can you share other 404 page examples you’ve recently met?