Cloneables
A cloneable is a Webflow project you can copy into your own account with the attributes already in place. Open one, publish it, point it at your own Algolia index, and it works.
The Algolia Search cloneable
Algolia Search Cloneable for Algolia Search and Sync App →
Our own project, built for this app. Clone it into your account from the Made in Webflow page, then follow Before you clone below.
It is useful in two different ways. Clone it whole and restyle it if you are starting from nothing — or clone it alongside your real project and copy the configured elements across, which is often faster than placing them by hand.
What it demonstrates
Every feature below is already wired up, so each one doubles as a worked example of the page that documents it.
| In the project | How it is built |
|---|---|
| Federated search | Search — one box, several indices |
| Filters | Filters |
| Sorting | Sorting — replicas for each order |
| Load-more controls | Pagination |
| CMS field population | Browse — binding records to your own design |
| Related-content suggestions | Detail and recommendations |
Reading the attributes on a working element is usually quicker than reading about them. If something on the page puzzles you, open it in the Designer and check its settings against the matching solution page.
Before you clone
A cloneable carries the markup and attributes, never credentials. After copying one you still need to:
- Install the script from the app, with your App ID and Search-Only key set — Install the script
- Change
data-indexto your index - Update the field names in the result template to match your records
Step 3 is the one people miss. The cloneable's template binds the demo's field names, and a mismatch renders blank cards rather than an error — see Search.
The recommendations section needs one thing more: Recommend models are trained from traffic, so a brand-new index returns nothing until it has some. That is expected, not a broken install.
Building without one
Build Mode places the same structures directly into an existing project, which is usually better than cloning when you already have a design. Cloneables are for starting from nothing or for reading a finished example.