How to create a custom 404 page in Squarespace (2022)

Here's a step-by-step tutorial on how to create and set up a custom 404 page in Squarespace.

We'll go over:

The exact steps to design the custom 404 page.
Some helpful tips and what makes a good 404 page.
Creative 404 page examples from other Squarespace sites.

By the end of this tutorial, you will have successfully created a custom 404 page that impresses your visitor and increases value for your business.

Let's dive right in.

Create a new custom 404 page in Squarespace

Here's the step-by-step guide to creating a custom 404 page in Squarespace.

2. Create a new black page under NOT LINKED.

3. Name the page 404 Page.

4. Click Edit to start customizing the 404 page. Make sure the page you're editing is the newly created 404 page (it should be highlighted).

5. Add a new Page Section then add a new blank section.

6. Add the following content blocks, then edit and arrange them accordingly.

Start adding the blocks for the custom 404 page

Image - Add a profile photo to personalize the (horrid) experience!
Text - Let the visitors know what's wrong and that they should contact you so you can get back to them.
Summary block - Feature your most popular blog posts. This is done via featured blog posts. Alternatively you can add a section to advertise your products or service.

With the newly released Fluid Engine, Squarespace has made it easier to design these pages. Just drag the text and image blocks into their respective order and they should align automatically.

7. That's it. You've created a new custom 404 page. Click Done from the top corner to save changes.

8. The last step is to set the new page as the default 404 page. From your Squarespace dashboard, head to Design ➝ 404 page, then select the new 404 page from the drop down menu.

Save the changes and that's it. You've successfully created and set up a new custom 404 page!

Helpful tips and what makes a good 404 page

These are some helpful things you can include in your 404 page to improve the page experience.

Make the title apparent and let the users know the page they're looking for doesn't exist or has been removed.
Offer a way for them to reach out to you by including your email or contact number.
Help users navigate the site by including relevant links.
Provide value to the users by offering free resources such as templates, guides, or blog posts.
Personalize the page with photos and humor (optional).

Need some inspiration? Read below to learn how top Squarespace designers design their 404 pages.

5 Creative custom 404 page design examples from other Squarespace sites

Take your custom 404 page one step further by taking inspiration from other Squarespace sites.

1. Taylor Nguyen

Taylor Nguyen is a Toronto-based freelance web designer who helps small businesses stand out with her design prowess.

Her 404 page is carefully designed, and it doesn't look like a broken page at all!

What makes this custom 404 page stands out

The use of custom fonts attracts the reader, letting them know what the issue is.
It offers a Search bar to help users navigate to their desired pages
She also provides values to her visitors by offering free website project planners to her potential clients.

2. Big Cat Creative

Erica and her team run Big Cat Creative, a web design agency based in New Zealand. It doesn't hurt to incorporate some humor in their 404 page!

What makes this custom 404 page great

The use of GIF and humor to lighten an otherwise bad experience for the visitor.
Helpful suggestions visitors can do instead, such as reading their blog, shop their website templates, or sign up for their free course.

3. Lauren Taylar

Lauren is a web designer and SEO consultant who helps female creatives build kickass professional websites.

While the 404 page is simple, I like that she added some personal touch to it and made it practical for her visitors.

Why this custom 404 page works

The use of a personalized profile photo that relates to the visitor.
Links to her service for potential business collaboration.
Include links to her recent blog posts to increase site traffic.

4. Kate Scott

kate Scott creates smart website templates that help entrepreneurs grow their online businesses. Sometimes keeping it simple is all you need, and that's what Kate did for her 404 page.

What makes this custom 404 page works

A giant header that attracts the user's attention.
Offer a search alternative to help visitors navigate the site.
List an archive of all blog articles to help visitors find the article they're looking for.

5. Kerstin Martin

Kerstin is a solopreneur who runs a successful blogging and web design business. She obviously owns a cat and doesn't mind low-key blaming her for the 'bad experience'.

What makes this custom 404 page interesting

Quirky personal photos and humor make an otherwise boring page interesting.
It offers a search function to help users find the relevant page.
Include quick links to help visitors navigate the site.

Conclusion

404 pages are often uninspiring, but yours doesn't have to be that way.

You can add value to your visitors and your business by creating a custom 404 page that incorporates useful links, content, and resources.

Your visitors get something out of the bad experience, and you might end up with a potential client. It's a win-win situation.

David Nge

David is the founder of MakingThatWebsite.com and started making websites for businesses back in 2014. He's a keen learner and wants to share his journey and knowledge with other business owners and freelancers. He launched MakingThatWebsite.com in 2021 to make website building more approachable and scalable for businesses.

Have a tutorial you want to learn? Leave a suggestion here.