404 Page
A fully designed two-column 404 layout with a brand image on the left and an editable message, button, and status code on the right.
The 404 page appears when a customer tries to visit a URL that does not exist in your store — for example a deleted product, a mistyped link, or an old URL that no longer works. Instead of showing a plain error message, this theme gives you a fully designed two-column layout with an image on the left and your message and button on the right. Everything on this page is editable from the Theme Editor.
Section Settings
General
- Color Scheme: Sets the background and text colors for the page. Pick a scheme that matches the rest of your store.
- Padding Top / Padding Bottom: Controls the space inside the section, above and below the content.
- Margin Top / Margin Bottom: Controls the space outside the section, pushing it away from whatever is above or below it on the page.
Content
- Top Heading: The short line of text that appears at the top right of the page, above the button. This is typically a friendly message explaining that the page could not be found — for example "We can't find the page that you're looking for". Keep it brief so it reads clearly at a glance.
- Button Label: The text shown on the call-to-action button next to the top heading. The default is "Back to homepage" but you can change it to anything, such as "Shop now" or "Browse all products".
- Button Link: Where the button takes the customer. By default it links to your homepage. You can change it to any page in your store, such as your all-products collection or a specific landing page, to keep customers shopping rather than leaving.
- 404 Heading: The large text displayed at the bottom left of the content area. This is the main visual statement on the page. The default is "Page Not Found" but you can write anything here — some stores use a short phrase that fits their brand voice.
- Show Status Code: Toggles the large error number on or off. When turned on, the number sits in the bottom right corner of the content area as a bold visual element.
- 404 Code: The number displayed when Show Status Code is turned on. The default is 404. You can leave this as is or change it to match any custom message — though most stores keep it as 404 since that is the standard error code customers recognise.
Best Practices
Do
- Use a striking product or brand image on the left side. The 404 page is a chance to keep customers engaged even when something has gone wrong, so make it look like the rest of your store.
- Point the button to a useful destination — your all-products collection or a popular category page is often more helpful than the homepage.
- Keep the Top Heading message short, friendly, and honest. Customers appreciate clarity over clever phrasing when they are lost.
Don't
- Leave the button link empty — it defaults to the homepage, which is fine, but if you have a better destination for lost customers, set it explicitly.
- Use a very wide landscape image — the image column is tall and portrait-oriented, so wide images will be cropped heavily on the top and bottom.
- Turn off the status code if your store targets customers who are likely to share or troubleshoot broken links — the 404 number helps them identify the issue quickly.