smootify-search-discovery
Faceted product list: runs the search, renders the cards, active chips, count and pagination, and hosts the filter and sort widgets.
At a glance
filter-checkbox
Checkboxes
- Built with
- A Form Block with one Checkbox.
- Label
label="Color"- Picks
- Several values.
filter-list
Radio buttons
- Built with
- A Form Block with one Radio button.
- Label
label="Size"- Picks
- One value.
filter-select
The browser's own select
- Built with
- A Form Block with a Select field.
- Label
label="Material"- Picks
- One value.
filter-dropdown
A Webflow Dropdown
- Built with
- A Form Block and a Webflow Dropdown.
- Label
label="Material"- Picks
- One value.
filter-popover
A panel over the page
- Built with
- A Form Block and a popover with links or buttons.
- Label
label="Material"- Picks
- One value.
filter-swatches
Color or image buttons
- Built with
- A Form Block and one Custom element with the tag
button. - Label
label="Color"- Picks
- One value, or several with
multiple="true".
filter-price
A price range
- Built with
- A Form Block with two number fields and two sliders.
- Label
- None: it reads no label.
- Picks
- A price range.
filter-search
A search field
- Built with
- A Form Block with a Text field.
- Label
- None: it reads no label.
- Picks
- Words to search.
Previous and next
- Shows
- One page at a time.
- Good to know
- The best choice for large catalogs.
Page numbers
- Shows
- One page at a time, with the numbers to jump to, between previous and next.
- Good to know
- On a collection, it needs the Availability filter (see Page numbers).
Load more
- Shows
- The next page, added below the products shown, on a click.
- Good to know
- Every page adds cards, which slows phones down on large catalogs.
Load as the visitor scrolls
- Shows
- The next page, added below when the button scrolls into view.
- Good to know
- Every page adds cards, which slows phones down on large catalogs.
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 & 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 | skeleton | 5 |
| Search and filters | 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.
Loading
Its code loads only on pages that have smootify-search-discovery.