> ## 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

> Customizable 404 error page template for handling broken links and missing pages

The Main 404 template displays when customers visit a non-existent page on your store, providing a friendly error message with a customizable call-to-action button to guide users back to active areas of your site. A well-designed 404 page reduces bounce rates by helping lost visitors find their way back to your store content instead of leaving entirely. Use this template to turn the frustration of a broken link into a redirection opportunity with helpful navigation and relevant suggestions.

***

## Template Settings

### Content Configuration

<AccordionGroup>
  <Accordion title="Title" icon="heading">
    Main heading displayed on the 404 error page.

    * **Type:** Text field
    * **Default:** "Page not found"

    <Note>
      Use friendly, helpful language instead of technical error messages. Examples: "Oops! We can't find that page" or "This page took a wrong turn"
    </Note>
  </Accordion>

  <Accordion title="Subtext" icon="align-left">
    Additional message or description below the title.

    * **Type:** Textarea (multi-line text)
    * **Default:** Empty

    **Suggested content:**

    * Explanation of what might have happened
    * Alternative navigation suggestions
    * Search encouragement
    * Apology or reassurance message

    <Tip>
      Example subtext: "The page you're looking for might have been moved, deleted, or never existed. Try searching or browse our collections to find what you need."
    </Tip>
  </Accordion>

  <Accordion title="Call-to-Action Link" icon="link">
    Button that redirects users to an active page.

    **Link Text:**

    * **Type:** Text field
    * **Default:** "Continue shopping"
    * Examples: "Browse Collections", "Return Home", "Explore Products"

    **Link URL:**

    * **Type:** URL field
    * **Default:** `/collections/all`
    * Common alternatives:
      * `/` (homepage)
      * `/collections` (collections page)
      * `/pages/help` (help center)
      * `/search` (search page)

    <Warning>
      Ensure the link URL points to a valid, active page. A broken link on a 404 page creates a frustrating user experience.
    </Warning>
  </Accordion>
</AccordionGroup>

***

## Standard Section Settings

<AccordionGroup>
  <Accordion title="Section Width" icon="left-right">
    * **Page Width** (default) - Contained within page margins
    * **Fluid Width** - Extends to container edges
    * **Full Width** - Edge-to-edge browser width

    <Note>
      Page width is recommended for 404 pages to maintain comfortable reading width for the error message.
    </Note>
  </Accordion>

  <Accordion title="Color Scheme" icon="palette">
    * Select from available theme color schemes
    * **Default:** scheme-1

    <Tip>
      Use a consistent color scheme with your site, or choose a friendly, non-alarming scheme (avoid harsh reds that suggest critical errors).
    </Tip>
  </Accordion>

  <Accordion title="Spacing" icon="arrows-up-down">
    * **Top Spacing**: 0, 1, 2 (default), 4, or 6
    * **Bottom Spacing**: 0, 1, 2 (default), 4, or 6

    Larger spacing creates more visual breathing room for the error message.
  </Accordion>

  <Accordion title="Borders" icon="border-top-left">
    * **None** (default)
    * **Top Border**
    * **Bottom Border**
    * **Both Borders**
  </Accordion>
</AccordionGroup>

***

## Content Strategies

### Tone & Messaging

<CardGroup cols={2}>
  <Card title="Friendly & Helpful" icon="face-smile">
    **Good:**

    * "Oops! This page doesn't exist"
    * "We can't find that page"
    * "Looks like you've hit a dead end"

    **Avoid:**

    * "Error 404"
    * "Page Not Found"
    * Technical jargon
  </Card>

  <Card title="Actionable" icon="diamond-turn-right">
    **Good CTA:**

    * "Browse Collections"
    * "Continue Shopping"
    * "Return to Homepage"

    **Avoid:**

    * "Go Back"
    * "Click Here"
    * Generic "OK" buttons
  </Card>
</CardGroup>

### Subtext Examples

<AccordionGroup>
  <Accordion title="Retail Store" icon="shop">
    **Title:** "This page took a wrong turn"

    **Subtext:** "The page you're looking for might have been moved or doesn't exist. Browse our latest collections or use the search bar to find what you need."

    **CTA:** "Shop New Arrivals" → `/collections/new`
  </Accordion>

  <Accordion title="Fashion Brand" icon="shirt">
    **Title:** "Oops! This outfit doesn't exist"

    **Subtext:** "We couldn't find the page you're looking for. Explore our seasonal collection or discover trending styles to refresh your wardrobe."

    **CTA:** "Discover Trending Styles" → `/collections/trending`
  </Accordion>

  <Accordion title="Home Goods" icon="couch">
    **Title:** "This room is empty"

    **Subtext:** "The page you're searching for has been moved or removed. Check out our featured products or browse by room to find inspiration."

    **CTA:** "Browse by Room" → `/collections`
  </Accordion>

  <Accordion title="Tech/Electronics" icon="laptop">
    **Title:** "404: Page Not Found"

    **Subtext:** "The URL you entered doesn't match any page in our store. Try searching for products or visit our support center for assistance."

    **CTA:** "Search Products" → `/search`
  </Accordion>
</AccordionGroup>

***

## Best practices

