404 Page
A customizable "page not found" section that turns a dead end into an opportunity. Display helpful messages, imagery, and social links when visitors land on broken or missing pages.
Overview
The 404 section displays when a visitor lands on a URL that doesn't exist. Instead of a generic error, Brave provides a fully customizable experience that keeps visitors engaged and guides them back to shopping.
Dual Images
Custom Content
Social Links
Responsive Images
When to Use
The 404 page automatically displays when:
- A visitor types a wrong URL directly
- A link points to a deleted product or page
- Search engines index removed content
- External sites link to moved content
Monitor your 404 page traffic in Google Analytics. Frequent hits may indicate broken links on your site or outdated external links that need redirects.
Quick Setup
Navigate to 404 Template
Go to Online Store → Themes → Customize and select 404 page from the template dropdown at the top.
Add Your Messaging
Customize the heading and text to match your brand voice. Consider using friendly, helpful language.
Set Button Destination
Point the CTA button to your most important page—usually "Shop All" or your homepage.
Add Visual Interest
Upload one or two images that represent your brand. These can be product shots, lifestyle images, or branded graphics.
Section Settings
Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Label | text | undefined | Small uppercase text above the heading (e.g., 'OOPS' or 'PAGE NOT FOUND'). |
| Heading | text | 404 | Main heading displayed prominently. Keep it friendly and on-brand. |
| Subheading | text | undefined | Secondary text providing context or explanation. |
| Text | richtext | undefined | Additional message or helpful suggestions for the visitor. |
Button
| Setting | Type | Default | Description |
|---|---|---|---|
| Label | text | Back to shopping | Text displayed on the call-to-action button. |
| Link | url | /collections/all | Where the button takes visitors. Usually your shop or homepage. |
| Style | select | Primary | Button appearance. Options: Primary, Secondary, Primary outline, Secondary outline. |
Social Links
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | text | undefined | Optional heading above social links (e.g., 'Follow us'). |
| Show links | checkbox | true | Display social media links from Theme Settings → Social. |
Social links are pulled from your Theme Settings → Social media configuration. Make sure those are filled in for links to appear.
Images
| Setting | Type | Default | Description |
|---|---|---|---|
| First (desktop) | image_picker | undefined | Primary image shown on desktop. Part of a two-image grid. |
| First (mobile) | image_picker | undefined | Optional mobile-specific version of the first image. |
| Second (desktop) | image_picker | undefined | Second image for the desktop grid. Creates a balanced layout. |
| Second (mobile) | image_picker | undefined | Optional mobile-specific version of the second image. |
Spacing
| Setting | Type | Default | Description |
|---|---|---|---|
| Desktop top | range | 0px | Top margin on desktop (0-120px). |
| Desktop bottom | range | 0px | Bottom margin on desktop (0-160px). |
| Mobile top | range | 0px | Top margin on mobile (0-120px). |
| Mobile bottom | range | 0px | Bottom margin on mobile (0-160px). |
Best Practices
Content Strategy
- Be friendly, not apologetic — "Looks like this page took a vacation" works better than "Error 404"
- Provide clear direction — Always include a prominent CTA button
- Keep it on-brand — Use your brand voice and visual style
- Suggest alternatives — Consider linking to popular categories or search
Image Tips
- Use engaging imagery — This is a chance to show off your brand
- Match your aesthetic — Images should feel consistent with your site
- Optimize file sizes — Large images slow page load
- Consider humor — A playful image can turn frustration into a smile
SEO Considerations
- Set up redirects — For known broken URLs, create 301 redirects
- Monitor 404 hits — Use Google Search Console to find crawl errors
- Don't over-customize — Keep the page simple and fast-loading
- Maintain site structure — Ensure your navigation is always accessible
Don't hide the 404 status — Search engines need to receive a proper 404 HTTP response so they can remove indexed pages that no longer exist.
Example Configurations
Minimal & Clean
- Label: "404"
- Heading: "Page not found"
- Text: "The page you're looking for doesn't exist or has been moved."
- Button: "Continue shopping" →
/collections/all - Images: None (text-only)
Visual & Engaging
- Label: "OOPS!"
- Heading: "This page went on vacation"
- Subheading: "Don't worry, your next favorite outfit is just a click away."
- Button: "Shop New Arrivals" →
/collections/new-arrivals - Images: Two lifestyle shots of your products
Social Focus
- Heading: "Page not found"
- Text: "While you're here, connect with us on social media!"
- Social heading: "Follow our journey"
- Show links: ✓ Enabled
- Button: "Back to homepage" →
/
Troubleshooting
Images not displaying
- Verify images are uploaded in the section settings
- Check that image files aren't corrupted
- Try re-uploading the images
- Ensure images meet Shopify's requirements
Social links missing
- Go to Theme Settings → Social media and add your URLs
- Ensure Show links is enabled in section settings
- Verify the social URLs are valid format
Button not working
- Check that a URL is set in the Link field
- Verify the destination page exists
- Try using a different URL format (with or without domain)
Layout issues
- Check if images have appropriate aspect ratios
- Test on different screen sizes
- Verify spacing settings aren't causing overlap
Related Settings
- Theme Settings → Social media — Configure social links that appear on 404 page
- Navigation → Create redirects — Set up 301 redirects for moved content
📖 See Theme Settings for global configuration options.