> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 404 Error Page

> 404 error page template for page not found errors

## What It Does

The **404 Page** template displays when visitors navigate to a non-existent page on your store (broken link, deleted product, mistyped URL). This template provides a user-friendly error message and navigation options to help customers find what they're looking for.

<Note>
  This is a **static template section** with no customizable settings. Content and layout are coded in the template file. To customize, edit the template code directly or use theme customization apps.
</Note>

## Template Structure

### Default Content

**Typical 404 page includes:**

* **Error message** - "404 Page Not Found" or similar heading
* **Explanation text** - Brief message (e.g., "The page you're looking for doesn't exist")
* **Search bar** - Allows customers to search for products/pages
* **Navigation links** - Links to homepage, collections, or popular pages
* **Visual element** - Icon, illustration, or branded imagery

### User Experience

**When 404 page displays:**

1. Customer clicks broken link or types wrong URL
2. Server can't find page (404 error)
3. Theme displays 404 template instead of blank error
4. Customer sees friendly message and navigation options
5. Customer searches or clicks link to continue browsing

## Common Scenarios

### Broken External Links

**Scenario:** Customer clicks old link from Google search or external blog\
**Solution:** 404 page helps customer search for product or navigate to collections

### Deleted Products/Collections

**Scenario:** Product discontinued and deleted, but link still circulating\
**Solution:** 404 page prevents dead end, offers alternatives

### Mistyped URLs

**Scenario:** Customer types incorrect URL manually\
**Solution:** 404 page politely corrects course with navigation

### Moved Pages

**Scenario:** Store restructured, URLs changed\
**Solution:** 404 page catches old URLs before implementing redirects

## Best practices

<CardGroup cols={2}>
  <Card title="Clear Error Message" icon="triangle-exclamation">
    Use friendly, non-technical language. "Oops! Page Not Found" better than "Error 404: HTTP Not Found".
  </Card>

  <Card title="Search Functionality" icon="magnifying-glass">
    Include search bar prominently. Customers can find what they need without leaving 404 page.
  </Card>

  <Card title="Navigation Links" icon="bars">
    Add links to homepage, collections, popular category pages. Give customers clear next steps.
  </Card>

  <Card title="Set Up Redirects" icon="arrow-right-arrow-left">
    For known broken URLs (moved/deleted pages), set up redirects in Shopify Admin → Navigation → URL Redirects.
  </Card>

  <Card title="Track 404 Errors" icon="chart-line">
    Monitor which URLs trigger 404s (Google Analytics, Shopify apps). Identify patterns and fix broken links.
  </Card>

  <Card title="Maintain Brand Voice" icon="message">
    Match 404 message to brand personality. Playful brands can use humor, professional brands stay formal.
  </Card>

  <Card title="Test Regularly" icon="vial">
    Visit non-existent URL on your store to preview 404 page. Ensure search works and links are current.
  </Card>

  <Card title="Mobile-Friendly" icon="mobile">
    404 page should be fully responsive. Buttons easily tappable, search bar functional on mobile.
  </Card>
</CardGroup>

## Customization Options

### Via Theme Customizer (Limited)

**No settings available in this section**, but other sections may appear on 404 page:

* Header section (standard navigation)
* Footer section (standard footer)
* Additional sections (if theme allows adding sections to 404 template)

### Via Code Editing

**For developers:**

* Edit `templates/404.json` (JSON template) or `templates/404.liquid` (Liquid template)
* Modify section `/sections/section-404.liquid`
* Customize heading text, description, search styling, navigation links
* Add custom illustrations or animations

### Via Apps

**3rd-party apps:**

* "404 Page Redirect" apps can auto-redirect to relevant pages
* "Related Products" apps can show product recommendations on 404
* Check Shopify App Store for "404 customization" apps

## SEO & Technical Notes

### HTTP Status Code

**Important:** Page must return proper 404 HTTP status code (not 200)

* Shopify templates automatically return 404 status
* Tells search engines page doesn't exist (prevents indexing bad URLs)
* Preserves SEO health (broken links don't dilute site authority)

### Not Indexed by Google

**404 pages are not indexed:**

* Search engines recognize 404 status, don't add to search results
* No SEO value to optimize 404 page content for keywords
* Focus on user experience, not SEO

### URL Redirects Alternative

**Instead of showing 404 error:**

1. Shopify Admin → Navigation → URL Redirects
2. Add redirect: Old URL → New URL
3. Customer redirected automatically (no 404 page shown)
4. **Use when:** Known broken URLs (deleted products, moved pages)

## Troubleshooting

**404 page not displaying:**

* Check theme includes `/templates/404.json` or `/templates/404.liquid` file
* Some themes may have broken 404 template (reinstall theme or contact support)

**Search not working on 404 page:**

* Verify search functionality works on main site (test in header search)
* If broken on 404 only, likely template code issue (needs developer review)

**Custom content not showing:**

* If edited template/section code, clear browser cache (Cmd/Ctrl+Shift+R)
* Check for liquid syntax errors in code editor
* Preview in incognito window (avoids cache issues)

**404 page showing on valid pages:**

* URL likely broken (check spelling, ensure page published)
* Check Shopify Admin → Online Store → Pages/Products for page status
* If page exists but shows 404, may be theme template assignment issue

**Too many 404 errors:**

* Check Google Search Console for 404 report (identifies broken URLs)
* Common causes: Deleted products still linked externally, old URLs from Google
* Set up URL redirects for high-traffic broken URLs

## Related Documentation

* **[Password Page](/themes/mojave/pages-templates/password)** - Password protection page template
* **[Header](/themes/mojave/header/header)** - Navigation that appears on 404 page
* **[Footer](/themes/mojave/footer/footer)** - Footer that appears on 404 page
* **[Search Results](/themes/mojave/collections/search)** - Search results page (where 404 search directs)

## Key Takeaways

* **No settings to configure** - 404 template is static, styled by theme
* **Friendly error message** - Helps customers recover from broken links
* **Include search and navigation** - Don't trap customers on dead-end page
* **Set up redirects** - For known broken URLs, redirect instead of showing 404
* **Returns proper 404 HTTP status** - Tells search engines page doesn't exist
* **Not indexed by Google** - No SEO value, focus on user experience
* **Customization requires code editing** - Or use apps for advanced features

For custom 404 page design, contact a Shopify developer or explore 404 customization apps in Shopify App Store.