Shopify guide

How to create a custom 404 page in Shopify

Turn Shopify's plain "page not found" into a branded page that keeps shoppers in your store instead of bouncing them out.

Updated May 2026 · Online Store 2.0 & vintage themes · ~6 min read
Quick answer

Shopify ships a built-in 404 page. To customise it, edit the 404 template in your theme — visually in the Theme Editor, or in code via templates/404.liquid.

In the Theme Editor, click Customize on your theme, switch the template dropdown at the top to the 404 page, and add sections. Shopify serves this template for every missing URL with a correct HTTP 404 status — automatically.

What the Shopify 404 page is

A 404 page is what a shopper lands on after a broken link, a deleted product, or a mistyped address. Shopify always has one — but most themes ship a cold default: a short "The page you were looking for does not exist" and little else. Every shopper who hits it is one product page away from leaving.

Shopify controls the 404 page through your theme's 404 template. How you edit it depends on the theme generation. Online Store 2.0 themes (Dawn and most themes from the last few years) use a section-based templates/404.json file you can edit visually. Vintage themes use a single templates/404.liquid file you edit in code. You cannot point a normal Shopify page at the 404 — the template is the 404 page.

Method 1 — Customise the 404 template in the Theme Editor

This is the no-code route, and the right one for Online Store 2.0 themes. You get the same drag-and-drop sections you use everywhere else in your store.

1

Open the Theme Editor

From your Shopify admin, go to Online Store › Themes. On the theme you want to edit, click Customize.

2

Switch to the 404 template

At the top centre of the editor there is a template dropdown (it usually starts on "Home page"). Open it, choose Pages, and select 404 page. The canvas now shows your live 404 template.

3

Add sections that help shoppers recover

Use Add section to build the page out. Good additions: a rich-text block with a friendly message, a featured collection of your bestsellers, a link back to the homepage, and an image that carries your brand. The goal is escape routes — never leave a shopper at a dead end.

4

Save

Click Save. If you are editing a theme that is not yet published, publish it (or duplicate-then-publish) when you are ready.

Tip

Duplicate before you edit. In Online Store › Themes, use the menu › Duplicate first. You then have a safe rollback point if an edit goes wrong.

Method 2 — Edit the 404 template in code

For full control of the markup — or on a vintage theme — edit the template directly.

1

Open the code editor

Go to Online Store › Themes, open the menu on your theme, and choose Edit code.

2

Find the 404 template

Under Templates, open 404.json (Online Store 2.0) or 404.liquid (vintage). On a 2.0 theme, 404.json just lists sections — you can add a section under Sections and reference it here. On a vintage theme, 404.liquid holds the markup directly.

templates/404.liquid — a clean starting point

<div class="page-width error-404">
  <h1>We can't find that page</h1>
  <p>
    The link may be broken, or the product may no
    longer be available.
  </p>

  <a href="{{ routes.root_url }}" class="button">
    Back to the homepage
  </a>
  <a href="{{ routes.all_products_collection_url }}" class="button">
    Shop all products
  </a>

  <form action="{{ routes.search_url }}" method="get" role="search">
    <input type="search" name="q" placeholder="Search the store">
    <button type="submit">Search</button>
  </form>
</div>

The routes object gives you Shopify's canonical URLs — routes.root_url, routes.all_products_collection_url, routes.search_url, routes.collections_url — so your links stay correct across locales and storefronts.

3

Save

Save the file. The change is live on that theme immediately.

Method 3 — Use an app

The Shopify App Store has 404-page apps that let you build the page with a visual editor, auto-suggest products from the broken URL, or surface a search box. They are worth it if you want product recommendations on the 404 page without custom Liquid — otherwise the built-in template covers most stores well.

Watch out

Do not blanket-redirect deleted products to your homepage. URL redirects return a 200 or 301 status, so a "missing" page reports as found — a soft 404. Redirect a discontinued product only to a genuinely equivalent one; otherwise let it serve a real 404.

Make sure your 404 page returns a real 404 status

Shopify serves the 404 template with a correct HTTP 404 status by default — you do not have to configure anything. The status only goes wrong when a URL redirect (set under Online Store › Navigation › URL Redirects) or a redirect app intercepts the request first.

To check: visit a URL that does not exist, like yourstore.com/this-is-not-real. You should see your new 404 design. Confirm the status in your browser's developer tools — open the Network tab, reload, and check the first request reads 404, not 200. If it reads 200, see our guide to fixing soft 404 errors.

What makes a Shopify 404 page actually good

A template in place is just the start. A 404 page earns its keep when it recovers the shopper: it explains what happened in your brand's voice, offers a working store search, links to bestselling collections, and never dead-ends. For an e-commerce store especially, the 404 page is a sales surface — a lost shopper who finds a product is a sale you would otherwise have lost.

We break down the twelve traits the strongest 404 pages share on the main page.

Skip the blank page — generate it

Enter your Shopify store and get a complete, on-brand 404 page tailored to your real colours, fonts, and navigation — with the Liquid ready to paste into your theme.

Generate my 404 page →

Free · no account · no opt-in

Frequently asked questions

Where is the 404 page in Shopify?

It is the 404 template in your theme. On Online Store 2.0 themes that is templates/404.json and its sections; on vintage themes it is templates/404.liquid. Shopify uses this template automatically for every missing URL.

Can I use a regular Shopify page as the 404 page?

No. Shopify routes missing URLs to the theme's 404 template, not to an arbitrary page you have created. Customise the 404 template itself in the Theme Editor or in code, or use an app that maps content into it.

Does the Shopify 404 page return a real 404 status?

Yes. Shopify serves the 404 template with a correct HTTP 404 status automatically. A soft 404 only appears if you redirect missing URLs to another page, which returns a 200 or 301 status instead.

Will a theme update erase my custom 404 page?

Updating a theme installs a fresh copy and replaces template files. Always duplicate your theme before editing, and re-apply your 404 changes after any major theme update.

How do I add product recommendations to my 404 page?

Add a featured-collection section in the Theme Editor, render a collection in 404.liquid, or use a 404-page app that suggests products based on the broken URL.

Related guides