404 / Not found template

The 404 template renders the page shown when a visitor hits a URL that doesn't match any record on your site.

Location

The 404 template lives in templates/:

└── theme
    ├── layouts
    ├── templates
    │   ├── 404.liquid
    │   ...

Content

Every site has a system-owned page with the slug 404, and that page is passed into templates/404.liquid as page, so its blocks can be rendered with {% stageblocks page %}. Treat page as optional in the template: the object is only in scope when that page exists. The template's job is to make it clear to the visitor that the page they were looking for couldn't be found, and to give them obvious next steps: links to popular pages, a search bar, or a link to the home page or events calendar.

<h1 class="title">Page not found</h1>

<p>The page you were looking for doesn't exist. Try one of these instead:</p>

<a href="/concerts-and-events/calendar" class="btn">View calendar</a>
<a href="/" class="btn btn--secondary">Go to home page</a>

Combine it with navigation to surface the site's main entry points, and with smart collections (e.g. upcoming events) to give the visitor something useful to click.

Related

• Template context: global functions like navigation and tenant.
• Templates: the broader template-writing workflow.