404 Section (sections/404.liquid)

sections/404.liquid renders the "Page Not Found" error page when users navigate to non-existent URLs. It displays a localized error message, title, and a button linking back to the products collection. The section uses inline CSS for styling and requires no JavaScript or external dependencies.

---

Dependencies & Assets

Type	Files / Components
CSS	Inline <style> block (no external CSS files)
Data	Relies on translation keys for all text content

• No JavaScript dependencies; the section is purely presentational.
• No snippets or external components required.
• All text uses translation keys for localization.

---

Markup Structure

<div class="template-404 page-width">
  <p>
    {{ 'templates.404.subtext' | t }}
  </p>
  <h1 class="title">
    {{ 'templates.404.title' | t }}
  </h1>
  <a href="{{ routes.all_products_collection_url }}" class="button">
    {{ 'general.continue_shopping' | t }}
  </a>
</div>

Structure Breakdown

• Container: Uses page-width class for consistent horizontal spacing with other pages.
• Error message: Paragraph displays localized subtext via templates.404.subtext.
• Title: H1 heading with localized title via templates.404.title.
• Call-to-action: Button links to routes.all_products_collection_url with localized "Continue shopping" text.

---

Behavior

• Purely presentational: No JavaScript interactions; all navigation handled via standard links.
• Server-side rendering: All content rendered server-side with no client-side logic.
• Responsive design: CSS media queries handle mobile vs. desktop styling.
• Accessibility: Semantic HTML structure with proper heading hierarchy (h1 for page title).

---

Schema

This section does not include a {% schema %} block, meaning:

• No customizable settings in the theme editor.
• Styling is hardcoded in the inline CSS.
• Content is controlled entirely through translation keys.
• Layout and spacing cannot be modified without editing the Liquid file.

Note: Consider adding a schema block if merchants need to customize:

• Button text or link destination
• Color scheme
• Padding/margins
• Typography settings

---

Implementation Notes

1. Translation keys: All user-facing text must use translation filters:

   • templates.404.subtext — Error message text
   • templates.404.title — Page title
   • general.continue_shopping — Button text

2. Color values: Current implementation uses hardcoded hex colors (#121212, #121212BF, #ffffff). For theme consistency, consider:

   • Using CSS custom properties from theme settings
   • Integrating with section color scheme settings
   • Making colors configurable via schema

3. Link destination: Button currently links to routes.all_products_collection_url. Alternative destinations could include:

   • routes.root_url (homepage)
   • routes.collections_url (collections index)
   • A configurable URL via schema settings

4. No schema block: Unlike other sections, this file lacks a schema. If customization is needed, add a schema with settings for:

   • Button text/link
   • Color scheme
   • Padding controls
   • Typography options

5. Responsive breakpoint: Mobile styles apply at 768px; ensure this aligns with the theme's global breakpoint strategy.

6. Page-width class: Relies on the global page-width class for horizontal spacing; ensure this class is defined in the theme's base CSS.

7. Accessibility: The section uses semantic HTML (h1, p, a) which is good for screen readers. Consider adding:

   • aria-label on the button if the text doesn't clearly indicate its purpose
   • Focus styles for keyboard navigation

8. 404 template usage: This section is typically assigned to the 404 template in Shopify's template system. Ensure the template is properly configured in the theme.