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
