404 page
Overview:
The 404 Page section is a customizable error page displayed when a user navigates to a non-existent URL. It helps guide users back to active content using a combination of messaging, branding, and a call-to-action button — all customizable from the Shopify Theme Editor.
Section Configuration:
Images
| Setting |
Description |
| Desktop Image |
Upload a background image optimized for desktop views. |
| Mobile Image |
Upload a mobile-specific image to optimize small screen experiences. |
If neither image is provided, a placeholder will be shown.
Headings & Descriptions
| Setting |
Description |
| Heading |
The primary title on the 404 page (e.g., “404”). Supports inline rich text. |
| Heading Size |
Controls the heading level and visual size (H1–H6). |
| Heading Weight |
Sets the font weight of the heading (300–900). |
| Subheading |
An optional subtitle (e.g., “Page Not Found”). |
| Subheading Size |
Controls the visual size of the subheading. |
| Subheading Weight |
Sets the font weight of the subheading (300–900). |
| Description |
Optional message to inform or guide users. Supports rich text. |
| Description Size |
Adjusts the font size for the description. |
| Description Weight |
Font weight of the description text. |
| Setting |
Description |
| Button Label |
Text displayed inside the call-to-action button (e.g., “Back to Home”). |
| Button Style |
Choose between primary or secondary button styling. |
| Button Link |
Destination URL to redirect users. Defaults to homepage if blank. |
| Open in New Tab |
If enabled, the link opens in a new browser tab. |
Layout
| Setting |
Description |
| Height (Desktop) |
Sets the height of the section for desktop (small, medium, or large). |
| Height (Mobile) |
Sets the height of the section for mobile devices. |
| Content Position (Desktop) |
Controls alignment of content block within the section on larger screens. |
| Content Position (Mobile) |
Controls vertical positioning on mobile: top, middle, or bottom. |
| Content Width (Desktop) |
Sets the maximum width of the content area as a percentage. |
| Container Layout |
Full-width (container-fluid) or boxed layout (container). |
| Container Padding |
Toggles side padding within the container. |
| Text Alignment (Desktop) |
Align text left, center, or right on larger screens. |
| Text Alignment (Mobile) |
Align text left, center, or right on smaller screens. |
Color Scheme
| Setting |
Description |
| Color Scheme |
Applies a predefined color theme for background, text, and buttons. |
Spacing
| Setting |
Description |
| Top Padding |
Adds vertical space above the section. |
| Bottom Padding |
Adds vertical space below the section. |