How to Create a Custom 404 Page with Built-In Element Blocks

Element makes it easy to create a custom “Page Not Found” page for your VOLT store. Here’s how to best combine built-in Blocks to make a 404 page with VOLT’s Site Designer.

What is a “Page Not Found” Page?

It is common for users of an ecommerce store to end up on a “Page Not Found” page. A “Page Not Found” page is shown when there is no content at a given link (or URL) on your site.

This page is also called “404 Not Found” or simply a “404 page.” The name comes from the HTML code (“404”) returned by the server when a page is not found.

A “Page Not Found” page might occur when someone is following an old link or old bookmark that no longer exists.

If a product has been removed, but a user visits an old link, then a “Page Not Found” page will be shown. This can occur when a page’s “slug” (the part of a URL that identifies that page on a website, also called a “page slug”) has been changed since a user’s last visit.

Another, less-common way to reach the “Page Not Found” page is if a user is editing a URL to your site but enters a URL for a page that does not exist.

A custom “Page Not Found” page will help your users find the content that they were originally searching for -- or at least keep them on your site, instead of leaving.

Every VOLT Store has a “Page Not Found” Page

Every theme in VOLT’s Site Designer automatically comes with a “Page Not Found” page. It can accept the same Blocks as any other page on your site.

You can check your current “Page Not Found” page by entering /404 after your store’s URL:

https://your-volusion-store.myvolusion.com/404

This page will show for any link that does not exist on your site, not just that URL, such as: 

https://your-volusion-store.myvolusion.com/555

You can preview your current “Page Not Found” page by opening this Page in VOLT’s Site Designer (https://admin.volusion.com/designer), opening your current theme using the Edit or Continue editing button, and choosing the “Page: Page Not Found” page.

Click the Preview button at the top-left to view how the page currently looks.

You can edit the “Page Not Found” page in VOLT’s Site Designer as you would any other page on your VOLT store.

If you’ve made changes that you want to publish, you can click the Publish button at the top-left to make these changes live to the public version of your VOLT store.

Best Practices for a “Page Not Found” Page

If you make a new theme in VOLT’s Site Designer, the “Page Not Found” page will contain no Blocks other than the Header and Footer Blocks that appear on every page of your VOLT store.

This can be a jarring experience for users, who are expecting to find some certain content that they had bookmarked, clicked a link to access, or searched for.

A good “Page Not Found” page will keep your visitor on your Store. The site CreativeBloq has a list of creative examples of 404 pages that you can use for inspiration.

At a minimum, a “Page Not Found” should include the words “Page Not Found” and some helpful text to redirect the user. A search function is also useful.

Adding custom text and images to your store’s “Page Not Found” page is easy using one of the built-in Blocks in Site Designer, as shown in the next section.

Editing the “Page Not Found” Page in VOLT’s Site Designer

The default “Page Not Found” page when you make a new Theme from VOLT’s Site Designer only includes the Header and Footer Blocks by default.

Unless you are using a custom Header Block, the Header will include a Search feature already, so we just need to add some text letting the user know that the requested page was not found.

We can add text to our empty “Page Not Found” page using a built-in Block in VOLT’s Site Designer.

For this example, you will be adding the Block called “Text” found in the “Misc” section of the Blocks in VOLT’s Site Designer.

In VOLT’s Site Designer, browse to the page called “Page: Page Not Found” using the drop-down menu in the top-center of the Site Designer interface.

If you have made a new theme, this page will be mostly blank, showing just the Header at top and the Footer at bottom. We will add a Text Block to this page to let the user know the page was not found.

(If working from a custom theme, this page may already have some content, which you can edit as you could any other page. For example, the Portland theme already has a Text Block that says “404 — The page you are looking for could not be found.”)

To add a new Block to the “Page Not Found” page, click the plus sign (+), then click Misc in the sidebar that appears at the left. Scroll down in the sidebar, and you will find the Block called Text at the bottom of the list. Click Add Block to add the Text Block, then click on the newly-added Block to select it for editing.

Selecting the newly-added Text Block will re-open the sidebar at the left. Click Edit Text to open the rich text editor. Try starting with the heading “Page Not Found” and text “Sorry, that page was not found.”

For more details on working with the “Text” Block, please read “How to Customize Your 404 Error Page in VOLT’s Site Designer” in the VOLT Learning Center.

Useful Built-in Blocks for a Custom “Page Not Found” Page

VOLT’s Site Designer allows you full customization of the “Page Not Found” page, same as any other page on your site.

As discussed in the last section, the Text Block is useful for customizing the “Page Not Found” page, because of its rich text editor capabilities. The rich text editor allows you to customize the text with formatting, heading, links, and even images.

One suggestion to improve the content of a Text Block be to add a link to your All Products page, which is typically located at:

https://your-volusion-store.myvolusion.com/c/all-products

For more visual impact, you could also add a Button Block to make a link to All Products or other featured parts of your VOLT store. The “Button” Block is found in the Misc section of VOLT’s Site Designer.

Other useful built-in blocks for your custom “Page Not Found” page are the “Text With Image” Block or the “Hero Image” Block, both found in the “Hero Image Banners” section of VOLT’s Site Designer. These Hero Image blocks let you combine images with text in an attractive way.

The “Featured Products” Block in the “Products” section would let you feature specific products on the “Page Not Found” page.

The “Image Gallery” section has a “Featured Content” Block that allows you to combine images, text, and links to any part of your website in a layout with columns.

Any built-in or custom Block can be used to customize your VOLT Store’s “Page Not Found” page.

Conclusion

A “Page Not Found” page is necessary for all websites, because inevitably pages move and change over time. If a page no longer exists, a user sees the “Page Not Found” error page.

With an ecommerce website, a good “Page Not Found” page could mean the difference between a sale or a visitor leaving your site.

For example, someone may try accessing an old “Sales Page” months after the sale has ended, perhaps by clicking on an old email link. If your “Page Not Found” page just says “404 Not Found” (the default for many web servers), your potential customer will likely move on.

Thankfully, the VOLT Store already includes a useful “Page Not Found” Page that is easy to customize using VOLT’s Site Designer.

Many of the built-in Blocks are useful for building your VOLT store’s “Page Not Found” page, including the Text Block, Featured Content Blocks, or Hero Image Blocks.

In addition to using built-in Blocks to customize your “Page Not Found” page in VOLT’s Site Designer, the Element platform makes it easy to make custom Blocks to provide a unique experience.