<CardGroup cols={2}>
  <Card title="Content guidelines" icon="pen-ruler">
    Use friendly brand-aligned language, acknowledge the issue without blaming user, provide clear next steps, keep messaging concise (1-2 sentences). Don't use technical error codes as main message, create anxiety, leave users without clear action, or apologize excessively.
  </Card>

  <Card title="Navigation strategy" icon="signs-post">
    Best CTA destinations in order: Homepage (/) as safe default, Collections Page (/collections/all) for product discovery, New Arrivals (/collections/new) to highlight fresh inventory, Sale/Featured to convert visitors, or Search Page to help users find what they sought.
  </Card>

  <Card title="SEO & technical" icon="magnifying-glass-chart">
    404 pages should return proper HTTP 404 status code (Shopify handles automatically), keep pages indexed-friendly, don't redirect all 404s to homepage (hurts SEO), monitor errors in Google Search Console, fix broken links when discovered.
  </Card>

  <Card title="Design consistency" icon="palette">
    Maintain header and footer on 404 page, use consistent color schemes with rest of site, keep same navigation available, match typography and button styles, ensure mobile responsiveness. A 404 page should feel like part of your store.
  </Card>

  <Card title="Analytics tracking" icon="chart-line">
    Track which URLs generate 404 errors, identify patterns (old product links, typos, deleted pages), set up Google Analytics event tracking for 404s, review monthly to fix broken internal links, check for external links pointing to non-existent pages.
  </Card>
</CardGroup>

***

## Advanced Enhancements

While the template section covers basic 404 functionality, consider these optional enhancements:

<CardGroup cols={2}>
  <Card title="Search Bar" icon="magnifying-glass">
    Add the predictive search section above the 404 message to help users find what they were looking for
  </Card>

  <Card title="Popular Products" icon="fire">
    Include a featured products section below to showcase bestsellers and reduce bounce rate
  </Card>

  <Card title="Category Links" icon="grid-2">
    Add a content-tiles section with quick links to main product categories
  </Card>

  <Card title="Recent Articles" icon="newspaper">
    Display blog posts to keep users engaged even when the page doesn't exist
  </Card>
</CardGroup>

<Tip>
  Add sections to the 404 template in the Theme Customizer just like any other template. Combine Main 404 with Featured Products, Trust Indicators, or Newsletter sections for a more engaging experience.
</Tip>

***

## Common Scenarios

<AccordionGroup>
  <Accordion title="Deleted Product" icon="box-archive">
    **Situation:** Customer clicks old bookmark to deleted product

    **Solution:**

    * Subtext mentions product might be discontinued
    * CTA directs to similar products collection
    * Optional: Add related products section
  </Accordion>

  <Accordion title="Typo in URL" icon="keyboard">
    **Situation:** Customer mistyped URL or followed broken link

    **Solution:**

    * Friendly message that doesn't blame the user
    * Provide search bar to find intended page
    * CTA to browse all products
  </Accordion>

  <Accordion title="Old Marketing Campaign" icon="bullhorn">
    **Situation:** Customer follows link from old email or ad to expired campaign page

    **Solution:**

    * Subtext explains campaign has ended
    * CTA to current promotions or new arrivals
    * Consider Featured Collections section showing active sales
  </Accordion>

  <Accordion title="Moved Page" icon="arrows-turn-right">
    **Situation:** You reorganized site structure and old URLs no longer work

    **Prevention:**

    * Set up URL redirects in Shopify admin (Navigation → URL Redirects)
    * Use 301 redirects from old URLs to new destinations
    * Monitor 404 reports to catch issues early
  </Accordion>
</AccordionGroup>

***

## Mobile Optimization

The Main 404 template is fully responsive:

* **Centered layout** works well on all screen sizes
* **Button CTA** has adequate touch target size
* **Readable text** scales appropriately for mobile
* **Vertical spacing** adjusts for smaller screens

<Note>
  Test your 404 page on mobile devices to ensure the message is concise and the CTA button is easily tappable.
</Note>

***

## Related Templates

<CardGroup cols={2}>
  <Card title="Main Search" icon="magnifying-glass">
    Search results page where users land when searching (alternative to 404 for finding content)
  </Card>

  <Card title="Main Password" icon="lock">
    Password-protected store page shown when store is locked
  </Card>

  <Card title="Collection Page" icon="grid">
    Collection template users reach when browsing products successfully
  </Card>
</CardGroup>

***

## Customization Template

Use this template when setting up your 404 page:

```
Title: [Brand-specific friendly error message]

Subtext: [1-2 sentences explaining the situation and offering help]

Link Text: [Action-oriented CTA matching your goal]

Link URL: [Most relevant destination for your store]
```

**Example:**

```
Title: "We can't find that page"

Subtext: "The page you're looking for might have been moved or doesn't exist. Browse our collections or use search to find what you need."

Link Text: "Shop All Products"

Link URL: /collections/all
```

***

## Quick Tips

* **Keep it simple** - Don't overcomplicate the 404 page; clear message + clear action = good UX
* **Stay on-brand** - Match your brand's tone (playful, professional, luxury, etc.)
* **Test regularly** - Visit a non-existent URL quarterly to ensure 404 page looks correct
* **Monitor & fix** - Review 404 reports monthly and create redirects for common broken links
* **Don't apologize excessively** - One "oops" or "sorry" is enough
* **Make it helpful** - Every element should guide users back to your store content

<Warning>
  The 404 page is a template-level setting. Changes apply to ALL 404 errors across your store, not individual pages.
</Warning>