Skip to main content
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

Main heading displayed on the 404 error page.
  • Type: Text field
  • Default: “Page not found”
Use friendly, helpful language instead of technical error messages. Examples: “Oops! We can’t find that page” or “This page took a wrong turn”
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
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.”

​
Standard Section Settings

  • Page Width (default) - Contained within page margins
  • Fluid Width - Extends to container edges
  • Full Width - Edge-to-edge browser width
Page width is recommended for 404 pages to maintain comfortable reading width for the error message.
  • Select from available theme color schemes
  • Default: scheme-1
Use a consistent color scheme with your site, or choose a friendly, non-alarming scheme (avoid harsh reds that suggest critical errors).
  • 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.
  • None (default)
  • Top Border
  • Bottom Border
  • Both Borders

​
Content Strategies

​
Tone & Messaging

Friendly & Helpful

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

Actionable

Good CTA:
  • “Browse Collections”
  • “Continue Shopping”
  • “Return to Homepage”
Avoid:
  • “Go Back”
  • “Click Here”
  • Generic “OK” buttons

​
Subtext Examples

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

​
Best practices

Content guidelines

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.

Navigation strategy

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.

SEO & technical

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.

Design consistency

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.

Analytics tracking

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.

​
Advanced Enhancements

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

Search Bar

Add the predictive search section above the 404 message to help users find what they were looking for

Popular Products

Include a featured products section below to showcase bestsellers and reduce bounce rate

Category Links

Add a content-tiles section with quick links to main product categories

Recent Articles

Display blog posts to keep users engaged even when the page doesn’t exist
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.

​
Common Scenarios

Situation: Customer clicks old bookmark to deleted productSolution:
  • Subtext mentions product might be discontinued
  • CTA directs to similar products collection
  • Optional: Add related products section
Situation: Customer mistyped URL or followed broken linkSolution:
  • Friendly message that doesn’t blame the user
  • Provide search bar to find intended page
  • CTA to browse all products
Situation: Customer follows link from old email or ad to expired campaign pageSolution:
  • Subtext explains campaign has ended
  • CTA to current promotions or new arrivals
  • Consider Featured Collections section showing active sales
Situation: You reorganized site structure and old URLs no longer workPrevention:
  • 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

​
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
Test your 404 page on mobile devices to ensure the message is concise and the CTA button is easily tappable.

Main Search

Search results page where users land when searching (alternative to 404 for finding content)

Main Password

Password-protected store page shown when store is locked

Collection Page

Collection template users reach when browsing products successfully

​
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
The 404 page is a template-level setting. Changes apply to ALL 404 errors across your store, not individual pages.