404 page

The page shoppers see when a link is broken or a product has moved. Uisce turns it into a recovery journey rather than a dead end: your preset's hand-drawn artwork and brand voice soften the miss, a search box lets the shopper try again on the spot, and a rail of their own recently viewed products gives them a way straight back to what they were looking at. Two clear buttons — back to home, browse products — round out the escape routes.

Try it

Pick a preset to see its artwork and voice, toggle the hero, search, and recently-viewed settings, and use the screen-size and light/dark buttons in the preview header to check a phone and dark mode.

←404 page

Show hero illustration

The hand-drawn per-preset artwork beside the message.

Show inline search

A search box right on the error page, so the shopper can try again without leaving.

Show recently viewed products

On a live store the rail stays hidden until the shopper has actually browsed some products.

The section also has a Color scheme setting; the preset switcher above the preview shows each preset's palette instead.

Storefront preview

404

404

You've drifted off course.

Back to homeBrowse products

Search the store

Recently viewed

Saved only in this browser

• Kitchen design consult

  €120.00

• Bathroom refresh plan

  €95.00

• Lighting layout plan

  €75.00

• On-site survey

  €60.00

Uisce — a water-drop hero and the calm "You've drifted off course." voice.

How it works

The 404 template ships with this section in place — there is nothing to add. On tablet and desktop it lays out as an editorial two-column: the artwork on one side; the ghosted "404" glyph, the heading, your preset's voiced line, the two action buttons, and the search box on the other. On a phone it stacks into a single centered column with full-width buttons. The recovery rail renders full-width beneath the two columns.

The rail is the theme's Recently viewed component doing its normal job on a new surface: it stays hidden until the shopper has actually browsed products, then shows their own last-viewed items — so a first-time visitor who lands on a broken link sees a clean page, and a browsing shopper sees a personal way back. It carries the same ledger line it carries everywhere else: the trail is saved only in that shopper's browser, and Clear empties it on the spot. The demo above shows representative products; on your store the rail always shows the shopper's own.

Section settings

Setting	What it does
Color scheme	Paints the whole page — background, text, the ghosted 404 glyph, and buttons — from one scheme, so contrast holds in light and dark.
Show hero illustration	The hand-drawn per-preset artwork. Turn it off for a plainer, text-first error page.
Show inline search	A search box right on the page, so the shopper can retry without hunting for the header search.
Show recently viewed products	The recovery rail beneath the message. Hidden automatically until the shopper has browsed products, so it never shows an empty shelf.

Per-preset signature

Every preset gets its own artwork and its own voice — the same section, five personalities:

Preset	Artwork	Voice
Uisce	A falling water drop	"You've drifted off course."
Gaoth	A leaf carried in flight	"Lost in the breeze."
Talamh	A seed resting below the soil	"Wandered off the path."
Tine	A forge spark	"You missed the spark."
Neart	A rune knot	"The road forked."

Responsive & accessibility

• Editorial two-column on desktop and tablet, with the recovery rail full-width beneath; a single centered column with full-width buttons on a phone, the artwork contained so the message stays above the fold.
• The artwork is decorative — hidden from screen readers (aria-hidden), so assistive tech hears the heading, the message, and the actions, nothing extra.
• The skip link jumps straight to the page content, so keyboard users reach the message without retracing the header.
• The search box is a labelled, real search form — a screen-reader label, a visible submit button, and a comfortable touch target.
• The ghosted 404 glyph is scheme-driven — it stays a calm watermark (never error-red) in both light and dark mode.
• Right-to-left ready — the layout is built from logical properties, so Arabic, Hebrew, Persian, and Urdu mirror correctly.

Tips

• Leave the recovery rail on. It costs nothing for first-time visitors (it self-hides) and gives browsing shoppers a one-click way back to the product they were considering.
• Keep the search box on — a shopper who typed or followed a bad link usually knows what they wanted; searching beats bouncing.
• Check the page in both modes once you've picked a color scheme: the ghosted glyph and the secondary button take their color from the scheme, so a quick light/dark glance is all it needs.