Step #1 Copy/Paste tool URL

Copy the Code Highlight <script> and paste into the <head> of your page.


document.getElementById("demo").innerHTML = "My First JavaScript";


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)

Working example

Step #2 Set custom attributes

Give Feedback or Request Tool

We are on a mission to provide our experience and tools we use to all of you, be sure to sign for future releases and be the first, who can use the magic.

Thank You for showing interest in working with us!

Our executive will contact you within 24 hours.
Oops! Something went wrong while submitting the form.

Want to discuss a project?

Let's talk

Want to help us build great sites?

Join the team