Shoppers browsing your website may occasionally receive error messages for a variety of reasons – a mistyped URL, a copy and pasting mistake, a broken or dead link, or even deleted content on your site. With some basic HTML knowledge, you can customize your error messages to let visitors know what happened and help them get back on track.

The Default 404 Error Page

A 404 error page may display when a customer tries to access a website or file within a website that isn’t available or cannot be found. This may occur when a page name has been changed or moved, or when a web server is completely offline.

The default 404 error page includes a generic technical message and little to no styling:

Since the page doesn’t retain your store’s header and footer by default, shoppers may think they’ve reached a “dead end” that lies somewhere outside of your site.

Suggestions for 404 Content

The amount of information you choose to provide on your 404 page depends on your ultimate goal, but most merchants aim to guide shoppers back to a page from which they can continue browsing for products or check out.

Custom 404 error pages often indicate that the requested page cannot be found while providing links back to the home page and other popular category pages. You may also want to provide links to your blog page, sale pages, or even popular product pages - providing the most relevant content to your visitors will draw them back to continue shopping on your store.

Here are a few tips to help you make the most of a custom 404 page:

  • Add your site's header and footer to the 404 page. This lets shoppers know they're still on your site and in a position to keep browsing.
  • Inject your brand's personality into the 404 page by using industry-related humor or a fun and friendly "oops" message.
  • Add some interest to the page by inserting an image or two. Find an amusing photo that addresses the frustration of reaching a dead end, or take a cue from your existing branding and create professional-looking graphics that match the rest of your site.
  • Frame the 404 error as a "happy accident" by offering a single-use coupon code that only appears on the 404 page. Shoppers will be less likely to leave your site and more likely to forgive any technical difficulties.
  • Get shoppers back on track by adding links to popular categories, the checkout page, or your home page.

If you're still stumped about what content you want to display on your 404 page, try using a search engine to look for well-designed examples used by other companies. You can also speak with our Design team about a custom 404 Page Design.

Custom 404 Error Page for Root URLs

In order to implement a custom 404 error page for URLs under the root directory, you will need to create the custom 404 page using HTML. You can create and edit your custom page using any HTML editing program, but you must be able to save the page as a TXT file.

  1. After you have created your custom 404 error page HTML content, copy the code into a simple text editing program (like Notepad) and save the file as "404.txt".
  2. Access your site's FTP and navigate to the /vspfiles/ folder. For more information, check out our articles on setting up and using your Volusion store's FTP account.
  3. Place your 404.txt file in your store's /vspfiles/ folder. The full file path for your custom error page will be http://www.yourvolusionstore.com/v/vspfiles/404.txt, where "yourvolusionstore" is your site's domain name.

That's it! If any visitor gets a 404 error as they enter or browse your site, they'll see the customized page that you created. This error page will include your site's static content (header, footer, navigation menus) by default.

Using URLRewrite.asp for Error Pages Below the Root

To modify pages below root directory URLs, you can update a custom page within your store's File Editor.

  1. Go to Design > File Editor.
  2. From the Choose File menu (labeled with wwwroot), select vspfiles.
  3. From the next menu, select URLRewrite.asp.

This page contains a series of web scripts that generate 404 and 500 error messages on your store. Edit the contents of this file and save to modify your 404 and 500 error pages.

Please note that this page only controls 404 and 500 errors for pages within the /v/ directory of your store. Pages or links external to the /v/ directory will not be affected by changes made to the URLRewrite.asp page. The root-level error page can be customized using the instructions above.

Adding Your Header and Footer to URLRewrite.asp

When customizing your URLRewrite.asp error page (for pages below the root), you may want to include your site-wide header and footer to create a consistent appearance for your store. You can add in this static content to frame your custom error message with some simple modifications to the HTML in your URLRewrite.asp file.

  1. Navigate to your custom URLRewrite.asp page from the File Editor (instructions above).
  2. Scroll to find the opening <body> tag of the HTML code.
  3. Paste the following code exactly directly below the <body> tag: <!-- #include virtual="/v/vspfiles/templates/##/header_static.html" -->
  4. Replace ## in the above code with the name or number of your active theme.
  5. Scroll to find the closing </body> tag of the HTML code.
  6. Paste the following code exactly directly above the </body> tag: <!-- #include virtual="/v/vspfiles/templates/##/footer_static.html" -->
  7. Replace "##" in the above code with the name or number of your active theme.
  8. Click Save.

You're done! Your custom error page for all pages in the /v/ directory of your store will now display with your site's static content, creating a consistent appearance for your store, even when a customer encounters an error message.

Custom 404 Page Issue

Please note that implementing a catch-all (or "wildcard") 301 redirect at your root-level store URL will cause the root-level error page functionality to break. Instead of indexing as a 404 page and presenting visitors with your custom error text, all pages which would error will be indexed as 301 redirects and visitors will be taken to the Target Path URL that is configured for your catch-all redirect.

If you are not able to see your custom root-level error page, check that it has been uploaded at http://www.yourvolusionstore.com/vspfiles/404.txt (where "yourvolusionstore" is your store's domain). If you are sure that your custom page has been configured according to the instructions above, go to Settings > Maintenance in your Admin Area.

Click Manage 301 Redirects to open all of your store's 301 Redirects. If you see any Source Paths in your Redirect Manager that are configured as /* , then your store has a "wildcard" redirect which is preventing your custom error message from displaying and is causing error pages on your store to be indexed incorrectly.

Note that the URLRewrite.asp custom error message (which presents custom error text for all pages in the /v/ directory) is not affected by a root-level catch-all 301 redirect. If you implement a "wildcard" redirect with the Source Path as /v/* , then your URLRewrite.asp error page functionality will break.

Reducing the Occurrence of 404 Page Visits

One of the most common ways a shopper receives a 404 error is by attempting to reach a page that no longer exists. You may have changed or removed a product code or category, thereby removing the URL. Be sure to update your site’s 301 redirects whenever you remove or change a page URL, so that a shopper gets redirected to a different page rather than seeing a 404 error.

If you’ve moved to Volusion from another host, the links from your old site may still be indexed by search engines and appear in some search results. Be sure to submit the latest version of your sitemap to Google, and use page-specific SEO tools wherever possible.

Note

These functions were designed specifically for advanced users with knowledge of HTML. We do not recommend attempting to customize your error messages unless you are an experienced HTML user.

If you aren’t comfortable with HTML but would still like to implement a custom 404 page, our Design team offers custom 404 Page Design to match the look and feel of your site. Please contact our services sales team for more information at 877-591-7005.

Did this answer your question?