How To Create a Custom 404 Error Page

The 404 page that comes with every BigCommerce template is not very customer service oriented. It basically tells customers that they've done something wrong, to figure it out for themselves and offers no further assistance. We can certainly do better than that!

It's very important to take responsibility for the customer landing on the 404 page. Tell them that you are sorry they landed there and then offer ways that they might be able to find what they are looking for as well as ways they can contact you for help.

Once you know what you would like the 404 page to say, here is how you create it ….

Create the Code for Your Custom 404 Page

I've got some good new and I've got some bad news. I always like to get the bad out of the way first, so here goes … you are going to have to create your custom 404 page using HTML. The good news is that it's pretty basic HTML and the even better news is that you don't need to know any HTML at all if you use CKEditor.

Simply type what you want to appear on your 404 page into the standard WYSIWYG editor. Add a picture, too, if you like! Here is what we did for our prototype store – birdcagesnow.com - using CKEditor:

ckeditor WYSIWYG editor

After you have the copy laid out the way you want it, click the Source button (circled in red, above) to view the HTML source code. That is the code that you will be copying and pasting into your BigCommerce template.

Here is the source code for our custom 404 page for the Bird Cages Now site:

source code from ckeditor

Insert the Code Into Your Big Commerce Template

1. Login to your BigCommerce Control Panel and click on the Design link at the top-right.

2. Click the Browse Template Files button.

3. In the bottom-left window section, scroll to the 404.html layout file (it should be the second one listed in the “Layouts” section) and click on it to open it in the main editing window on the right.

4. Delete all of the code that we have highlighted in the below picture:old 404 error code in BigCommerce5. Your page should now look like this:deleted lines of code from 404 page in BigCommerce6. Copy the code you created using the CKEditor and paste it into the blank space created when you deleted the other code (or, if you are an HTML “Master” simply type the code you want for your 404 page into the blank space). Our 404 template file now looks like this:

new 404 page code
UPDATE:
We decided we did not like the generic "Not Found" heading on the page and decided to change that to "Whoops!" Just above where you inserted your own code, you will see a line of code that looks like this ...<h2 class="TitleHeading">%%LNG_NotFound%%</h2>We changed that to "Whoops!" by replacing it with this:

<h2 class="TitleHeading">Whoops!</h2>

7. Click the Save button at the top left of the screen to save your changes.

That's it; we're done! We now have a 404 page that is much more customer service focused.

Facebook Comments