4o4 page
Overview:
The 404 Page section is designed to create a customizable error page experience when customers visit a non-existing URL. It supports headings, descriptions, buttons, images, banner visibility, typography customization, responsive layouts, color schemes, and spacing controls. This section helps merchants guide customers back to shopping, display helpful messaging, or maintain brand consistency during navigation errors.
Blocks Configuration
Heading Block
The Heading block displays the main title on the 404 page.
Content:
| Setting |
Description |
| Heading |
Defines the main heading displayed on the 404 page, such as Page Not Found or Oops! Something Went Wrong. Supports rich text formatting such as bold and italic styling. |
Typography:
| Setting |
Description |
| Heading Size |
Controls heading size such as H1–H6, Large, Medium, or Small. |
| Heading Weight |
Adjusts the font thickness ranging from Thin (100) to Black (900). |
| Heading Case |
Changes 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 heading text. |
| Heading Link Style |
Controls styling behavior of links used inside heading content. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the heading block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the heading block on mobile devices. |
Description Block
The Description block displays supporting text below the heading.
Content:
| Setting |
Description |
| Description Text |
Displays supporting content such as error messaging, store guidance, or navigation help. Supports rich text formatting. |
Typography:
| Setting |
Description |
| Description Size |
Controls text size such as Large, Medium, or Small. |
| Description Weight |
Adjusts the font thickness ranging from Thin (100) to Black (900). |
| Description Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Description Font Family |
Allows switching between Default and Heading font family styles. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the description block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the description block on mobile devices. |
The Button block displays a call-to-action button on the 404 page.
| Setting |
Description |
| Button Label |
Defines the text displayed on the button such as Back to Home or Continue Shopping. |
| Button Style |
Controls button appearance such as Primary or Secondary style. |
| Button Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Open in New Tab |
Opens the button link in a new browser tab when enabled. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the button block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the button block on mobile devices. |
Image Block
The Image block displays a custom image on the 404 page.
| Setting |
Description |
| Image |
Uploads a custom image displayed on the 404 page. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the image block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the image block on mobile devices. |
Section Configuration
Banner Settings
| Setting |
Description |
| Show Banner |
Displays a banner image on the 404 page when enabled. |
| Banner Image |
Uploads a custom desktop banner image for the 404 page. |
Layout:
| Setting |
Description |
| Container Layout |
Determines whether the section uses Contained, Contained Content, or Full Width layout. |
| Container Width |
Controls the maximum width of the section container on desktop devices. |
| Text Alignment (Desktop) |
Sets content alignment on desktop devices (Left, Center, or Right). |
| Text Alignment (Mobile) |
Sets content alignment on mobile devices (Left, Center, or Right). |
Color Scheme:
| Setting |
Description |
| Section Color Scheme |
Applies a predefined color palette to the 404 Page section background and content. |