404

Configure the not-found page message, image, alignment, and return link.

The 404 template gives visitors a clear recovery path when a page no longer exists or a URL is incorrect. Use it to explain the missing page and send the visitor to an approved destination.

Open the 404 template

From Shopify admin, go to Online Store > Themes > Customize.
Use the page selector to open 404 page.
Select the 404 section.
Preview the page with and without an image and verify the return link before saving.

Template order

The current saved 404 template contains one section:

404

Content

Image

Controls: Optional image shown above the recovery message.
Use it when: Use a simple, relevant image that supports the recovery action without implying a specific missing product.

Heading

Controls: Main not-found heading.
Use it when: Keep it concise and explain that the requested page is unavailable.
Fallback: When blank, the section uses the theme's translated not-found message.

Text

Controls: Supporting not-found explanation.
Fallback: When blank, the section uses the theme's translated description.

Button label

Controls: Text for the recovery action.
Fallback: When blank, the section uses the theme's translated back-to-shopping label.

Button link

Controls: Destination of the recovery action.
Fallback: When blank, the section links to the store's all-products collection route.

Layout

Content alignment

Controls: Aligns the 404 content.
Options: Left or Center. The current default is Center.

Spacing

Section spacing

Controls: Sets the 404 section spacing to None, Small, Medium, or Large. The current default is Large.

Top spacing

Controls: Adds or removes top spacing. The current default is on.

Bottom spacing

Controls: Adds or removes bottom spacing. The current default is on.

Desktop and mobile behavior

A final guide should compare the image and no-image states at desktop and mobile sizes, including long translated text and the recovery button. Exact breakpoints and final image crop behavior require accepted browser verification.

Media recommendations

Use an image with a clear focal point and no real customer, order, or account information. Exact dimensions require approved fixture testing.

Accessibility and motion

Use alternative text that explains the purpose of the image. Keep the recovery heading and button understandable without the image, and verify keyboard focus and reduced-motion behavior for image reveal.

Common checks

If the return action goes to the wrong place, review Button link; a blank value intentionally uses the all-products collection route.
If the custom message is absent, check whether the corresponding text field is blank and the translated fallback is being used.

[!NOTE] The labels, fallback behavior, options, defaults, and section order above come from the current 404 template and section schema. Final responsive layout, crop, and interaction behavior remain pending accepted browser verification.

404