4o4 page
Overview:
The 404 Page section is displayed when a visitor tries to access a page that does not exist on the store. It supports customizable headings, descriptions, buttons, images, banners, typography controls, alignment options, color schemes, and responsive spacing settings. This section helps improve user experience by guiding visitors back to relevant store pages instead of leaving them on a broken page.
Section Configuration
Banner:
| Setting |
Description |
| Show Banner |
Displays a banner image on the 404 page. |
| Banner Image |
Uploads the desktop banner image displayed on the 404 page. |
Layout:
| Setting |
Description |
| Container Layout |
Determines whether the 404 section uses a contained, contained content, or full-width layout. |
| Container Width |
Controls the maximum width of the 404 page container on desktop devices. |
| Text Alignment (Desktop) |
Sets the horizontal alignment of content on desktop devices. |
| Text Alignment (Mobile) |
Sets the horizontal alignment of content on mobile devices. |
Color Scheme:
| Setting |
Description |
| Section Color Scheme |
Applies a predefined color palette to the 404 page background and content. |
Blocks Configuration
Heading Block:
| Setting |
Description |
| Heading Text |
Defines the main heading displayed on the 404 page. |
| Heading Size |
Controls the size of the heading text. |
| Heading Weight |
Adjusts the font thickness of the heading text. |
| Heading Case |
Changes the text transformation style such as uppercase, lowercase, capitalize, or default. |
| Heading Tag |
Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Heading Font Family |
Allows switching between default and body font family styles. |
| Heading Color Style |
Applies predefined color styling to the heading text. |
| Heading Link Style |
Controls the styling behavior of links used inside the heading content. |
Layout:
| Setting |
Description |
| Enable Heading Gradient |
Enables gradient styling for the heading text. |
Spacing:
| Setting |
Description |
| Bottom Spacing (Desktop) |
Adds spacing below the heading block on desktop devices. |
| Bottom Spacing (Mobile) |
Adds spacing below the heading block on mobile devices. |
Description Block:
| Setting |
Description |
| Description Text |
Displays additional information or guidance for visitors on the 404 page. |
| Description Size |
Controls the size of the description text. |
| Description Weight |
Adjusts the font thickness of the description text. |
| Description Case |
Changes the text transformation style of the description text. |
| Description Font Family |
Allows switching between default and heading font family styles. |
Spacing:
| Setting |
Description |
| Bottom Spacing (Desktop) |
Adds spacing below the description block on desktop devices. |
| Bottom Spacing (Mobile) |
Adds spacing below the description block on mobile devices. |
| Setting |
Description |
| Button Label |
Defines the text displayed on the button. |
| Button Style |
Controls the visual appearance of the button such as primary, secondary, or link style. |
| Button Case |
Changes the text transformation style for button text. |
| Open in New Tab |
Opens the button link in a new browser tab when enabled. |
Spacing:
| Setting |
Description |
| Bottom Spacing (Desktop) |
Adds spacing below the button block on desktop devices. |
| Bottom Spacing (Mobile) |
Adds spacing below the button block on mobile devices. |
Image Block:
| Setting |
Description |
| Image |
Uploads an image displayed inside the 404 page content area. |
Spacing:
| Setting |
Description |
| Bottom Spacing (Desktop) |
Adds spacing below the image block on desktop devices. |
| Bottom Spacing (Mobile) |
Adds spacing below the image block on mobile devices. |
