Page not found (404)

Last updated: Feb 21, 2019

A 404 page appears when a website is active, but the specific page being requested within it doesn’t exist. This example demonstrates the markup required to output a “page not found” message, and includes a search field to help a customer find what they might be looking for. You can learn more about how to build 404 pages on the Shopify Web Design and Development Blog.

Place the following code in the Templates/404.liquid file.

<section>
  <h2>Page not found</h2>
  <p>The page you requested is not here. If you feel like this is incorrect, you can drop us a <a href="/pages/help/">note</a>, or head back to the <a href="{{ shop.url }}">storefront</a>.</p>
  <form action="{{ shop.url }}/search" method="get" accept-charset="utf-8" role="search">
    <label for="q">Search</label>
    <input type="search" id="q" name="q" />
    <button>Search</button>
  </form>
</section>

Please note: We have intentionally limited CSS and JavaScript, and removed translation strings in order to keep these examples compatible with any theme. Any CSS we have included is for accessibility or rendering purposes.