Sorting
What you're building: a control that reorders a browse listing — price low to high, newest first, most popular.
Algolia does not sort a result set on demand. Each order is a separate replica index, configured in advance. Sorting switches which one the listing queries.
What you need
- Applies toA Select inside the browse wrapper
The sort control.
- Applies toThe sort control
The primary index the replicas belong to.
In Algolia first
Create one replica per order under Configuration → Replicas, and set the ranking on the replica itself. A typical shop has:
products— relevance, the primaryproducts_price_ascproducts_price_descproducts_newest
Then in Webflow
Add a Select inside the browse wrapper with , and set each option's value to a replica name:
<select wf-algolia-element="sort" wf-algolia-index="products">
<option value="products">Relevance</option>
<option value="products_price_asc">Price: low to high</option>
<option value="products_price_desc">Price: high to low</option>
</select>
The visible label is yours; only the value has to match Algolia.
Selecting an option whose value is not a real index asks Algolia for something that does not exist. The listing empties. If one sort option breaks the page, compare its value character by character against Dashboard → Replicas.
A custom control instead of a select
Use on a wrapper and mark each button with its replica name to build a segmented control or a list of links. Add to display the current choice.
The active option carries the class from data-activeclass.
Sorting and filters together
Switching sort keeps the current filters. Sort changes the ranking, not the result set.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| One option empties the listing | The replica name is wrong | Check Dashboard → Replicas |
| Every option returns the same order | The replicas exist but have no ranking set | Configure the ranking on the replica, not the primary |
| The control does nothing | It sits outside the browse wrapper | Move it inside |
| The label never updates | No sort-selected-label element | Add one |