Help Centre
How can we help?
Search Docs
Introduction: Enhance the functionality of your Framer project by adding dynamic filters to streamline content navigation.
Step 1: Adding the Filtering Component
Grab the filtering component from the Superfields dashboard.
Paste it into your project.
Step 2: Connecting the Collection List
Connect your collection list to the filtering component by placing it in your Framer project.
Step 3: Configuring Filter Components
Copy the filter component and paste it into the stack.
Ensure that the ID in the filter component matches the ID in the CMS filtering component.
Step 4: Configuring Field Name and Field Type
Modify the Field Name to correspond to a property in your CMS collection.
Select the Field Type based on the property type (e.g., toggle, checkbox, dropdown, button group).
Step 5: Customising Toggle and Checkbox Options
For toggle and checkbox types, explore options like toggle switch and checkbox.
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
For dropdown and button group types, add options corresponding to your CMS collection's properties.
Ensure consistency between the options in the filter and your collection list.
Step 7: Customising Text Option
For text type, add plain text options corresponding to your CMS collection's properties.
Change the field type to text and customise the options.
Step 8: Experiment with Styling Options
Explore customisation options such as fonts, layouts, button styles, and more.
Adjust the appearance of your filters to match the visual style of your project.
Step 9: Test and Preview
Test the filtering functionality in the published version of your page.
Preview your changes to ensure the filters work as expected.
Conclusion: Congratulations! You've successfully set up filtering components in your Superfields project.
Home
Live Chat
What's New
Help
Available Mon - Fri
9AM - 5PM AEDT
Hey builder!
How can we help?
General
Find help for general questions related to our product or services.
Accounts & Billing
Get in touch with questions about your account.