> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/404-page.md).

# 404 page

The **404 page** is what a visitor sees when the address they opened does not exist on your store. It happens after a mistyped URL, after an old link shared on social media, or after a product or collection has been deleted. Instead of leaving the visitor at a dead end, this template lets you show your usual header and navigation so they can keep browsing.

It is a theme template that ships with the theme, so there is nothing to create in the Shopify admin. You only need to add its section and style it.

<figure><img src="/files/xezL4eaTKPLuQnAwFZtW" alt=""><figcaption></figcaption></figure>

## Set up the 404 page <a href="#set-up-the-404-page" id="set-up-the-404-page"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template selector at the top of the editor.
3. Select **404 page**.
4. In the left sidebar, add **Main 404**.
5. Make your changes, then click **Save**.
   {% endhint %}

*Result:* any address that does not exist on your store now opens this layout instead of a bare error message.

## Section settings

### General <a href="#general-settings" id="general-settings"></a>

<figure><img src="/files/KcDWtPjMfxgsfpHRK9fM" alt=""><figcaption></figcaption></figure>

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>How far the section spreads across the screen.</p><ul><li><strong>Stretch width</strong>: the content runs close to both screen edges whatever the screen size.</li><li><strong>Fixed width</strong>: the content lines up with the page width set in <strong>Theme settings > Layout</strong>, so it matches the sections around it.</li><li><strong>Full width</strong>: the section fills the whole browser window and resizes with it.</li></ul> |
| **Color scheme**  | The background and text colors of the section. Schemes are defined in **Theme settings > Colors**, so switching scheme is the quickest way to separate this banner from the section above it.                                                                                                                                                                                                                                                           |

### Section padding

<figure><img src="/files/rfr7NkXM39M8RGHG1J0Y" alt=""><figcaption></figcaption></figure>

| Setting    | Description                                                                                |
| ---------- | ------------------------------------------------------------------------------------------ |
| **Top**    | Space added above the banner. Increase it when the section before this one sits too close. |
| **Bottom** | Space added below the banner. Increase it when the next section feels cramped against it.  |

## Block settings

### Image

<figure><img src="/files/SHSjdGFUWS3l4H5onM3r" alt=""><figcaption></figcaption></figure>

| Setting   | Description                                                                                                                   |
| --------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **Image** | The illustration shown above the 404 message. Upload a custom image to match your brand or make the error page more engaging. |

### Subheading, Heading

<figure><img src="/files/JqYen0878m6o6w9GUpUD" alt=""><figcaption></figcaption></figure>

| Setting            | Description                                                                                     |
| ------------------ | ----------------------------------------------------------------------------------------------- |
| **Heading**        | The main message displayed on the 404 page to let shoppers know the page could not be found.    |
| **Heading size**   | Controls the size of the heading. Larger sizes create a stronger visual focus.                  |
| **Uppercase**      | Displays the heading in uppercase letters without changing the text you entered.                |
| **Spacing bottom** | Adds space below the heading before the next content block. Increase it for a more open layout. |

### Description

<figure><img src="/files/N2h2JWrElP4NwSDDvhRj" alt=""><figcaption></figcaption></figure>

| Setting            | Description                                                                                                |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| **Description**    | Supporting text below the heading. Use it to explain what happened and suggest the next step for shoppers. |
| **Size**           | Controls the text size of the description to match the importance of the message.                          |
| **Spacing bottom** | Adds space below the description before the next content block. Increase it for better visual separation.  |

### Button

<figure><img src="/files/UmtS54rwfixZhRK1e4Ju" alt=""><figcaption></figcaption></figure>

| Setting          | Description                                                                                                                                                  |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Button label** | The text displayed on the button, such as **Continue shopping** or **Back to home**.                                                                         |
| **Button link**  | The page shoppers are taken to when they click the button, such as your home page or a collection.                                                           |
| **Type**         | Controls the button style. **Primary** emphasizes the main action, **Outline** provides a lighter appearance, and **Link** displays the action as text only. |

{% hint style="info" %}
The announcement bar, header, footer, and mobile navigation bar are global sections, so they already appear on this template. The menu and the search box in the header are usually what a lost visitor uses to get back on track.
{% endhint %}

## What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Broken and mistyped links land on a branded page carrying your header, footer, and navigation, not on an empty error screen.
* Visitors keep a route back into the catalog, so traffic that would have bounced can still turn into a visit.

## Related pages <a href="#related-pages" id="related-pages"></a>

* [Search page](/velare/customize-your-pages/search-page.md): where a visitor who lands here usually goes next
* [Header](/velare/set-up-your-store/header-group/header.md): the menu and search box shown on this template
* [Footer](/velare/set-up-your-store/footer-group/footer.md): the links at the bottom of the page


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/404-page.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.