Step #2 Set custom attributes

Everything is made using custom attributes, so when we say “add” means “Add a custom attribute”.

To start, add r-slider="1" on the parent elements of the slides.

Connect Filters

Now that you’ve connected your collection, and pointed out the searchable terms, you need to connect your filters with those identifiers.

1. Identify Filter Wrapper. Add r-filter="identifier" to the parent element (wrapper) of the Filter UI (where your input, checkbox, select, etc. are)  using the same identifier term as you did in your collection.

‍

Custom Value Filters

In the case you want to specify a different term/value from the one in the Filter UI, you can do this by adding data-filter="value" on that element. For example, if you want to filter by “Spanish” but your checkbox says “Español”, you need to add data-filter="Spanish" to your filter checkbox (note that in the case of checkboxes, this needs to be added to the checkbox element, and not the checkbox field)

‍