Slater Data

Sort and filter any CMS list. No custom code.

Point Slater at a Collection List you already have. Visitors filter and sort it with buttons, dropdowns or a search box, without a page reload.

Get started Read the quick start

Try it on a sample coffee shop list

harborcoffee.com/shop

Sort

8 coffees

Works with: Webflow Collection Lists
Filters by: Any CMS field
Controls: Buttons, dropdowns, search boxes and a sort menu
Access: Included with a Slater account To confirm

1
Filter by any fieldButtons, dropdowns or search boxes, driven by your existing CMS fields.
2
Sort without a reloadNewest, price, name or any field you choose. Visitors stay on the page.
3
Works with your listsPoint it at a Collection List you already have. Your design stays yours.

Set up in Slater

CollectionProducts

Filter byRoast

Sort byPrice, newest

Three lists it fixes. Without rebuilding them.

Data works with the Collection Lists you already have, so your design and your CMS stay as they are.

Shops

Let shoppers narrow the catalog

Filter products by any field, like roast or origin, and sort by price or newest, on the list you already designed.

“Light roasts, cheapest first”Three coffees, sorted by price.

Content

Make a blog or library easy to browse

Filter posts by topic or type and sort by date, so readers find the post they came for.

“Brew guides, newest first”Every guide, the latest at the top.

Directories

Turn a CMS list into a directory

Locations, team members or partners, filtered by any field the Collection already has.

“Cafés in Boston”Filtered by the city field.

How it works. Three steps.

Data runs on the same Slater script as every other tool, so if you’ve set one up, you’ve set this up.

Add the Slater script

Paste it once into Site settings. It covers every Slater tool on the site.

<!-- Site settings › Custom code › Head -->
<script src="https://slater.app/s.js"
  data-site="harbor-coffee" defer></script>

Mark the list
Use a Collection List you already have. Slater works with the list as you built it.
```
<div data-slater-list="products"> … </div>
```
Add filter and sort controls
Point each button, dropdown or search box at the CMS field it filters. A menu sorts.
```
<button data-slater-filter="roast"
  data-value="medium">Medium</button>
```

Where it connects

Webflow CMS Collection Lists
Slater Search, for search inside filtered lists

Script URL and attribute names are placeholders until the docs are written.

The details. Before you start.

What Data supports today. Anything still being confirmed is marked.

Platforms: Webflow, on any plan that allows custom code To confirm
Works with: Collection Lists on the published site
Filters: Any CMS field, from buttons, dropdowns or search boxes
Sorting: Any field, from a menu. Filtering and sorting happen on the page, with no reload
Limits: [How many items a list can hold, and how pagination is handled] To confirm
Access: [Included with a Slater account, or plan required] To confirm

Try Data on your next build. Bring the rest of the kit.