Sort and filter

1. Pick a Collection List

Use a Collection List you already have. Your design stays yours: Slater works with the list as you built it.

<div data-slater-list="products"> <!-- your Collection List --> </div>

2. Add filter and sort controls

Buttons, dropdowns and search boxes can all filter by a CMS field. Point each control at the field it filters.

<button data-slater-filter="roast" data-value="medium">Medium</button>
<select data-slater-sort>
  <option value="price">Price</option>
  <option value="-date">Newest</option>
</select>

3. Publish

Publish your site and try the controls. Sorting and filtering happen on the page, with no reload.

Limits

[How many items a list can hold, and how pagination is handled] To confirm