# smootify-search

> Predictive search: products and query suggestions as the customer types, in a Webflow Dropdown or a popover. The search field is input[name="query"]; without one, the only text field (2.0), whatever its Webflow Name, is named query. A results popover (2.0) opens as the customer types, and also on a focus or click of the field, empty or not, so search-no-query shows its suggestions.

Status: Ready (Smootify 2.0)  
Add-on: Predictive Search  
URL: https://www.smootify.io/docs/reference/elements/smootify-search  
Updated: 2026-10-13

## At a glance

| 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 |

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

More in [the guide](https://www.smootify.io/docs/build/predictive-search).

## Where it can go

- **Anywhere** on the page.
- **Must contain one of** `input[name="query"]`, `input[type="text"]`, `input[type="search"]`, `input:not([type])`.
- **Out of place,** it stays in the page and does nothing: without a text field, or with two and none named query.

## What it requires

- The **Predictive Search** extension (lite or server plan, or the extension activated in the Smootify dashboard). Without it, the element does nothing.

## Fields in the form

Each field’s **Name** setting in Webflow tells Smootify what the field holds. It is a setting of the field, not a custom attribute.

| Name | Field | What it does |
|---|---|---|
| `query` | Text field input | The search text. |

## Attributes on the element

- **It reads** `limit`.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Predictive search](https://www.smootify.io/docs/reference/attributes/predictive-search) | `search` | 12 |

## Loading

Its code loads only on pages that have `smootify-search`.