404 page template

The 404 page in Shopify is the error page that is displayed when a visitor lands on a URL that does not exist or cannot be found.

The 404-page serves as a way to inform visitors that the requested page is not available, and it can also be an opportunity to engage with them and provide alternative options. In Shopify, you can customize your 404 page to match the design and branding of your store and make it more helpful and user-friendly.

When customizing your 404 page, you can add a personalized message or apology for the inconvenience, and provide links to popular or relevant pages on your site. This can help visitors find their way back to the main content or explore other areas of your store.

General settings

Setting	Description
Heading color	Choose a font color for headings from the dropdown options: Main Secondary Heading These colors can be customized in Theme Settings and will apply across the entire theme.
Heading font weight	Select the font weight from the dropdown options: Normal Medium Semi Bold Bold
Heading style	Choose the visual style for your headings based on your design preferences: Default (Title Case or Sentence Case): Displays text according to how it's written in the theme content. For example, “404 Error” or “404 error”. Uppercase: Converts all heading text to uppercase, regardless of how it's written.
Heading letter spacing	Adjust the spacing between letters to fine-tune the visual appearance of your headings.
Color-changing text	To change the color of non-adjacent words, separate them with commas. Use the color palette below this option to choose your desired color.
Custom color (for heading)	Highlight individual words within the heading using a different color.
Description color	Choose a color for the description text from the dropdown: Main Secondary Heading Color values are set in Theme Settings and will affect the entire theme.
Text color	Select a color for body text: Main Secondary Heading These options reflect global Theme Settings and apply site-wide.
Text	Add text to the page and format it using the top toolbar in the text field.
Text font	You can choose whether text uses the Heading or Body text style. To change the font family, font size, or font weight of heading or body style, go to Theme Settings > Typography. Note: Changes in the Typography tab will apply across the entire theme.
Enable overlay for text	Toggle the switch, and image overlays will be displayed on the page.
Left image overlay	Displays an image overlay on the left side of the page.
Right image overlay	Displays an image overlay on the right side of the page.
Background color	Choose a background color for the page by clicking the box that contains the color circle and name, then select a color from the palette.

Example of image overlay