filter-price
Price range facet with two number inputs, two range handles and a progress bar. The handles move by whole units: with a bound in cents (Shopify's {"price":{"min":0,"max":179.99}}) they run from 0 to 180, a handle at its end means the facet's own bound (the search keeps the 179.99 products when only the other handle moves) and the number inputs and labels show 179.99; a typed number never narrows the range (1.x: the max handle stopped at 179). The host's hide-empty and hide-if-single leave it shown: Shopify gives the price range as one value with count 0 (2.0; 1.x hid it with either).
At a glance
Checkboxes
- Built with
- A Form Block with one Checkbox.
- Label
label="Color"- Picks
- Several values.
Radio buttons
- Built with
- A Form Block with one Radio button.
- Label
label="Size"- Picks
- One value.
The browser's own select
- Built with
- A Form Block with a Select field.
- Label
label="Material"- Picks
- One value.
A Webflow Dropdown
- Built with
- A Form Block and a Webflow Dropdown.
- Label
label="Material"- Picks
- One value.
A panel over the page
- Built with
- A Form Block and a popover with links or buttons.
- Label
label="Material"- Picks
- One value.
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".
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.
A search field
- Built with
- A Form Block with a Text field.
- Label
- None: it reads no label.
- Picks
- Words to search.
More in the guide.
Where it can go
- Inside
smootify-search-discovery. - Must contain
form,form input[type="number"],form input[type="range"],[filter-price="progress"]. - Out of place, Smootify removes it from the page: exactly two number and two range inputs required.
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.
Fields in the form
It reads no field of yours: reads no name: the inputs by type and order.
Attributes on the element
- It reads
custom-label,selected-value,allow-reset,show-count,hide-parenthesis.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Price filter | filter-price | 3 |
Loading
Its code loads only on pages that have filter-price.