Shop with filters

Make it yourself

1. Drag in a List of products. In its Design tab, under How many, choose All, a page at a time, with 8 per page.
2. Draw a box above it and choose ⋯ › Turn into › Search box. Under Narrows down, pick the product list. Do the same for a Sort menu.
3. Make a chip for the filters: a small text in a rounded box, with Shows set to Name. Make it a component, and give it a Chosen look under Style.
4. Drag in another list beside the search box. Set its Records to Collections, Each item uses to your chip, and its layout to Row.
5. In that list's Behaviour tab, set When one is clicked to Narrow the product list to what belongs to it. Clicking a chosen chip again shows everything.
6. Add an All button with When clicked set to Show all, so shoppers can clear the search and the filters in one go.
7. Under the products, add a Show more button: When clicked › Show more. It hides itself when there's nothing left.

Made with

• Search and sortLet shoppers narrow and reorder a list as they type and click.
• ListsA box that repeats a component for every product, collection or photo.
• ComponentsMake something once, use it everywhere, change it in one place.