Appearance
Error & password pages
The Uisce theme includes premium-grade 404 and password page experiences. This guide covers the settings and features for both surfaces.
For support troubleshooting, see Error pages support.
404 page
Per-preset hero SVG
Each preset ships a unique hero SVG for the 404 page stored at assets/404-hero-{preset}.svg. The SVG is inlined at render time — no extra HTTP request. The correct SVG renders automatically based on the active preset.
Override with a custom SVG:
To use a merchant-custom SVG, replace assets/404-hero-{preset}.svg with your own file via Theme editor → Assets → Upload. Keep the file under 15 KB (the limit for inlined SVGs).
Merchant toggles:
| Setting key | Default | Controls |
|---|---|---|
show_hero | true | Shows/hides the hero SVG |
show_search | true | Shows/hides the inline search form |
show_recently_viewed | true | Shows/hides the recently-viewed section |
Search form
The 404 page renders a thin <form action="/search" method="get"> — a standard HTML form submission, not predictive. Predictive search is deliberately excluded from the 404 page to keep the page lightweight (no Storefront API token required, no JS initialization overhead).
Recently-viewed products
The recently-viewed section reads from localStorage (uisce.state.v1.recently_viewed), the same primitive used for the recently-viewed section on other pages. If a visitor has browsed products before landing on the 404, their recently-viewed products appear automatically — zero configuration required.
Toggle: show_recently_viewed (checkbox, default: ON).
Featured collection
The 404 template also includes a standard Featured collection section below the recently-viewed products (configured in templates/404.json, heading i18n key 404.featured_heading). It is a normal section: customize or remove it in the theme editor on the 404 template — there is no separate checkbox for it in the 404 section settings.
noindex emission
To mitigate soft-404 SEO risk, the Uisce theme emits:
liquid
{% if request.page_type == '404' %}
<meta name='robots' content='noindex,follow'>
{% endif %}This meta tag is emitted from layout/theme.liquid and supplements the HTTP 404 status code. Googlebot respects both signals — the page will not be indexed.
You do not need to configure anything. The noindex meta tag is emitted automatically on every 404 page.
Per-preset brand voice
Each preset ships a distinct body copy key for the 404 page:
| Preset | i18n key | Example (English) |
|---|---|---|
| Uisce | 404.body.uisce | "The waters shifted — this page has flowed elsewhere." |
| Gaoth | 404.body.gaoth | "The wind carried this page away. Let us guide you back." |
| Talamh | 404.body.talamh | "This path has gone to earth. Try searching above." |
| Tine | 404.body.tine | "Page not found — check your URL and try again." |
| Neart | 404.body.neart | "This page isn't here — keep your strength and search above." |
All 5 keys are translated across 50 locales with zero English leakage. You can override the copy via locale customization in the theme editor.
Password page
Logo and LCP
The password page renders settings.logo with fetchpriority="high" — this marks the logo image as the LCP candidate, ensuring the browser prioritizes it in the loading queue. The logo must be set in Theme Settings → Logo for this to render.
Toggle: show_logo (checkbox, default: ON).
Per-preset hero SVG
Each preset ships a unique hero SVG for the password page stored at assets/password-hero-{preset}.svg. The SVG is inlined below the copy and CTAs.
To replace with a merchant-custom design, upload the new SVG via Theme editor → Assets → Upload. Keep the file under 15 KB.
Toggle: show_hero (checkbox, default: ON).
Countdown timer
The password page supports a countdown timer for store launches via the <count-down> Custom Element.
Setup:
- Theme editor → Templates → Password → Password section → enable Show countdown.
- Use the Year, Month, Day, and Time selects to set your store launch date.
- Save — the countdown starts immediately.
The countdown selects become visible after you enable Show countdown. The Day and Time selects are visible once you choose a year.
Reduced-motion guard: The countdown ticker respects prefers-reduced-motion. With motion disabled, the numbers update every second but animated transitions are suppressed.
RTL native digits: On RTL locales (ar, fa), the countdown ticker renders native digits (Arabic-Indic numerals). The <count-down> Custom Element uses Intl.NumberFormat with locale-appropriate digit rendering.
Toggle: show_countdown (checkbox, default: ON).
shop.password_message override
If you have configured a custom password message in Shopify admin → Online Store → Preferences → Password protected → Message, that message is rendered first. The theme section's body richtext setting renders below as additional content.
This preserves existing merchant configuration — merchants who already configured shop.password_message will not see their message replaced.
Newsletter capture
The password page includes a newsletter block for lead-gen during the pre-launch period.
Enable / disable:
- Theme editor → Templates → Password → Password section →
Show newsletter(checkbox, default: ON) - Setting key:
show_newsletter_block
The newsletter form uses the same snippets/newsletter-form.liquid as the footer, with the same GDPR consent checkbox and Customer Privacy API gating.
Social links
The password page renders social links from global settings.social_*. Configure your social accounts in Theme Settings → Social media.
Toggle: show_social (checkbox, default: ON).
Localization form
The password page mounts the localization form for country / currency / language switching — useful for international stores launching to a multilingual audience.
Toggle: show_localization (checkbox, default: ON).
Standalone layouts
The password page renders layout/password.liquid — a standalone layout that does not include layout/theme.liquid. This standalone layout includes:
- Font preload and load
window.uisceStringstranslation registry<meta name="robots" content="noindex,follow">— password pages should not be indexed- Skip-link for keyboard navigation
- Full
<html lang dir>attributes for RTL support
The gift-card landing page (/gift_cards/{code}) renders layout/gift-card.liquid, also a standalone layout (see Gift card guide).
These pages render independently of the main theme layout so they load cleanly even when the rest of the theme has not been configured.
Accessibility
Both 404 and password pages comply with WCAG 2.1 AA. Key accessibility features:
| Feature | 404 | Password |
|---|---|---|
| Skip-link | Yes | Yes |
Heading tabindex="-1" for focus management | Yes | Yes |
aria-live region | Yes (search results) | Yes (countdown + form errors) |
| Color contrast ≥ 4.5:1 across 5 schemes | Yes | Yes |
| Keyboard-navigable search form | Yes | N/A |
<count-down> aria-live for tick | N/A | Yes |
Newsletter form aria-invalid + role="alert" | N/A | Yes |
| Reduced-motion countdown guard | N/A | Yes |
Settings reference
404 page settings (sections/404.liquid)
| Setting key | Type | Default | Controls |
|---|---|---|---|
color_scheme | select | scheme_1 | Color scheme |
show_hero | checkbox | true | Per-preset hero SVG |
show_search | checkbox | true | Thin search form |
show_recently_viewed | checkbox | true | Recently-viewed products |
Password page settings (sections/password.liquid)
| Setting key | Type | Default | Controls |
|---|---|---|---|
color_scheme | select | scheme_1 | Color scheme |
show_logo | checkbox | true | settings.logo with fetchpriority=high (LCP candidate) |
show_hero | checkbox | true | Per-preset hero SVG |
show_countdown | checkbox | true | <count-down> Custom Element |
| Year / Month / Day / Time selects | select | (empty / 01 / 01 / 09:00) | Launch date for countdown timer (visible after enabling Show countdown) |
show_newsletter_block | checkbox | true | Newsletter capture form |
show_social | checkbox | true | Social links from global settings |
show_localization | checkbox | true | Localization form |
show_advanced | checkbox | false | Show advanced merchant settings |
custom_class | text | "" | Custom CSS class for merchant targeting |