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

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

## At a glance

| Search | `search="count"` (on text) | `search="query"` (on text) | `search="empty-state"` (on a Div block) |
|---|---|---|---|
| `?q=linen`, 12 results | 12, the number of results | linen, the searched words | hidden |
| `?q=xyzzy`, no results | 0 | xyzzy | shown |
| no words in the address or the field | | | shown: the page searches nothing |

| Buttons | Shows |
|---|---|
| `data-action="previous"` and `data-action="next"` | one page at a time |
| `data-action="page"` | one page at a time, with numbers to jump to, such as 1 … 4 5 6 … 12 |
| `data-action="load"` | adds the next page below the products shown, on a click |
| `data-action="load-in-view"` | adds the next page below when the button scrolls into view |

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

## Where it can go

- **Anywhere** on the page.
- **Must contain** [`smootify-product`](https://www.smootify.io/docs/reference/elements/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](https://www.smootify.io/docs/reference/attributes/loading) | `skeleton` | 5 |
| [Search page](https://www.smootify.io/docs/reference/attributes/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](https://www.smootify.io/docs/reference/state-classes).

## Loading

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