Customizing Error Pages

These instructions apply to our legacy Blueprint themes that have not been customized. As always, we recommend backing up your current theme customizations before making any changes. It is possible to change these pages on Stencil themes. See our section on Stencil error pages

 

These instructions require knowledge of HTML/CSS. See Getting Help for avenues of assistance.

404 and 403 pages are default landing pages when a shopper goes to an inaccessible page. By default, these pages display a very generic message. You can customize these pages to make them match the tone of your brand

Customizing the 404 Error Page

The 404 error page is shown when a customer accesses a non-existent page. For example, a removed product page.

By default it displays the following message:

404 Example

Follow these steps to customize the 404 error page's text.

 

Be careful! Always back up your theme files before attempting any changes.

1. Storefront Design › My Themes, then click Edit HTML/CSS.

Edit HTML/CSS link

2. In the list of Other Template Files on the left, select 404.html.

The 404.html template file

3. You can replace any of the following variables with the text you’d like to appear on the page instead.

  • %%LNG_NotFound%%displays “Not Found”
  • %%LNG_NotFoundError%%displays “The page you were looking for appears to have been moved, deleted or does not exist.”
  • %%LNG_NotFoundReasonTitle%%displays “This is most likely due to:”
  • %%LNG_NotFoundReason1%%displays “An outdated link on another site”
  • %%LNG_NotFoundReason2%%displays “A typo in the address / URL”

Advanced users who are comfortable with HTML, can add elements to the template as well.

4. Save your changes.

The Save button.

Customizing the 403 Error Page

The 403 error page is shown when a customer does not have the permissions necessary to view a particular category, product or web page. By default it displays the following message:

403 Sample

Follow these steps to customize the 403 error page's text.

 

Be careful! Always back up your theme files before attempting any changes.

1. Go to Storefront Design › My Themes, then click Edit HTML/CSS.

Edit HTML/CSS link

2. In the list of Other Template Files on the left, select 403.html.

The 403.html template file listing.

3. You can replace any of the following variables with the text you’d like to appear on the page instead.

  • %%LNG_ForbiddenAccessPage%%displays “You Do Not Have Permission To Access This Page”
  • %%LNG_NoPermissionToAccessThisPage%%displays “You don't have the necessary permissions to view this page.”
  • %%GLOBAL_Contact%%displays “If you believe this is an error, please contact us at [administrator's email].”
  • %%LNG_ReturnToHomepage%%displays “Return to the home page.”

The administrator's email address can be updated by going to Store Setup › Store Settings, then clicking on the Miscellaneous tab.

4. Save your changes.

The Save button.

Mobile Theme Error Pages

The BigCommerce mobile theme's 403.html and 404.html error page template files contain the same variables as listed above. See Customizing the BigCommerce Mobile Theme for instructions on downloading, customizing, and uploading changes to the BigCommerce mobile theme.

Stencil Error Pages

These files are accessible in Stencil themes via Editing Stencil Theme Files. Stencil uses handlebars.js to create its pages. See our Developer Documentation for more details or ask in the Community for further instruction for your specific theme.

Stencil 403 Example

Getting Help

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community Ask a Design Partner Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Was this article helpful?