Skip to main content

​
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.
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.

​
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

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

Clear Error Message

Use friendly, non-technical language. “Oops! Page Not Found” better than “Error 404: HTTP Not Found”.

Search Functionality

Include search bar prominently. Customers can find what they need without leaving 404 page.

Navigation Links

Add links to homepage, collections, popular category pages. Give customers clear next steps.

Set Up Redirects

For known broken URLs (moved/deleted pages), set up redirects in Shopify Admin → Navigation → URL Redirects.

Track 404 Errors

Monitor which URLs trigger 404s (Google Analytics, Shopify apps). Identify patterns and fix broken links.

Maintain Brand Voice

Match 404 message to brand personality. Playful brands can use humor, professional brands stay formal.

Test Regularly

Visit non-existent URL on your store to preview 404 page. Ensure search works and links are current.

Mobile-Friendly

404 page should be fully responsive. Buttons easily tappable, search bar functional on mobile.

​
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
  • Password Page - Password protection page template
  • Header - Navigation that appears on 404 page
  • Footer - Footer that appears on 404 page
  • Search Results - 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.