# Custom "No Results Found" Page

# Introduction

The rcc-search-no-results component lets you replace the default empty-state message on our Shopify Search Results App Block with your own custom Web Component.

Use this when you want to:

Keep no-results messaging on-brand
Provide clear next steps for shoppers
Add a support path such as live chat

# Example Component

The example below shows a full no-results custom component. It accepts an activeQuery value and includes a Chat with us action.

assets/rcc-search-no-results.js
(function () {
  "use strict";

  class SearchNoResultsComponent extends HTMLElement {
    constructor() {
      super();
      this._setFilters = null;
      this._setQuery = null;
      this._activeQuery = "";
      this.attachShadow({ mode: "open" });
    }

    set setFilters(fn) {
      this._setFilters = fn;
      this._render();
    }

    set setQuery(fn) {
      this._setQuery = fn;
      this._render();
    }

    set activeQuery(val) {
      this._activeQuery = val || "";
      this._render();
    }

    get activeQuery() {
      return this._activeQuery;
    }

    connectedCallback() {
      this._render();
    }

    _render() {
      if (!this.shadowRoot) return;

      const style = `
        :host { display: block; }
        .wrap { padding: 16px; border: 1px solid #d1d5db; border-radius: 8px; }
        .title { margin: 0 0 8px; font-weight: 700; }
        .text { margin-bottom: 12px; line-height: 1.4; }
        .actions { display: flex; gap: 8px; align-items: center; }
        button { cursor: pointer; border: 0; background: transparent; color: #325c93; font-weight: 600; }
      `;

      this.shadowRoot.innerHTML = `
        <style>${style}</style>
        <div class="wrap" role="region" aria-label="No results">
          <div class="title">No Results Found</div>
          <div class="text">
            We couldn't find results for "<b>${this._activeQuery || ""}</b>".<br/><br/>
            Here are some tips to help you find what you're looking for:
            <ul>
              <li>Use fewer keywords</li>
              <li>Check your spelling</li>
              <li>Try using different or broader keywords</li>
            </ul>
            <div class="actions">
              Still need help?
              <button onClick="/* TODO: Hook this up to your chat/support launcher */">
                Chat with us
              </button>
            </div>
          </div>
        </div>
      `;
    }
  }

  customElements.define("rcc-search-no-results", SearchNoResultsComponent);
})();

When adding this JavaScript file to your theme, include it in theme.liquid before the search results App Block renders:

theme.liquid
{%- if request.page_type == 'search' %}
    {{ 'rcc-search-no-results.js' | asset_url | script_tag }}
{%- endif %}