> 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/other-pages/404.md).

# 404

## 404 (Page Not Found) page

When a customer lands on a page that doesn't exist — a mistyped URL, a deleted product, or an old link — they see the 404 page. Most stores treat this as a dead end. In Arctos, the 404 page is a powerful conversion tool.

Unlike traditional themes that lock the 404 page into a fixed, unstyled layout, Arctos gives you a fully customizable section. You can build any layout you want using the same block system as Custom Sections — adding headings, search forms, buttons, images, and more.

***

### 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.

> **💡 Tip:** The 404 page is automatically triggered when a customer visits a URL that doesn't exist. You don't need to link to it — it works automatically. To test it, visit any URL on your store that doesn't exist.

***

### Section settings

**Invisible mode**

When enabled, removes the section's background and padding so content sits directly on your page background — creating a seamless, clean feel.

**Default:** *Disabled*

**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.

**Default:** *Disabled*

> **💡 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.

**Layout — Container width**

Controls the maximum width of the content inside the 404 section.

**Options:** *Inherit / Full width / Standard / Wide / Narrow*

**Default:** *Standard*

> **📌 Note:** On mobile, the container is always full width regardless of this setting.

**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.

**Default:** *Auto*

***

**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.

**Default:** *Vertical*

**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.

**Default:** *Left*

**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.

**Default:** *Middle*

***

**Inner content layout — Gap**

Controls the spacing between blocks within the section.

**Options:** *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom*

**Default:** *Default*

**Custom gap** — When Gap is set to Custom, enter a value from 0 to 200px.

**Default:** *4px*

**Custom on mobile** — Enable different gap values for mobile.

**Default:** *Disabled*

**Mobile Direction** — Choose Vertical or Horizontal layout for mobile.

**Default:** *Vertical*

**Mobile Gap** — Gap options for mobile.

**Default:** *Default*

**Mobile Custom gap** — Custom gap for mobile.

**Default:** *4px*

***

**Style & Background**

**Inherit color scheme** — When enabled, uses your theme's default color scheme.

**Default:** *Enabled*

**Color scheme** — When disabled, pick a color scheme.

**Default:** *Scheme 1*

**Custom background** — Enable to add a color or media background to the 404 section.

**Default:** *Disabled*

**Background** — When Custom background is enabled: *None / Color / Media*

**Color style** — When Background is Color: *Solid* or *Gradient*

**Color code** — The actual color values.

**Default:** *Solid — #ffffff*

**Media type** — When Background is Media: *Image* or *Video*

**Media overlay** — Add a semi-transparent layer over the media to improve text readability.

**Default:** *Disabled*

**Overlay style** — When Media overlay is enabled: *Solid* or *Gradient*

**Enable parallax effect** — Add a subtle depth effect to background media.

**Default:** *Disabled*

***

**Spacing**

**Padding** — Enable custom padding values around the section.

**Default:** *Disabled*

**Top / Bottom / Left / Right** — Padding from 0 to 200px.

**Default:** *0px*

**Custom on mobile** — Enable mobile-specific padding.

**Default:** *Disabled*

**Mobile Top / Bottom / Left / Right** — Padding from 0 to 100px.

**Default:** *0px*

***

**Available blocks**

Since the 404 page uses the same block system as Custom Sections, you can add any block 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 for 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

> **💡 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.

> **💡 Tip:** 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 genuine path forward.

> **💡 Tip:** Use **Horizontal** direction with **Center alignment** on the 404 page. Centered layouts feel intentional and "designed" rather than broken — which is exactly the right impression for a 404 page.

> **⚠️ Warning:** Don't make your 404 page too busy. More than 3–4 blocks creates confusion and dilutes the message. Keep it simple: "This page doesn't exist. Here's how to find what you need."

***

### Common questions

**Q: How do I test my 404 page?**

A: Visit any URL on your store that doesn't exist — for example, `yourstore.com/nonexistent-page`. You'll see the 404 page exactly as your customers would.

**Q: Can I use a video as the 404 background?**

A: Yes — enable **Custom background**, set **Background** to *Media*, choose **Media type** = *Video*, and upload your video file from **Content → Files** in Shopify Admin.

**Q: Can I add a newsletter signup to the 404 page?**

A: Yes — add a **Form** or **Email Form** block to the 404 section. Even lost visitors can be captured as subscribers.

***

### Related pages

* Custom Section guide — understand how the block system works
* Search page — the search block on the 404 page uses the same search architecture
* Global Theme Settings — configure default brand colors and typography