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.
At a glance
A Webflow Dropdown
- Put the results
- Inside the Dropdown list.
- Opens
- As the visitor types.
- The field
- Inside the Dropdown or next to it.
A popover
- Put the results
- Inside a popover.
- Opens
- When the visitor clicks the field, so the suggestions for an empty field show, and as they type.
- Closes
- With a
buttonthat hasdata-action="close", anywhere insmootify-search, such as next to the field. See Popovers.
In place
- Put the results
- Anywhere in
smootify-search, with no Dropdown or popover. - Shows
- Each part shows and hides itself where it is, such as in a full-screen menu.
Shown while the field has words in it.
The results, the empty message, Shopify's suggestions.
Shown while Shopify has search suggestions for the words.
Shopify's suggestions. Put it inside search-with-query.
More in the guide.
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 | search | 12 |
Loading
Its code loads only on pages that have smootify-search.