404 Error Page Template

The 404 error page is displayed when a customer tries to access a page that doesn't exist on your store. It shows a friendly error message and helps guide customers back to your store.

Overview

The 404 error page is automatically shown when a customer navigates to a URL that doesn't exist on your store. It displays an error code, a friendly message, and a button to help customers return to shopping. This page uses a simple, centered layout designed to minimize frustration and guide customers back to your store.

Where to Use

The 404 error page template (404.json) is automatically used by Shopify when:

A customer visits a URL that doesn't exist
A page has been deleted
A URL has been changed or moved
A broken link is clicked
A product or collection URL is incorrect

When it appears:

Automatically shown by Shopify
Cannot be manually accessed by customers
Appears when URL doesn't match any existing page

Access the template:

Go to Online Store → Themes → Customize
Navigate to Templates → 404
Customize the 404 section

Settings

The 404 section has no customizable settings. It uses a fixed design with:

Centered layout
Error code display
Heading and description
Call-to-action button

Note: The 404 section is intentionally simple and cannot be customized through the theme editor. The content is controlled by translation keys in your locale files.

How It Works

Page Structure

The 404 page displays:

Error Code: "404" displayed at the top
Heading: "Page not found." message
Description: "The page you were looking for can't be found." explanation
Button: "Back to shopping" button that links to all products

Content Display

Error Code:

Displays "404" in uppercase
Small, subtle text
Serves as visual indicator

Heading:

"Page not found." message
Large, prominent text
Clear communication

Description:

"The page you were looking for can't be found." explanation
Provides context
Helps customers understand what happened

Button:

"Back to shopping" text
Links to all products collection
Helps customers continue shopping
Uses primary button style

Layout

Centered Design:

All content centered on page
Clean, minimal appearance
Focuses attention on message

Spacing:

72px top and bottom padding
16px gap between elements
Comfortable reading experience

Responsive:

Heading scales with viewport size
Works on all devices
Mobile-friendly layout

Translation Keys

The 404 page uses these translation keys (in locales/en.default.json):

{
  "404": {
    "title": "404",
    "not_found": "Page not found.",
    "description": "The page you were looking for can't be found.",
    "back_to_shopping": "Back to shopping"
  }
}

Customizing text:

Edit translation keys in locale files
Available in theme editor → Languages
Supports multiple languages

Common Use Cases

Standard 404 Page

What it does:

Shows when page doesn't exist
Displays error message
Provides way back to store

Use Case: Default behavior for all missing pages

Deleted Page

What it does:

Shows when page was deleted
Helps customers understand
Guides them back to store

Use Case: Page removed from store

Broken Link

What it does:

Shows when link is broken
Prevents customer frustration
Provides alternative path

Use Case: External link or old URL

Moved Content

What it does:

Shows when URL changed
Helps customers find content
Provides navigation option

Use Case: Page URL changed or content moved

Tips & Best Practices

✅ Do's

Keep it simple: Simple design reduces frustration
Provide clear message: Help customers understand what happened
Include navigation: Button helps customers continue shopping
Test broken links: Ensure 404 page displays correctly
Use translations: Support multiple languages
Monitor 404 errors: Check which pages are missing
Fix broken links: Update or remove broken links
Redirect when possible: Set up redirects for moved content

❌ Don'ts

Don't make it complex: Keep design simple and clear
Don't blame the customer: Use friendly, helpful language
Don't leave customers stuck: Always provide navigation option
Don't ignore 404 errors: Monitor and fix broken links
Don't forget mobile: Ensure mobile experience is good
Don't use technical jargon: Keep language simple
Don't remove the button: Always provide way back to store
Don't forget translations: Support all store languages

Customizing the 404 Page

Editing Translation Keys

To customize text:

Go to Online Store → Themes → Customize
Navigate to Languages → Default language
Find 404 section
Edit translation keys:
- 404.title: Error code text
- 404.not_found: Heading text
- 404.description: Description text
- 404.back_to_shopping: Button text
Save changes

Example customizations:

"Oops! Page not found"
"We couldn't find that page"
"Let's get you back to shopping"

Modifying the Section (Advanced)

To customize design (requires code editing):

Edit sections/404.liquid
Modify CSS in {% stylesheet %} block
Adjust HTML structure if needed
Test changes

Note: Changes to section code will be overwritten if theme is updated. Consider creating a custom section instead.

Examples

Example 1: Standard 404 Page

Content:

Error Code: "404"
Heading: "Page not found."
Description: "The page you were looking for can't be found."
Button: "Back to shopping"

Result: Standard, friendly 404 page

Example 2: Customized Text

Content:

Error Code: "404"
Heading: "Oops! Page not found"
Description: "We couldn't find the page you're looking for."
Button: "Continue shopping"

Result: More personalized 404 page

Example 3: Branded 404 Page

Content:

Error Code: "404"
Heading: "This page doesn't exist"
Description: "But don't worry, we have plenty of other great products!"
Button: "Shop now"

Result: Branded, helpful 404 page

Troubleshooting

404 Page Not Showing

Check: Verify 404 template exists
Check: Ensure 404 section is added to template
Check: Test with a non-existent URL
Check: Verify template is assigned correctly

Custom Text Not Appearing

Check: Verify translation keys are updated
Check: Ensure correct locale file is edited
Check: Clear browser cache
Check: Test in different browser

Button Not Working

Check: Verify button links to products
Check: Test button click
Check: Ensure products collection exists
Check: Check for JavaScript errors

Styling Issues

Check: Verify CSS is loading
Check: Check for CSS conflicts
Check: Test on different devices
Check: Verify responsive design

Translation Issues

Check: Verify translation keys exist
Check: Ensure correct locale is active
Check: Test in different languages
Check: Verify locale file format

Monitoring 404 Errors

Why Monitor 404 Errors

Benefits:

Identify broken links
Find missing pages
Improve user experience
Fix navigation issues

How to Monitor

Shopify Analytics:

Go to Analytics → Reports
Check for 404 errors
Review error patterns

Google Search Console:

Set up Google Search Console
Monitor 404 errors
Identify broken links

Third-Party Tools:

Use analytics tools
Monitor error pages
Track 404 frequency

Fixing Common Issues

Broken Links:

Update links to correct URLs
Remove broken links
Set up redirects when needed

Missing Pages:

Restore deleted pages
Create new pages if needed
Update navigation menus

Moved Content:

Set up redirects
Update internal links
Update external links

Redirects for Moved Content

Setting Up Redirects

When to use:

Page URL changed
Content moved to new location
Product or collection URL changed

How to set up:

Go to Online Store → Navigation
Click URL Redirects
Add redirect from old URL to new URL
Save redirect

Benefits:

Prevents 404 errors
Maintains SEO value
Improves user experience
Preserves link equity

Related Templates

Home Page - Store homepage
Product Page - Product pages
Collection Page - Collection pages
All store pages - Other page templates

Related Sections

404 Section - Error page display (this section)
Button Snippet - Button component used on 404 page

Next Steps:

Learn about Home Page Template
Customize 404 page translations
Monitor 404 errors in analytics
Set up redirects for moved content
Fix broken links in your store
Test 404 page functionality