How to Customize the 404 Error Page in StoreFronts
Introduction
UltraCart StoreFronts come with a default 404 error page that displays a basic message:
404 Page Not Found
Sorry we could not find the page you were looking for.
While most of the StoreFront can be edited using the Visual Builder, the 404 error page requires direct modification of the template file.
Prerequisites
Prerequisite: You must have access to the StoreFront's template system and be comfortable editing
.vm(Velocity Template) files.
Step-by-step Instructions
1. Access the 404 Template
Navigate to:
Main Menu → StoreFronts → (Select StoreFront Host) → TemplatesIn the StoreFront menu, click Templates, then select Pages.
Locate and open the file:
Templates/site_404.vm.
Tip: You can use the search bar to quickly find
site_404.vm.
2. Understand the Template Structure
The site_404.vm file includes several shared components:
top.vmheader.vmmailing-list-signup.vmmain-footer.vm
These templates are applied sitewide and should not be modified directly within this context.
3. Modify the 404 Content
The content specific to the 404 page is located between the following vm files:
#parse("/containers/header.vm")
<div class="row">
<div class="columns small-12" style="margin-bottom: 80px;">
<h2 $!{i18n.htmlLang("theme.site404.404PageNotFound")}>${i18n.write("404 Page Not found")}</h2>
<p style="text-align: center;" $!{i18n.htmlLang("theme.site404.sorryWeCouldNotFindThePageYouWereLookingFor")}>${i18n.write("Sorry we could not find the page you were looking for.")}</p>
</div>
</div>
#parse("/containers/mailing-list-signup.vm")Edit this section to include your custom messaging. For example, you might add helpful navigation links, a search box, or your brand’s voice to create a more engaging experience for users who land on this page.
Example HTML:
<div class="not-found-message">
<h1>Oops! We can't find that page.</h1>
<p>Try one of the links below or return to the <a href="/">home page</a>.</p>
<ul>
<li><a href="/store">Shop All Items</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</div>
Note: Make sure any custom code you add is responsive and consistent with the rest of your theme.
Conclusion
By editing the site_404.vm template file, you can create a more helpful and branded 404 error page that improves user experience and keeps visitors engaged even when they hit a dead end.
Next Steps
Review your changes in a test environment before publishing.
Use consistent styles from your theme to maintain branding.
Consider adding a site search or product links to help users recover from the error.
Modifying the Content
The site_404.vm template file consists of snippet templates for the storefront theme header and footer, mailing list signup, and the defaulted 404 text, which is in between the header.vm and the mailing-list-signup.vm.
The top.vm, header.vm, mailing-list-signup.vm, and main-footer.vm templates apply sitewide, so you will not want to edit these templates.
Instead, you’ll want to modify the HTML in between the header.vm and mailing-list-signup.vm with your custom content (additional text, hyperlinks, etc.)