Reasons to Create a Custom 404 Page in Squarespace (and How to Do It)

create-a-custom-404-page-squarespace

Well firstly, what is a 404 Page?

A 404 page, also known as an 'error page' is usually a default page you get to on a website when you've followed a broken link, or when content that was once there has been removed, or when that page just doesn't exist anymore.

First prize is that you regularly clean up broken links, remove irrelevant content and keep your site neat and tidy, but even then it is good practice to have a 404 page in place in the event someone mis-types a word, or you've overlooked a broken link. 

The standard Squarespace 404 page

As a Squarespace user, a default 404 page has been set up for you and will show up if someone follows a broken link, or certain content can't be found on your site. It will look something like this, and will tell visitors that the page couldn't be found. It also provides a link back to the home page, or an option to search the website. 

 The default text on a Squarespace 404 page. 

The default text on a Squarespace 404 page. 

Some examples of custom 404 pages

1. Tubik Studio

This web design company uses a beautifully designed graphic for their 404 page, with an explanation of what is going on and an option to return to where they came from.

tubik-404-page

2. MailChimp

MailChimp carries through their branding and message to their 404 page with this distinctive chimp illustrated as a detective. But they don't necessarily tell you what to do next. 

mailchimp-404-page

3. Hardrock Cafe

Hardrock Cafe's error page also uses a similar voice to the rest of the site and brand, offers an apology and then provides a number of links to choose from, including returning 'to whence you came from' and other articles to read. 

hardrock-404-page

4. eBay

eBay keeps it simple and straightforward, letting you know that something went wrong, then providing two links to carry on using their site. 

eBay-404-page

5. Pixar

Pixar draws on one of their animated characters (in tears at the fact that you're lost!) and provides an explanation of what has happened using the language and context of their movie "Inside Out."  

pixar-404-page

6. Adidas

True to form, Adidas uses their 404 page as an opportunity to motivate you to keep trying! They have beautiful branded background images, and a search option to continue using their site. 

Adidas-404-page

A case for customising your 404 page 

So if you're building a website in Squarespace and it has already set up a basic 404 page for you, why should you make your own customised page, rather than using what has been provided?

Here are some reasons I think it's a good idea to customise your 404 page:

  • Personality: it is another opportunity to let the personality of your brand shine through.
  • Assistance & direction: you can provide help and guidance rather than just announcing that the visitor to your site is lost.
  • Humour: many companies use the 404 page to let the humorous side of their brand's identity show. You might want to go this route.
  • Design skills: if you're an illustrator, photographer, or designer, the 404 page is a great place to show off more of your design skills. Custom design something just for your brand!
  • Branding touchpoint: this page is yet another touch point in the process of someone interacting with your site to communicate who you are and what you stand for in the tone of voice you use, the visuals you select, and the direction you provide.
  • Showcase and further reading: instead of providing just a search bar, you might also want to showcase your most popular blog posts, your favourite projects, or your latest work.

How to create a custom 404 page with Squarespace.

Now that you've had a bit of background on what a 404 page is, some examples of how other companies have chosen to design theirs, and a few reasons why it's a good idea to set yours up, let's get to how to actually create one within Squarespace. 

1. Create a new page

In the main control panel once you've logged in to your Squarespace account, select 'Pages' and add a new page in the 'not linked section.

 Adding a new 'not linked' page from your 'Pages' section

Adding a new 'not linked' page from your 'Pages' section

2. Give it a name

Name it something sensible like '404' or 'Custom 404'.

 Add a page title

Add a page title

3. Design your page

Add the elements you want as part of your page. Do you want to start with a statement ('This page is broken'), or an apology ('Sorry, the content you're looking for is no longer here.')? Do you want to add a search bar? Perhaps you'd like a button to lead them back to the homepage? Maybe you want to add a blog summary or gallery. This is entirely up to you. 

Whatever you do, I recommend you make sure your 404 page is clear, simple, and provides some direction for the user to navigate their way back to where they were, or to continue using your site in some way. 

I also recommend that you make sure your page matches the rest of your site in the way it is set up and designed so that the user doesn't get the impression they've suddenly arrived on a totally different website. Here's an example of how I set mine up. The tone of writing I use matches the tone I generally use - informal and friendly. There isn't much going on, it is clean with a lot of white space and there are a few options to either search the site or to click one of two buttons. I also don't use the term '404'. 

bearista-404-page

Once you've finished designing your page, save it and continue to the next step.

4. Connect your custom 404 page

  • Navigate to 'Settings'
  • Go to 'Advanced'
  • Go to '404 Error/Page Not Found'
  • From the drop-down menu, select the page you've just created, and click 'save'
 
add-custom-404-page
 

4. Test it out

In a new tab, type out your domain name, a forward slash (/) followed by some kind of nonsense or typo. (For example, to test mine out I typed in www.bearista.co.za/lol and waited.) Your 404 page should come up. Test each button and link to make sure it is working. As part of the testing phase, send your 404 page to a few people and ask them if it is helpful and makes sense. Get their feedback and make whatever tweaks are necessary.

 

And that's it. You have a customised 404 page. Nice work! 


As I end off, just a reminder to make sure your 404 page matches the personality, style and tone of the rest of your site. Ask yourself whether it is helpful and straightforward, and try to imagine if you were a visitor who got lost on your page, whether you'd know how to navigate out of it, whether you'd be put off, or whether you'd stick around to explore a little more. 


This post is another in my series on Squarespace. If you're interested in reading more along the same lines, here are a few other posts for you.