How to Create a Custom 404 Page in Squarespace

If you’ve had your website for a while, it’s not uncommon for some links to go missing. Deleting a page or a blog post without adding a redirect to a page that has current information instead will result in a 404 error. A 404 error is simply the browser telling your visitors that the content at the link they’ve followed cannot be found.

Most website platforms, like Squarespace, come with a default 404 page. But often, it doesn’t look very appealing nor does it do much to convince your visitors to stick around. Luckily, we can easily change that and in this video tutorial, I’ll show you how.

Transcript: How to Create a Custom 404 Page in Squarespace

Hey guys, welcome back to my channel.

So in today's video I have a super short and sweet tutorial for you and that's how to create a custom 404 page in Squarespace.

What Is A 404 Page?

So, basically, a 404 page shows up when somebody clicks a link that doesn't exist — a broken link on your website so a link that either changed the url or never existed in the first place. Or maybe you had that page on your website at some point in time but then you deleted it and now it no longer exists.

So when that happens, what's going to happen in that case is — they're going to click on it and it's not going to exist and they're going to be taken to a page for example that looks like… (let's go to podcast to show you an example)

So basically this is what it looks like now. Obviously, it's switching me back to the edit mode but this is what it looks like. And as you can see, it doesn't look very appealing nor does it really help visitors to actually stay on your website.

So what we want to do is — one, we want to create a page that looks more appealing than this and that basically encourages them to stay on your website longer.

How To Create A 404 Page In Squarespace

So we're going to go to Pages and then you're going to go to the Not Linked section. You're going to click plus and we're going to start with a blank page.

I'm going to name it Custom 404 but you feel free to name it whatever you want.

So Custom 404 page and now we're going to click on Edit and then I'm going to click Add Section.

And I'm going to add a blank section and that's going to give us a text block. So we're going going to use that and we're going to enter some text.

I'm going to center, I'm going to keep it as — Actually I'm going to change the first line into Heading 2 and then i'm going to leave this as paragraph. Actually I'm going to change it to Paragraph 1 and I'm going to center the text.

Now, what you include on your 404 page is entirely up to you and the type of business that you have so obviously the goal is to keep them on your website. So, what I'm going to do is first— I'm going to let them search for whatever it is they were looking for in the first place.

So we are going to add a search bar or a search block. I'm not going to limit this to specific pages as I want them to be able to search the entire website. You can choose between — you can choose to allow quick preview which basically will give them a suggestion as they're typing and you can switch between a dark and a light theme.

So I'm going to leave it as dark and then I'm going to add another text block that says:

Or read the blog

And then I'm going to add a summary block. We're going to choose the blog page and then you can style it the way you usually style your summary block. So I'm going to:

• remove the date

• under design I'm going to select the carousel layout and we're just going to leave this as three posts

• configure the rest of the settings as you want the way you usually style them.

I'm not going to play around a lot with those i'm just going to toggle on here the read more link and I'm going to leave it like that.

I'm just going to center this heading 3 like that, maybe make it bold. No, I'm just going to leave it like that. Then, I'm going to add a spacer block in between the search and this summary block and then I'm going to add another text block that says:

Or browse the shop

I'm going to change that to Heading 3, center it, and now I'm going to add another summary block. This time I'm going to select the shop page and again for the design:

• I'm just going to choose the carousel

• I'm going to switch this to three products

• here I'm going to remove this featured heading

• I want to remove the excerpt

• we're going to enable the product quick view

And I'm going to leave the rest of the settings as they are and then what I'm going to do is— because I want as much content to be visible as possible when the page loads, I don't want them to go have to go scrolling through the entire page — So what I'm going to do is I'm going to take this— I'm going to add another spacer block in between this summary and this text block and then I'm going to drag the spacer next to the spacer block that's right here and i'm going to put it like this so that we have two columns.

And then I'm going to reorganize the layout like that. And then I'm going to add another spacer block and drop it in between those two just to give them a little breathing room

And that is our custom 404 page and I'm liking how that looks. And when I’m done — so obviously you can add other items if you want here — I'm pretty happy with how this looks and I'm going to click on save changes.

And then there's only one more thing we need to do. And the only other thing that i'm going to do here under Page Settings is I'm going to go under SEO and I'm going to hide from search results which basically means that visitors will still be able to access it, of course, when they come across a broken link or thing that doesn't exist but search engines will not index it and it's not necessary for search engines to index the 404 page so we're just going to hide it from search results so that it doesn't show up when somebody searches for your website and that thing pops up in the results page.

How to Change The Default 404 Page In Squarespace To a Custom 404 Page

And then what we need to do is we're going to go to Settings, we're going to go to Design > 404 page and then for — here, under this drop down you're going to select the Custom 404 page or however you named the page that you just created.

And then you're going to click save, and we're going to back out of this and let's try this again. So when I type in podcast and let me search for that it takes us to the custom 404 page that we just made.

And this is what it looks like in full screen. So they have the option to search for it, they can read the blog or they can go, browsing to the shop and when they click on Quick View, they can immediately add this to the cart and go check out, they can move on to the next product.

That's what it looks like on desktop devices and as you can see it's also responsive and that's what it looks like on the mobile phone. And that's how you can create the custom 404 page for your website and that's it for today's video.

If you want to learn more about launching a website for your business I have a free interactive website roadmap that walks you through all the steps needed to launch a website step by step you can access it in PDF format as well as more interactive formats for Asana, ClickUp, Notion, and Trello.

I'll link to it in the description down below so if that's something you want, be sure to click that link. And if you want to binge watch even more Squarespace and tech tutorials be sure to watch the next video. I'll see you next time, bye!

Final Thoughts

Want to save a ton of time on your website design? Get a head start with a premium, modern, feminine Squarespace template designed specifically for coaches and service providers. What’s even better, they come preinstalled in your Squarespace account so all you have to do is replace content, add your images, connect your domain, and upgrade your site!