How to Add Sections To a Shopify 404 Page: The Guide

Broken URLs and removed product pages can drive away high-intent shoppers, especially when they land on a generic 404 page. Instead of losing potential sales, turn your Shopify 404 page into a conversion opportunity. In this guide, NextSky explains how to add sections to a Shopify 404 page to reduce bounce rates, improve navigation, and recover lost revenue. 

The code-free online store 2.0 way

If your store utilizes a modern Online Store 2.0 (OS 2.0) theme (such as Dawn, Concept, or custom premium architectures), your theme layout natively supports modular sections across all templates.

Step 1: Navigate to the 404 template

1. Log in to your Shopify Admin console.
2. Go to Online Store → Themes.
3. Locate your active theme and click Customize to open the visual theme editor.
4. Open the top-centred drop-down menu (where it displays "Home page") and search for 404 page. Select it to load the template canvas.

Step 2: Add and configure dynamic sections

1. In the left-hand sidebar layout tree, you will see the default 404 page core section.
2. Scroll to the bottom of the sidebar panel and click Add section.
3. Choose the dynamic modules you want to embed. Highly effective choices include:
4. Drag and drop the sections to arrange their vertical hierarchy.

Step 3: Fine-tune section settings

Modern themes offer granular controls inside the section panel. You can easily adjust padding, toggle background colour schemes, or introduce customised section dividers to ensure mobile-responsive rendering matches your exact store aesthetics. Click Save when finished.

The liquid and code architecture way for full flexibility

If your theme restricts section additions on the 404 template, or if you require advanced structural customization, modifying your theme’s source code is the most reliable approach.

Step 1: Access your theme source code

1. Go to Online Store → Themes.
2. Click the three dots (...) next to your active theme and select Edit code.
3. In the left-side directory, open the Templates folder and locate 404.json or 404.liquid.

Note: If your theme uses 404.json, it is fully optimized for OS 2.0 sections. If it uses a legacy 404.liquid file, you can manually call reusable sections.

Step 2: Build a custom 404 section

To ensure code cleanliness, construct a distinct, reusable section file:

1. Navigate to the Sections folder and click Add a new section.
2. Name it custom-404-template.
3. Paste a structured baseline combining HTML, Liquid variables, and CSS rules:

{% comment %}
  Custom 404 Section
{% endcomment %}

<div class="page-404-container">
  <h1>{{ section.settings.heading }}</h1>

  <p>{{ section.settings.subtext }}</p>

  <form
    action="{{ routes.search_url }}"
    method="get"
    role="search"
    class="page-404-search"
  >
    <input
      type="search"
      name="q"
      placeholder="Search our store..."
    >

    <button type="submit">
      Search
    </button>
  </form>

  <a href="{{ routes.root_url }}" class="page-404-button">
    Return to Homepage
  </a>
</div>

<style>
  .page-404-container {
    text-align: center;
    padding: 60px 20px;
  }

  .page-404-search {
    max-width: 500px;
    margin: 30px auto;
    display: flex;
    gap: 10px;
  }

  .page-404-search input {
    flex: 1;
    padding: 12px;
  }

  .page-404-search button,
  .page-404-button {
    padding: 12px 24px;
    background: #000;
    color: #fff;
    border: 0;
    text-decoration: none;
    cursor: pointer;
  }

  .page-404-button {
    display: inline-block;
    border-radius: 4px;
  }
</style>

{% schema %}
{
  "name": "Custom 404 Page",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Oops! Page Not Found"
    },
    {
      "type": "textarea",
      "id": "subtext",
      "label": "Subtext",
      "default": "The link you followed may be broken, or the page may have been removed."
    }
  ],
  "presets": [
    {
      "name": "Custom 404 Page"
    }
  ]
}
{% endschema %}

Step 3: Render your section

Open your core templates/404.liquid file, strip out any legacy hardcoded fallback text wrappers, and call your newly engineered section dynamically:

Đoạn mã

{% layout 'theme' %}

{% section 'custom-404-template' %}

{% section 'featured-products' %}

By appending {% section 'featured-products' %}, you successfully pull your core store homepage recommendations straight onto the error template code-cleanly.

Blueprint of a high-converting 404 layout

An effective error screen balances utility with brand voice. When configuring your sections, prioritize these elements to build an optimal experience:

Testing and validating your setup

Once your sections are fully styled and saved, you must verify structural integrity across varying browser viewports:

1. Open an incognito browser tab and navigate to your production URL with an intentional broken suffix (e.g., https://yourstore.com/pages/nonexistent-test-path).
2. Confirm that all embedded search blocks, navigation menus, and collection collections render quickly and fluidly.
3. Check mobile device simulation inside your inspection tools to ensure touchscreen tracking layouts contain zero padding or overlapping text anomalies.

For advanced 404 layouts or custom logic, working with experienced Shopify developers can save time and ensure optimal performance. The team at NextSky can help build a fully customized 404 page that improves navigation, user retention, and conversions.