# smootify-search-discovery

> Faceted product list: runs the search, renders the cards, active chips, count and pagination, and hosts the filter and sort widgets.

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

## At a glance

| Element | Built with | Label | The visitor picks |
|---|---|---|---|
| `filter-checkbox` | a Form Block with one Checkbox | `label="Color"` | several values |
| `filter-list` | a Form Block with one Radio button | `label="Size"` | one value |
| `filter-select` | a Form Block with a Select field | `label="Material"` | one value |
| `filter-dropdown` | a Form Block and a Webflow Dropdown | `label="Material"` | one value |
| `filter-popover` | a Form Block and a popover with links or buttons | `label="Material"` | one value |
| `filter-swatches` | a Form Block and one Custom element with the tag `button` | `label="Color"` | one value, or several with `multiple="true"` |
| `filter-price` | a Form Block with two number fields and two sliders | none: it reads no label | a price range |
| `filter-search` | a Form Block with a Text field | none: it reads no label | words to search |

| Way | `data-action` | Shows | Good to know |
|---|---|---|---|
| Previous and next | `previous`, `next` | one page at a time | the best choice for large catalogs |
| Page numbers | `page` | one page at a time, with the numbers to jump to, between previous and next | on a collection, it needs the Availability filter (see Page numbers) |
| Load more | `load` | the next page, added below the products shown, on a click | every page adds cards, which slows phones down on large catalogs |
| Load as the visitor scrolls | `load-in-view` | the next page, added below when the button scrolls into view | every page adds cards, which slows phones down on large catalogs |

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

## 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 & discovery** extension (lite or server plan, or the extension activated in the Smootify dashboard). Without it, the element does nothing.

## Attributes on the element

- **It reads** `data-wait`, `limit`, `auto-close-details`, `disable-scroll`, `disable-scroll-on-load-more`, `avoid-webflow-restart`, `hide-empty`, `hide-if-single`, `sync-query-params`, `page-range`, `animation`, `easing`, `duration`, `stagger`, `data-expand`, `data-collection`, `data-vendor`, `data-tag`, `unavailable-products`, `body`, `menu`.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Loading](https://www.smootify.io/docs/reference/attributes/loading) | `skeleton` | 5 |
| [Search and filters](https://www.smootify.io/docs/reference/attributes/search-discovery) | `filter` | 15 |

## State classes

Smootify toggles `inited`, `empty`, `is-filtered`, `has-pagination`, `has-page-numbers`, `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-discovery`.