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

You can choose font color for heading from dropdown list with options: Main, Secondary, Heading.

*Colors for these styles you can set in theme settings, but it’ll impact on the whole theme.

Heading font weight You can choose font weight from the dropdown list with options: Normal, Bold.
Heading style

Choose a style: default (title case) or uppercase according to your design preferences.


Heading letter spacing Adjust the letter spacing to customize the gap between characters in the text. Fine-tune this setting to achieve the desired visual appeal for your text.
Сolor-changing text  To change the colors of words that are not next to each other, use a comma. Choose color from the color palette below this option.
Custom color (for heading) Highlight individual words using different color.
Description color

You can choose font color for description from the dropdown list with options: Main, Secondary, or Heading.

*Colors for these styles you can set in theme settings, but it’ll impact on the entire theme.

Text color

You can choose font color for text from a dropdown list with options: Main, Secondary, Heading.

*Colors for these styles you can set in theme settings, but it’ll impact on the entire theme.

Text You can add text to the page and use settings in the top menu of the field.
Text font

1) Heading - settings for the font as for heading-font

2) Body - settings for the font as for body-font

*Change the font family, font size, and font weight of heading or body style in Theme settings /Typography. Any change in the Typography tab of theme settings will affect the whole theme.

Enable image overlay Mark the checkbox, and image overlays will be displayed on the page.
Image overlay: Image overlay is a design technique where additional elements, such as lights, are added to the page to enhance its visual appeal and make the site more interesting. 
Left image overlay It will be displayed on the left side of the page.
Right image overlay It will be displayed on the right side of the page.
Background color Choose a background color for the page by clicking on the circle and selecting a color. 

Example of Image overlay

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us