Algolia ×
Webflow Filters

Go to github.com/felixeallan/algolia-webflow-filter and click "Use this template" → "Create a new repository". Name it (e.g. my-site-algolia) and make it public (required so jsDelivr can serve the script). Done — you have your own copy.

Sign up at algolia.com and create an application. Decide a name for your index (e.g. products, blog-posts, cars) — Algolia will create it automatically when the first sync runs, you do not need to create it manually.

Go to Settings → API Keys and copy these three values: - Application ID → ALGOLIA_APP_ID - Search API Key → used later in the script tag (safe to expose) - Write API Key → ALGOLIA_ADMIN_API_KEY (keep secret, only used server-side)

API token

Webflow → Site Settings → Apps & Integrations → API Access → Generate API Token. Permissions: CMS: Read (read-only is enough — the sync never writes back). Copy the token → WEBFLOW_API_TOKEN.

Collection ID

In Webflow → CMS → click your collection → Settings → copy the Collection ID → WEBFLOW_COLLECTION_ID.

In your Webflow site → Site Settings → Webflow Cloud. Click "Install GitHub app" if needed, then "New app".

Configure: - Name: anything (e.g. algolia-sync) - Repository: your project repo from Step 1 - Directory path: apps/sync - GitHub branch: main - Path: /api (this becomes the URL prefix, e.g. yoursite.com/api/sync)

Once the environment is created, go to Environment Variables and add all 6 below. Click "Deploy latest commit". Wait for the deployment to go live.

The endpoint health check should return {"ok":true}:

curl https://YOUR_SITE.webflow.io/api/sync

Trigger the first sync by hitting the endpoint with your secret. Check the Algolia dashboard → your index → Browse — all your CMS items should be there.

curl -X POST https://YOUR_SITE.webflow.io/api/sync \
  -H "Authorization: Bearer YOUR_SYNC_SECRET"

{ "success": true, "synced": 1234 }

The sync app handles the initial bulk sync. The webhook worker keeps Algolia in sync as users publish/edit/delete individual CMS items. Webflow does not allow webhooks pointing to *.webflow.io domains, so we need an external worker.

1. Go to dash.cloudflare.com → Workers & Pages → Create → Create Worker → Hello World
2. Name it (e.g. algolia-webflow-webhook) → Deploy
3. Click "Edit code", delete everything, and paste the contents of apps/webhook-worker/src/index.js → Deploy
4. Go to Settings → Variables and Secrets and add the variables below
5. Note your worker URL — looks like https://algolia-webflow-webhook.YOUR-USERNAME.workers.dev

Webflow → Site Settings → Apps & Integrations → Webhooks → Add Webhook for each event below. The URL is the worker URL from Step 6. You do not need a webhook secret — leave that field blank.

In Algolia → your index → Configuration:

Facets — fields you want to filter by: - Add every attribute that will be used as a filter (e.g. category, brand, color, year) - Reference fields show up as the referenced item's name automatically (e.g. car-brand: "Quasar")

Searchable Attributes — fields used by the search input: - Set to Ordered mode - Top of the list = higher relevance - Add fields like name, title, description

Click "Review and Save settings".

Sorting in Algolia works through replica indexes — pre-sorted copies of the main index. Each user-facing sort option = one replica. Algolia keeps replicas in sync automatically.

9.1 — Create one replica per sort option

In Algolia → your main index → Configuration → Replicas → Create Replica. Choose Virtual replica (free, no extra storage). Name it using the format INDEX_FIELD_DIRECTION:

9.2 — Configure each replica's Sort-by rule

For each replica, click its name to open it → Configuration → Relevant sort → add exactly one Sort-by rule matching the replica's name → click Review and Save settings.

**Important:** Each replica must have **exactly one** Sort-by rule. Multiple rules turn additional ones into tiebreakers. One replica = one dropdown option.

9.3 — Add the sort dropdown to your page

