> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/page-templates/404.md). # 404 Customize your 404 Not Found page — turn dead ends into helpful recovery experiences with search, navigation, and custom layouts.
When a customer lands on a page that doesn't exist — a mistyped URL, a deleted product, or an old link — they see your 404 page. Most stores treat this as a dead end. In Arctos, the 404 page is a fully customizable recovery experience. Unlike traditional themes that lock the 404 page into a fixed layout, Arctos gives you a complete block-based section — the same system used by Custom Sections. You can add headings, search forms, buttons, images, and more to build a page that actively helps lost visitors find their way. *** ### What you can customize * **Layout and content** — build any layout using blocks (not limited to a text + button) * **Fullscreen mode** — make the 404 page fill the entire browser window * **Container width** — control how wide your content appears (Standard, Wide, Narrow, etc.) * **Direction** — arrange blocks horizontally or vertically * **Gap and alignment** — control spacing and positioning of content elements * **Background and spacing** — style the section with colors, images, or video backgrounds *** ### How to access this template 1. In the **Theme Editor (Customize)**, click the **template selector** (dropdown at the top). 2. Select **Other** → **404**. 3. The page editor will show the **Custom section** section. {% hint style="info" icon="note-sticky" %} **Note:** The 404 page is automatically triggered when a customer visits a URL that doesn't exist on your store. You don't need to link to it manually. To preview it, visit any URL on your store that doesn't exist (e.g., `yourstore.com/test-page`). {% endhint %} *** ### Section settings **Invisible mode** When enabled, removes the section's background and padding so content sits directly on your page background — creating a clean, seamless feel. **Fullscreen mode** When enabled, the 404 section fills the entire browser window (100vh height) — creating an immersive, full-page layout. Pair this with a bold background image or video for maximum impact. {% hint style="success" icon="lightbulb" %} **Tip:** Fullscreen mode works best with a strong background image and centered text content. It creates a dramatic "page not found" moment that feels intentional rather than broken. {% endhint %} **Layout — Container width** Controls the maximum width of the content inside the 404 section. **Options:** *Inherit / Full width / Standard / Wide / Narrow* {% hint style="info" icon="note-sticky" %} **Note:** On mobile, the container is always full width regardless of this setting. {% endhint %} **Layout — Height** Controls how tall the 404 section is when **Fullscreen mode** is disabled. **Options:** * *Auto* — The section height is determined by its content. * *Small* — A compact section height. * *Medium* — A moderate section height. * *Large* — A large section height. * *Full* — Full viewport height. *** **Inner content layout — Direction** Controls how blocks are arranged within the section. **Options:** * *Vertical* — Blocks stack on top of each other, one after another. * *Horizontal* — Blocks sit side by side in a row. **Alignment** (when Horizontal) — Controls horizontal alignment of blocks: * *Left* — Blocks align to the left edge of the section. * *Center* — Blocks are centered within the section. * *Right* — Blocks align to the right edge. * *Space Between* — Blocks spread out with equal space between them. **Position** (when Horizontal) — Controls vertical alignment of blocks within the row: * *Top* — Blocks align to the top of the row. * *Middle* — Blocks align to the middle of the row. * *Bottom* — Blocks align to the bottom of the row. *** **Inner content layout — Gap** Controls the spacing between blocks within the section. **Options:** *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom* **Custom gap** — When Gap is set to Custom, enter a value from 0 to 200px. **Custom on mobile** — Enable different gap values for mobile. **Mobile Direction** — Choose Vertical or Horizontal layout for mobile. **Mobile Gap** — Gap options for mobile. **Mobile Custom gap** — Custom gap for mobile. **Default:** *4px* *** **Style & Background** **Inherit color scheme** — When enabled, uses your theme's default color scheme. **Color scheme** — When disabled, pick a color scheme. **Custom background** — Enable to add a color or media background to the 404 section. **Background** — When Custom background is enabled: *None / Color / Media* **Color style** — When Background is Color: *Solid* or *Gradient* **Color code** — The actual color values. **Media type** — When Background is Media: *Image* or *Video* **Media overlay** — Add a semi-transparent layer over the media to improve text readability. **Overlay style** — When Media overlay is enabled: *Solid* or *Gradient* **Enable parallax effect** — Add a subtle depth effect to background media. *** **Spacing** **Padding** — Enable custom padding values around the section. **Top / Bottom / Left / Right** — Padding from 0 to 200px. **Custom on mobile** — Enable mobile-specific padding. **Mobile Top / Bottom / Left / Right** — Padding from 0 to 100px. *** ### Available blocks The 404 page uses the same block system as Custom Sections. You can add any combination of these blocks to build your layout: | Block | What it adds | | -------------------- | --------------------------------------------------------------------------------------- | | **Title** | A large heading — e.g., "Page Not Found" or "Oops!" | | **Rich Text** | Body copy — e.g., "It looks like this page doesn't exist. Let's get you back on track." | | **Button** | A call-to-action button — e.g., "Back to Shop" or "Go to Homepage" | | **Search** | A search bar to help customers find what they were looking for | | **Group** | A container for nesting multiple blocks together | | **Image** | A product image, brand image, or illustration | | **Video** | An embedded product demo or branded video | | **Icon Box Listing** | Trust icons or feature callouts — e.g., "Free Shipping", "30-Day Returns" | *** ### Design ideas #### The recovery layout (recommended) Build a 404 page that actively helps lost visitors find their way: 1. Add a **Title** block — set to "Page Not Found" or a friendly "Oops!" 2. Add a **Rich Text** block — "It looks like this page doesn't exist. Let's get you back on track." 3. Add a **Button** block — link to your homepage ("Back to Homepage") 4. Add a **Button** block — link to your collections ("Browse Products") 5. Add a **Search** block — so customers can search for what they were looking for 6. Arrange all blocks **horizontally** with center alignment on desktop #### The branded fullscreen layout 1. Set **Fullscreen mode** to enabled 2. Set **Custom background** to a bold brand image 3. Enable **Media overlay** to ensure text readability 4. Center-align all content vertically and horizontally 5. Add only a **Title** and one **Button** — keep it simple and focused *** ### Tips & best practices {% hint style="success" %} **Tip:** * Always include a **Search** block on your 404 page. Lost visitors often know exactly what they want — give them an easy way to find it without leaving your store. *** * Link your 404 "Back to Homepage" button to `/collections/all` instead of the homepage. This surfaces your entire product catalog immediately and gives customers a clear path forward. *** * Use **Horizontal** direction with **Center alignment** on your 404 page. Centered, side-by-side layouts feel intentional and designed — which is exactly the right impression for a 404 page. {% endhint %}