Predictive search

A type-ahead search box: as the shopper types, <predictive-search> queries Shopify’s predictive search and shows product suggestions in a dropdown under the input. Each suggestion is a real product link. This is a fragment for your navbar, inside your page’s <storesynk-store>.

<nav class="navbar">
  <span class="brand">My Store</span>

  <predictive-search limit="6">
    <input type="search" placeholder="Search products…" />
    <!-- This wrapper becomes the dropdown; its first item is the suggestion TEMPLATE. -->
    <div class="ps-results">
      <search-result-item>
        <storesynk-product>
          <product-link>
            <a class="ps-link">
              <show-image main class="ps-img"><img alt="" /></show-image>
              <span class="ps-info">
                <show-title class="ps-title"></show-title>
                <show-price class="ps-price"></show-price>
              </span>
            </a>
          </product-link>
        </storesynk-product>
      </search-result-item>
    </div>
  </predictive-search>
</nav>

• <predictive-search> needs both an <input> and an item template, a <search-result-item> (preferred) or a bare <storesynk-product>. Missing either, it renders nothing (SSK-107).
• The template’s parent element becomes the dropdown container. The engine clones suggestions into it and marks the open state with [ss-open] on <predictive-search>.
• The dropdown closes on Escape and on an outside click. The full ARIA combobox pattern is still in progress; see the accessibility reference.

Options

Attribute	Type / default	Meaning
limit	number = 6	Maximum suggestions.
debounce	number = 200	Input debounce in ms.

Styling

predictive-search { position: relative; }
.ps-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; display: none; }
predictive-search[ss-open] .ps-results { display: block; }
predictive-search storesynk-product { display: contents; }  /* let .ps-link own the row layout */
.ps-link { display: flex; gap: 10px; align-items: center; padding: 8px 12px; }

[ss-loading] is also set on <predictive-search> during a fetch.

Gotchas

• The dropdown never appears: [ss-open] only marks the state. Your CSS must reveal the container from it, as above.
• Suggestions collapse or misalign: a custom element defaults to display: inline. Give the cloned storesynk-product display: contents.
• Nothing renders outside <storesynk-store>. See search and lists troubleshooting.

Related

• Lists & search tag reference
• Search page
• Cart drawer