creative designer

If you've read my posts you'll know that things talked about here are a mix of crazy and silly. Let's hack around with Shopify 404 page so you make use of different versions and show different content.

There's multiple 404 pages. At least from a cache perspective.

If you look at any Shopify store you'll find there's a default 404 page. Feel free to have your eyes assaulted by a giant icon on mine.

The 404 page is cached but what's interesting - and this could totally change at any point - there is four of versions cached. If you've found other combinations leave a note in the comments sections below. I got to four and gave up bothering to look for others.

Before we go further, the warning.

This was uncovered through my general daily tinkering so you're not getting some ground breaking insider info. Also, this idea is just silly enough that it shouldn't be used in production. Or at least don't rely on it working long term or giving you reliable results.

What are the versions?

  • if you look at /secret or /bar or even /account/poodles you'll see the one cached version. Let's call that CACHE A
  • If you look at /collections/doesnotexist or /products/notthisoneeither you'll see CACHE B
  • if you look at /pages/nopenopenope or /pages/thesearesillyexamples you'll see CACHE C
  • if you look at /apps/thisisnotanapp or /a/notevenclose you'll see CACHE D

You can use my shopify experiments shop if you want to test it instead of using your own. I'll make sure that the url that was used to cache the page is shown somewhere in the design. 

Here's a couple of quick links to 404s to save you typing: This. That. Another.

Weird right? But also maybe a little awesome since we could alter the 404 template to show different layouts for each of those uses cases. I will do up the code driving the experiment shops 404 page shortly and likely add some more clear examples on interesting use cases.

Imagine on CACHE A you show a special offer landing page, on CACHE B show some new products, on CACHE C a FAQ page, etc. You don't want to make it so custom that it stops looking like a 404 page but I kind of like this idea.

The code I used in the 404 page.

Grab it from github or just copy it from below.

grabbing the liquid snippet...

My SEO guys said that...

Remember when I said this was a silly idea? Even if you alter the title (didn't cover that here but you can) and change the content, this is still a 404 page. The response headers will return 404. Google will see it as a 404. There's no changing that so SEO value is zero.

Final notes

There was some clashing with collection and product urls but never bothered digging into it too deep. I may return to this and test it more but time to look at other things.

Like to work with me?

Let's talk