Build A 404 Page
How to build a custom not-found page using the Protuno Theme Builder so visitors who hit a broken link see a helpful, branded experience.
A 404 Page template replaces the theme's default error page for every URL on your site that returns a 404 (not found) response. A well-designed 404 page keeps visitors on your site and directs them to content they actually want.
Create A 404 Template
- Go to Protuno → Theme Builder
- Click + Add New → 404 Page
- Drag the Proton widget onto the canvas
- Build the not-found experience
- Click Update to save
- Set display conditions
Build The 404 Page
Use Edit With AI:
"A 404 error page. Large '404' in a muted brand color. A heading: 'Page not found'. A short friendly message explaining the page may have moved. A button linking to the homepage labeled 'Back to Home'. Centered layout, light background."
site.* requires Protuno Pro. The code example below uses {{ site.url }} for the homepage link. In the free version this returns an empty string. Free users can hardcode the homepage URL or any other link directly.Or write it in Edit Code:
<section class="error-404">
<div class="error-inner pr-boxed">
<p class="error-number">404</p>
<h1 class="text-heading-h2">Page Not Found</h1>
<p class="text-body">
The page you're looking for doesn't exist or may have been moved.
Let's get you back on track.
</p>
<div class="error-actions">
<a href="{{ site.url }}" class="btn-primary">Back to Home</a>
<a href="{{ site.url }}/contact" class="btn-outline">Contact Us</a>
</div>
<div class="error-search">
<p class="text-body-sm">Or try searching:</p>
<form role="search" method="get" action="{{ site.url }}">
<input type="search" name="s" placeholder="Search the site…">
<button type="submit">Search</button>
</form>
</div>
</div>
</section>
CSS Example
.error-404 {
min-height: 70vh;
display: flex;
align-items: center;
background: var(--color-bg-alt);
}
.error-inner {
text-align: center;
padding-block: var(--space-xl);
}
.error-number {
font-size: clamp(6rem, 20vw, 12rem);
font-weight: 900;
line-height: 1;
color: var(--color-brand);
opacity: 0.2;
margin-block-end: var(--space-sm);
}
.error-actions {
display: flex;
gap: var(--space-sm);
justify-content: center;
margin-block: var(--space-lg);
}
.error-search {
max-width: 400px;
margin-inline: auto;
}
.error-search input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: 8px;
margin-block-end: var(--space-sm);
}
Display Conditions
- Open Conditions for the template
- Click Add Condition
- Choose Include → 404 Page
- Click Save
There is only one condition type for 404 templates, the entire 404 scope. You cannot apply different 404 templates to different broken URLs.
What To Include On A 404 Page
Helpful 404 pages typically include:
| Element | Why |
|---|---|
| Clear "404" or "not found" label | Confirms the page is missing, not broken |
| Friendly explanation | Tone matters, visitors feel less lost |
| Homepage button | Primary escape route |
| Search form | Lets them find what they were looking for |
| Popular links | Direct visitors to high-value pages |
| Contact link | For visitors who need specific help |
Optional additions:
<div class="popular-posts">
<h3 class="text-label">Popular Articles</h3>
{% for post in get_posts({ posts_per_page: 3, orderby: 'comment_count', order: 'DESC' }) %}
<a href="{{ post.link }}">{{ post.title }}</a>
{% endfor %}
</div>
Tips
Keep the header and footer: Your site header and footer still render on 404 pages if you have them assigned site-wide. The 404 template controls only the main content area between them.
Analytics: 404 pages are worth tracking. High-traffic 404s often indicate a broken backlink or an old URL that needs a redirect. Set up Google Analytics or your tracking tool to capture 404 events (add the tracking code at site scope in any Proton widget's External Dependencies).