How to Create a Custom 404 Error Page and Why You Should
Have you ever searched for something online only to reach a dead end? If you found a link, clicked on it, and ended up reading a message that says, “sorry, we can’t find what you’re looking for,” you’ve just encountered a 404 error. Naturally, this concluded your time spent on that website. Generic 404 error pages tend to have that affect.
We get 404 errors when two computers connect but, one of the computers couldn’t find what the other computer requested - the web page associated with the link. Another way of looking at it is:
Your GPS brought you to the town but not to the specific destination address.
Some 404 error pages will end at, “sorry, we can’t find what you’re looking for,” and just kind of leave you hanging. Others are more helpful. They offer direction and even some personality. These are customized 404 pages. This is the version you want.
Think of your customized error page as an invitation. It’s an opportunity to invite your site visitor back in and stay on your website instead of leaving, or “bouncing.” It’s hard work directing individuals to our sites so, let’s make sure we don’t send them away.
By default, Squarespace offers a generic 404 error page. It looks like this:
It’s not bad! There are some drawbacks though. Since the Squarespace default has to support the general customer base, it is not specific to our own business. It also doesn’t have our branding or links that might be better suited for our potential clients and customers.
So, here’s what we can do. In this post, I will show you how to create your own, custom 404 error page. Let’s start with some helpful pieces of information we can include on ours, such as:
We don’t have to include all of these, and not all of these suggestions make sense for everyone. Consider what might be helpful for your potential customers and clients.
For this demonstration, branding, custom copy, and links will be added. We’re going to keep this super simple!
Step One: Login to Squarespace
Make sure you’re logged in to your Squarespace account and on the site you want to add the custom 404 page.
Squarespace Login: https://account.squarespace.com/
Step Two: Squarespace Backend
After logging in, you’ll see a menu. See image below.
Step Three: Create a New Page
Here, you’ll see all the pages for your website. These are divided into sections. Don’t worry if what you see on your end is different, but most Squarespace templates will have the following:
Scroll down to NOT LINKED
Click the “ +” to the right of NOT LINKED
A box will pop up and give you some options.
Choose COVER PAGE.
Cover pages are versatile and make great custom 404 pages. They’re laser-focused and have a beautiful structure to them.
If you like, you can choose PAGE instead, however; for this demo, a COVER PAGE will be used.
Name the new page. Something like 404 Error Page will do nicely.
Step Four: Design Your custom 404 Page
In this tutorial, I give a more detailed, step-by-step method for creating a cover page. Check that out if you’d like to learn more.
Choose your layout. Cover pages have a singular goal, which is great for our 404 page since you don’t have to think too much about other factors. Here, we only have one - welcome people into our site instead of sending them away.
I recommend using one of the LANDING layouts.
If it makes sense for your business, PROFILE and LOCATION might work well for you. In most cases, one of the LANDING layouts is best.
Make your selection and then head on over to the next options to add your branding, custom copy, and links. For cover pages, our links will be in the form of buttons.
Be sure to save your work at each stage.
Step Five: Connect Your New Custom 404 Error Page
Now that you have your page all ready to go, we’re going to connect it to your site. Don’t worry, this will be super simple and I will walk you through it.
You’ll want to return to the main menu, the backend menu. This is the same one from Step Two.
Next, navigate to DESIGN
Select NOT FOUND/404 PAGE
From the dropdown menu, select the new page you’ve created.
And there you have it - your own personalized, 404 error page!