Set up your Algolia index
WF-Algolia queries an Algolia index. It does not create or populate one — that part happens in Algolia, and a few of its settings decide which features can work at all.
1. Create an account and an index
Sign up at algolia.com, then create an index from
Search → Index. The name you choose is what goes in
data-index on your script tag.
2. Get content into it
Three routes:
- The WF-Algolia sync, which pushes your Webflow CMS collections into Algolia and keeps them current as items change.
- The Algolia Crawler, which visits your published pages and indexes what it finds there — for content that is not in the CMS.
- Manual upload, from the Algolia dashboard, for content that does not live in the Webflow CMS.
However the data arrives, one Algolia record should equal one thing a visitor can find — one product, one article, one person.
Every wf-algolia-text="title" in your Designer refers to a field name on the
record. They are case-sensitive, and a mismatch fails silently on that binding
alone. Open one record in the dashboard and copy the names exactly.
3. Choose searchable attributes
Configuration → Searchable attributes decides which fields the query text is matched against. Order matters — Algolia treats earlier attributes as more important.
A field that is not listed here is still returned on the record and can still be rendered; it just will not be matched against what the visitor typed.
4. Declare your facets
Configuration → Filtering and Faceting → Facets lists the fields you can filter by. A filter group pointed at a field that is not declared here will render and then never narrow anything.
Each facet is declared in one of two modes, and the choice is not cosmetic:
| Mode | Use it when | What it becomes |
|---|---|---|
| Filter only | Ordinary checkboxes, radios, ranges — nobody types to find a value | the plain attribute |
| Searchable | The group has a typeahead over its own values, e.g. 1,200 companies | searchable(attribute) |
Searching within a facet's values uses a different Algolia API, and that API only answers for attributes declared searchable. This is the single most common reason a filter search box does nothing at all.
index.setSettings({
attributesForFaceting: ['category', 'searchable(brand)'],
});
Range and comparison filters compare numerically. A price stored as "49.99"
rather than 49.99 will never match a range, no matter how the filter is
configured. Fix it at index time, not in Webflow.
5. Create replicas for sorting
Algolia sorts by creating a replica — a copy of the index with a different ranking. One replica per sort order: price ascending, price descending, newest first.
Configuration → Replicas, then set the sort on the replica itself.
Your sort control's option values must match the replica names exactly. A typo produces zero results rather than an error, because Algolia is being asked for an index that does not exist.
6. Collect your keys
Settings → API Keys gives you three things. You need two:
- Application ID →
data-app-id - Search-Only API key →
data-search-key
It can delete indices. Anything in a script tag is readable by every visitor, so the Admin key must never appear in Webflow custom code.
Optional extras
Recommend
Algolia's recommendation models must be trained before they return anything, and training needs traffic. A correctly configured recommendation section on a brand-new index renders nothing — that is the model, not your markup.
Insights
Click and conversion tracking is off unless you add data-insights="true". It
powers Algolia's analytics and personalization, and it is what makes Recommend
models improve over time.
Crawler
Static pages, landing pages and PDFs are not CMS items, so no collection mapping reaches them. Algolia's Crawler indexes them by visiting your published site — see Algolia Crawler.
More than one index
Sites often search several content types. Point individual elements at their own
index with wf-algolia-index, or search several at once with a federated
dropdown — see Federated search.