smootify-search-page
Full search results page driven by the query in the url or its text inputs (2.0: type="search" too), filled with the query, with count and pagination.
At a glance
Results
search="count"12, the number of resultssearch="query"linen, the searched wordssearch="empty-state"hidden
No results
search="count"0search="query"xyzzysearch="empty-state"shown
No words
search="empty-state"shown: the page searches nothing
Previous and next
- Shows
- One page at a time.
Page numbers
- Shows
- One page at a time, with numbers to jump to. See below.
Load more
- Shows
- The next page, added below the products shown, on a click.
Load as the visitor scrolls
- Shows
- The next page, added below when the button scrolls into view.
More in the guide.
Where it can go
- Anywhere on the page.
- Must contain
smootify-product. - Out of place, Smootify removes it from the page.
What it requires
- The 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 |
|---|---|---|
every input[type="text"] (any name) | Text field | Renamed q, prefilled from ?q=; the first filled one is the query. |
Attributes on the element
- It reads
data-wait,limit,disable-scroll,disable-scroll-on-load-more,auto-close-details,avoid-webflow-restart,page-range,animation,easing,duration,stagger,unavailable-products.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Loading | skeleton | 5 |
| Search page | search | 5 |
State classes
Smootify toggles inited, is-empty, is-filtered, has-pagination, has-page-numbers, has-query, is-single-result on it: style them in Webflow for each state. See State classes.
Loading
Its code loads only on pages that have smootify-search-page.