Use a native <select> element (not Webflow's navigation "Dropdown" component — that's a div-based menu and won't fire change events).

9.4 — Caveat: sorting numbers stored as strings

For sorting to behave numerically, the field must be a number in Algolia. Use a Webflow Number field (not a Plain text field formatted to look like a number) for any field you plan to sort numerically.

<select data-algolia-sort>
  <option value="">Default (relevance)</option>
  <option value="cars_name_asc">Name: A → Z</option>
  <option value="cars_name_desc">Name: Z → A</option>
  <option value="cars_price_asc">Price: Low → High</option>
  <option value="cars_price_desc">Price: High → Low</option>
  <option value="cars_year_desc">Year: Newest first</option>
  <option value="cars_year_asc">Year: Oldest first</option>
</select>

In Webflow → Site Settings → Custom Code → Footer, add the script tag below.

Always pin to a version tag (e.g. @v0.8.2). Do not use @main — jsDelivr aggressively caches branch URLs.

<script src="https://cdn.jsdelivr.net/gh/felixeallan/algolia-webflow-filter@v0.8.2/packages/library/dist/algolia-webflow.min.js"></script>

Add the wrapper div with your Algolia credentials, then place filter inputs, result list, and pagination inside it. See the HTML Structure and Data Attribute Reference sections below for the complete reference.

<div data-algolia data-algolia-app-id="YOUR_APP_ID" data-algolia-api-key="YOUR_SEARCH_ONLY_KEY" data-algolia-index="cars" data-algolia-hits-per-page="12" data-algolia-url-state
>

  <!-- Search input -->
  <input data-algolia-search type="text" placeholder="Search...">

  <!-- Filters: checkbox = multi-select (OR within group, AND between groups) -->
  <label data-algolia-filter="car-brand" data-algolia-value="Quasar">
    <input type="checkbox"><span>Quasar</span>
  </label>

  <!-- Filters: radio = single-select within the group -->
  <label data-algolia-filter="color-theme" data-algolia-value="White">
    <input type="radio" name="color"><span>White</span>
  </label>

  <!-- Dropdown filter -->
  <select data-algolia-filter-select="year">
    <option value="">All years</option>
    <option value="2024">2024</option>
    <option value="2023">2023</option>
  </select>

  <!-- Sort dropdown (uses Algolia index replicas) -->
  <select data-algolia-sort>
    <option value="">Relevance</option>
    <option value="cars_price_asc">Price ↑</option>
    <option value="cars_price_desc">Price ↓</option>
  </select>

  <!-- Clear buttons -->
  <button data-algolia-clear>Clear all</button>
  <button data-algolia-clear="car-brand">Clear brands</button>

  <!-- Active filter tags -->
  <div data-algolia-tags>
    <div data-algolia-tag-template class="tag">
      <span data-algolia-tag-label></span>
      <span data-algolia-tag-remove>×</span>
    </div>
  </div>

  <!-- Result list with template -->
  <div data-algolia-list>
    <div data-algolia-template class="card">
      <img data-algolia-bind="image.url" data-algolia-attr="src">
      <h3 data-algolia-bind="name"></h3>
      <p data-algolia-bind="car-brand"></p>
      <img data-algolia-bind="car-brand__logo.url" data-algolia-attr="src">
      <p data-algolia-bind="price"></p>
      <p data-algolia-bind="year"></p>

      <!-- Repeat for array/multi-reference fields -->
      <div data-algolia-hide-empty="authors" data-algolia-repeat="authors">
        <span data-algolia-repeat-item class="author-tag"></span>
      </div>

      <a data-algolia-bind="slug" data-algolia-attr="href">View</a>
    </div>
  </div>

  <!-- Stats -->
  <p><span data-algolia-count></span> results</p>

  <!-- Empty state -->
  <div data-algolia-empty style="display:none">No results found.</div>

  <!-- Pagination -->
  <button data-algolia-prev>← Previous</button>
  <span data-algolia-page-info></span>
  <button data-algolia-next>Next →</button>

</div>