# Search results page

> A page that lists every product matching a search, from the words in its address or typed in its field, with a count, pagination and an empty state. Covers smootify-search-page and how visitors reach it.

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

The search results page lists every product that matches a search, page by page. The words come from the page address (`?q=` followed by the words) or from a field on the page. Unlike [predictive search](https://www.smootify.io/docs/build/predictive-search), it has no limit of 10 results.

> [!NOTE]
> Turn on the **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.

## How it fits together

What Smootify needs:

- a `smootify-search-page` element;
- inside it, one product card: a `smootify-product` element. Smootify repeats it once per result. Without a card, the block is removed.

What is up to you:

- the page layout and the card design;
- the optional parts: a search field, the count, the searched words, the empty state, the pagination.

```html
<smootify-search-page limit="24">
  <div class="w-form"><form><input name="q"></form></div>
  <div><span search="count">0</span> results for <span search="query">shoes</span></div>
  <div>
    <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>
  </div>
  <div search="empty-state">No products match your search.</div>
  <button data-action="load">Load more</button>
</smootify-search-page>
```

## 1. Create the page

1. Create a static page, such as `/search-page`. Webflow keeps `/search` for its own site search, so pick another slug.
2. Add a Custom element with the tag [`smootify-search-page`](https://www.smootify.io/docs/reference/elements/smootify-search-page). It can wrap the whole page or only the results section.

Visitors reach the page in three ways:

- from predictive search, with a link that has `search="search-page"`: see [Predictive search](https://www.smootify.io/docs/build/predictive-search);
- from any link to the page with `?q=` and the words, such as `/search-page?q=linen+shirt`;
- by typing in the page’s own field.

The address follows the search, so a results page can be shared.

## 2. The search field

Add a Form Block inside `smootify-search-page`, with a Text field of Type **Plain** or a Search field (`type="search"`, as Webflow’s Search element writes it). Its Name does not matter: Smootify renames it and fills it with the words from the address. Typing searches after a short pause, and Enter searches at once.

The field is optional: without it, the page shows the results for the words in the address.

The page can have more than one field, such as a form at the top and another above the results: each one searches the words typed in it. A field inside a result card does not start a search.

## 3. The results

Add a `smootify-product` with `data-id="search"` and design it as a [product card](https://www.smootify.io/docs/build/product-cards). The first `smootify-product` is the template: each result gets a copy of it, so give each element of the card a Smootify attribute, such as `product="title"`.

You can use a Collection list as the grid, with placeholder cards (`data-id="loader"`) in its items. Its first Collection item becomes the template, and the other cards keep their place until the first results replace them, so the page does not jump while it loads. See [placeholder cards](https://www.smootify.io/docs/build/product-cards).

Attributes on `smootify-search-page`:

- `limit`: products per page, 50 by default, 250 at most;
- `animation`, `duration`, `easing` and `stagger`, and `disable-scroll`, as on search & discovery: see [Filters, sorting and pagination](https://www.smootify.io/docs/build/filters).

**Products that cannot be bought.** `unavailable-products` on `smootify-search-page` says where they go. Here results 3 and 5 are sold out:

| `unavailable-products` | Products that cannot be bought |
|---|---|
| `LAST` (default) | come after the others |
| `HIDE` | are left out |
| `SHOW` | keep their place in the results |

The search covers products only.

## 4. Count, words, empty state and reset

Before a search and after it, the page shows different parts: an element with `search="no-query"` shows only while there is no query, such as “What are you looking for?” with a few suggested searches; one with `search="with-query"` shows only once there is one, such as the “Results for … · 12 pieces” line; `search="empty-state"` shows only when a search finds nothing. `smootify-search-page` also gets the class `has-query` while there is a query and `is-empty` when it finds nothing. All optional, anywhere inside `smootify-search-page`: `search="count"` and `search="query"` on text, `search="empty-state"` on a Div block. What they show for three searches:

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

A reset button, a Custom element with the tag `button` and `type="reset"`, clears the search.

Every attribute is in [search page attributes](https://www.smootify.io/docs/reference/attributes/search-page).

## 5. Pagination

The pagination buttons work as on search & discovery. Each is a Custom element with the tag `button` and one of these `data-action` values:

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

A button is hidden when there is no such page. Use `previous` and `next`, or one of the load buttons. Buttons inside a result card, such as the previous and next of a booking calendar, are not pagination buttons.

Page numbers work as on search & discovery too: one `button` with `data-action="page"` as the template of the numbers, `filter="page-ellipsis"` for the gaps, `filter="page-current"` and `filter="page-total"` for “Page 3 of 12”, and `page-range` on `smootify-search-page`. See [Page numbers](https://www.smootify.io/docs/build/filters#page-numbers). The address always follows the page, such as `?page=3`. A search counts at most 1,000 results, a Shopify limit.

## A search page with filters

`smootify-search-page` has no filters. For search results with filters and sorting, use [search & discovery](https://www.smootify.io/docs/build/filters) on the page instead, with a `filter-search` field. It reads the same `?q=` from the address, so the links from predictive search keep working. It needs the Search & discovery add-on, and without words it lists the whole catalog.

## Before you publish

> [!STUCK]
> - **The block disappears.** It has no `smootify-product` card inside.
> - **The page opens empty.** The address has no `?q=`. A form that sends its words under another name, such as Webflow's own Search element, is not read.
> - **Typing in the field does nothing.** Only a Text field of Type **Plain** or a Search field is read; an Email or Number field is not.
> - **Every card shows the same name.** Those elements are bound to CMS fields only. Add `product="title"` and the other attributes.
> - **Sold-out products are always at the end.** That is the default. Set `unavailable-products="SHOW"` to keep them in their place.

## Coming from 1.x

- The page no longer adds placeholder cards before the first search: the cards of your Collection list keep their place until the results replace them.
- Nothing shimmers by default: add `skeleton` where you want it.