How can we help?

Introduction: Enhance the functionality of your Framer project by adding dynamic filters to streamline content navigation.

Step 1: Adding the Filtering Component

1. Grab the filtering component from the Superfields dashboard.

2. Paste it into your project.

Step 2: Connecting the Collection List

1. Connect your collection list to the filtering component by placing it in your Framer project.

Step 3: Configuring Filter Components

1. Copy the filter component and paste it into the stack.

2. Ensure that the ID in the filter component matches the ID in the CMS filtering component.

Step 4: Configuring Field Name and Field Type

1. Modify the Field Name to correspond to a property in your CMS collection.

2. Select the Field Type based on the property type (e.g., toggle, checkbox, dropdown, button group).

Step 5: Customising Toggle and Checkbox Options

1. For toggle and checkbox types, explore options like toggle switch and checkbox.

2. Experiment with displaying all items when the switch is off or only showing items matching the switch state.

Step 6: Configuring Dropdown and Button Group Options

1. For dropdown and button group types, add options corresponding to your CMS collection's properties.

2. Ensure consistency between the options in the filter and your collection list.

Step 7: Customising Text Option

1. For text type, add plain text options corresponding to your CMS collection's properties.

2. Change the field type to text and customise the options.

Step 8: Experiment with Styling Options

1. Explore customisation options such as fonts, layouts, button styles, and more.

2. Adjust the appearance of your filters to match the visual style of your project.

Step 9: Test and Preview

1. Test the filtering functionality in the published version of your page.

2. Preview your changes to ensure the filters work as expected.

Conclusion: Congratulations! You've successfully set up filtering components in your Superfields project.