# Predictive search

> A search field that shows products and search suggestions as the visitor types, in a Webflow Dropdown, a popover or right on the page. Covers smootify-search, its regions, the result template and the link to the search page.

Status: Ready (Smootify 2.0)  
Add-on: Predictive Search  
1.x page: https://docs.smootify.io/docs/search-filters  
URL: https://www.smootify.io/docs/build/predictive-search  
Updated: 2026-10-07

Predictive search shows results while the visitor types: up to 10 products, and the searches Shopify suggests for those words. It usually sits in the navbar, with the results in a Webflow Dropdown or a popover. For the full list of results, pair it with a [search results page](https://www.smootify.io/docs/build/search-page).

> [!NOTE]
> Turn on the **Predictive Search** add-on in the Smootify dashboard. The Lite and Server plans include it. On your `.webflow.io` address it works without it, so you can build and test first. Shopify's Search & Discovery app can tune the results, for example with synonyms, but it is not required.

## How it fits together

What Smootify needs:

- a `smootify-search` element;
- inside it, a Text field whose **Name** setting is `query`. It sits in a Form Block, as every Webflow field does.

What is up to you:

- where the results appear: in a Webflow Dropdown, in a popover, or in place on the page, such as in a menu panel;
- which parts you use: the result list, the suggestions, the empty message, the content shown before the visitor types;
- how a result looks: a simple result template, or a full product card.

```html
<smootify-search>
  <div class="w-form"><form><input name="query"></form></div>
  <div class="w-dropdown">
    <div class="w-dropdown-toggle"><div>Results</div></div>
    <nav class="w-dropdown-list">
      <search-with-query>
        <search-result>
          <a search="url" href="#" class="w-inline-block"><img search="image"><div search="title">Product name</div><div search="price">$0.00</div></a>
        </search-result>
        <search-empty><div>No products found</div></search-empty>
      </search-with-query>
    </nav>
  </div>
</smootify-search>
```

## 1. Add the search field

1. Add a Custom element with the tag [`smootify-search`](https://www.smootify.io/docs/reference/elements/smootify-search).
2. Inside it, add a Form Block with one Text field. Smootify searches with it whatever its **Name**. With two text fields, set the Name of the search one to `query`.

Smootify searches a short moment after the visitor stops typing, and when they press Enter. The Form Button is optional.

`limit` on `smootify-search` sets how many products show, up to 10, which is also the default. Shopify returns at most 10 products for a predictive search.

## 2. Choose where the results appear

The results can appear in one of three places:

| Where | Put the results | Opens and closes |
|---|---|---|
| A Webflow Dropdown | inside the Dropdown list; the Text field can sit inside the Dropdown or next to it | Smootify opens the Dropdown as the visitor types |
| A popover | inside a popover (see [Popovers](https://www.smootify.io/docs/build/popovers)) | opens when the visitor clicks the field, so the suggestions for an empty field show, and as they type; a `button` with `data-action="close"` anywhere in `smootify-search`, such as next to the field, closes it |
| In place | anywhere in `smootify-search`, with no Dropdown or popover | each part shows and hides itself where it is, such as in a full-screen menu |

## 3. The regions

These Custom elements show and hide themselves with the state of the search. All are optional:

| Tag | Shown while | Holds, for example |
|---|---|---|
| `search-no-query` | the field is empty | your own suggestions, such as popular searches |
| `search-with-query` | the field has words in it | the results, the empty message, Shopify's suggestions |
| `search-empty` | the words found no product | a message such as "No products found" |
| `search-suggestions` | Shopify has search suggestions for the words | Shopify's suggestions; put it inside `search-with-query` |

In a Webflow Dropdown without `search-with-query`, the Dropdown list stays hidden until there are results or the empty message.

## 4. The results

There are two ways to show a result:

- **A result template**, `search-result`: a Custom element with `search="…"` values inside, copied once per product. Prices with `search="price"` and `search="compare-at-price"`: a `smootify-price` inside it has no product to read.
- **A product card**, `smootify-product` with `data-id="search"` inside `search-with-query`, designed as a product card: it shows everything a product card shows, such as `smootify-price` or an add-to-cart button, but each card loads the whole product from Shopify.

**A result template.** Add a Custom element with the tag [`search-result`](https://www.smootify.io/docs/reference/elements/search-result). It is the template: Smootify copies it once per product, and removes other `search-result` elements you designed. Inside it, `search="…"` fills an element with a value of the product:

- `search="title"`, `search="vendor"`, `search="type"`: text;
- `search="url"` on a Link block or a Text link: the product page’s link;
- `search="image"` on an Image: the product’s main image;
- `search="price"`: the lowest price of the product;
- `search="compare-at-price"`: its crossed-out price, removed when it is not on sale;
- `search="collection"`: the first collection’s name, with its link on a Text link.

`image`, `compare-at-price` and `collection` are removed when the product has none. A result that cannot be bought gets the class `is-not-available`. Every value is in [predictive search attributes](https://www.smootify.io/docs/reference/attributes/predictive-search).

**A product card.** Instead of `search-result`, put a `smootify-product` with `data-id="search"` inside `search-with-query`, and design it as a [product card](https://www.smootify.io/docs/build/product-cards). The first card is the template.

```html
<search-with-query>
  <smootify-product data-id="search">
    <a product="url" href="#">Product name</a>
    <smootify-price><div data-prop="price">$0.00</div></smootify-price>
  </smootify-product>
</search-with-query>
```

## 5. Suggestions, the typed words and the search page

```html
<search-no-query>
  <div>Popular searches</div>
  <a href="#" search="suggested-query">Sneakers</a>
</search-no-query>
<search-with-query>
  <div>Results for <span search="query">shoes</span></div>
  <search-suggestions><a href="#" search="suggested-query">Suggestion</a></search-suggestions>
  <a href="#" search="search-page">See all results</a>
</search-with-query>
```

- **Shopify’s suggestions.** Inside `search-suggestions`, a Text link with `search="suggested-query"` is the template of one suggestion. A click searches it. Put `search-suggestions` inside `search-with-query`: suggestions only exist once the visitor has typed.
- **Your own suggestions.** In `search-no-query`, Text links with `search="suggested-query"` are fixed suggestions, such as popular searches. A click searches their text. Keep them outside `search-suggestions`.
- **The typed words.** `search="query"` on text shows what the visitor typed, for example in “Results for shoes”.
- **The search page.** A link with `search="search-page"`, set in Webflow to your search page, gets the typed words added to its address, so the search page opens with the same search. A Webflow Button works here too, since it is a link.

## While it loads

While a search runs, `smootify-search` has the class `is-loading`. Nothing shimmers by default: style that class, or add `skeleton` to the elements in the result template. Smootify also sets `has-query`, `has-products`, `is-empty` and `has-suggestions` on `smootify-search`. See [state classes](https://www.smootify.io/docs/reference/state-classes).

## Before you publish

> [!STUCK]
> - **Nothing happens when typing.** `smootify-search` has two text fields, and neither has the **Name** `query`.
> - **Never more than 10 results.** That is Shopify's limit for predictive search. Add a link with `search="search-page"` to show all results.
> - **Prices are empty in the results.** A `smootify-price` inside `search-result` has no product to read. Use `search="price"`, or product cards.
> - **Attributes on the second result do nothing.** Only the first `search-result` is the template.
> - **Suggestions never show.** `search-suggestions` is inside `search-no-query`, which hides as soon as the visitor types. Move it into `search-with-query`.
> - **It works on `.webflow.io` but not on the live domain.** The Predictive Search add-on is not turned on for the site.

## Coming from 1.x

- The results no longer shimmer while loading, and Smootify no longer adds a hidden placeholder result: style `is-loading` or add `skeleton`.
- Inside `search-result`, use `search="price"` and `search="compare-at-price"` instead of `smootify-price`.
- `limit` above 10 is capped at 10.