# 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

<br/>

## Example Component

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

```js 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:

:::code language="js" title="theme.liquid" source="/static/code-snippets/liquid-include-nrf.liquid" :::