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.
Image
- Image: The image that fills the left half of the page. Use something visually interesting that fits your brand — a product photo, a lifestyle shot, or a branded illustration all work well here. If left empty, the theme shows a placeholder graphic automatically. Upload a high-resolution image for the best result — a portrait or square image works better than a very wide one.
Content
- Top Heading: The short line of text that appears at the top right of the page, above the button. Typically a friendly message explaining the page could not be found. 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. Default: "Back to homepage".
- Button Link: Where the button takes the customer. Default: your homepage. You can change it to any page in your store, such as your all-products collection.
- 404 Heading: The large text displayed at the bottom left of the content area. Default: "Page Not Found".
- 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. Default: 404. Most stores keep this 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.
- 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.