404 page template
General settings
| Setting | Description |
| Section color scheme | Applying a chosen color scheme to 404 template from a suggested list of color schemes automatically updates all associated colors for a cohesive look across your website. |
| Show breadcrumbs | Enable this option to display the breadcrumb navigation trail on your pages. Customers can back to the homepage by clicking on homepage link in breadcrumbs. |
| Breadcrumbs color scheme | Choose an appropriate color scheme for the breadcrumbs from the schemes list. The color scheme includes different colors for the background and text. |
| Use custom active breadcrumb color | Enable this option to set a custom color for the active breadcrumb. |
| Custom color for active breadcrumb | Choose your desired color from the color palette. |
| Image | Choose a main image for 404 template from your media library, or upload a new one. |
| Content | To add content to the section, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the text such as making it bold, italic, or adding a hyperlink. Additionally, you can use the style of headings from H1 to H6 to body text. |
| Show continue button | Enable this setting to display a button that allows users to easily return to the homepage. |
| Button style | In Shopify, the Button style can be customized by using the primary and secondary button color sets, which are defined in the theme settings. These color sets allow you to style buttons consistently across your store. |
| Button outline | None: The button has no outline. It appears flat, with just the background color and text, giving it a clean, minimal look. Outline: The button has a visible border around it, but the background is transparent. Outline on Hover: The button appears flat without a border or background initially. However, when the user hovers over it, a visible border appears, and the button's background remains transparent. |
| Top padding | The "Top padding" setting allows you to adjust the amount of space at the top of the content section using a slider. |
| Bottom padding | The "Bottom padding" setting functions similarly to the “Top padding” setting, but controls the space at the bottom of the content section using a slider. |
| Top padding mobile | The "Top padding mobile" setting allows you to adjust the amount of space at the top of the content section for mobile devices using a slider. |
| Bottom padding mobile | The "Bottom padding mobile" setting functions similarly to the “Top padding mobile” setting, but controls the space at the bottom of the content section for mobile devices using a slider. |