Help Centre
How can we help?
Search Docs
With dynamic filtering, you can create interactive filters for your Framer project, allowing users to easily sort content based on specific criteria.
Step 1: Set Up Your Collection List
Ensure your collection list is connected to the Superfields component in your Framer CMS.
Step 2: Add the Filter Component
Go to the Superfields plugin in Framer.
Copy the filter component and paste it where needed in your project.
Step 3: Configure the Filter Component
Once the filter component is added, click on the Setup button to start configuring it.
Choose what you want to filter by:
Filter by CMS field: This will filter based on a specific field from your CMS collection (such as categories, tags, or other properties).
Filter by favorites: If you’ve used the favoriting component, this allows you to filter by items marked as favorites.
For this example, we'll filter by CMS field.
Step 4: Specify the Field to Filter By
In the setup panel, you'll need to enter the name of the field you want to filter. This should be the exact field name from your CMS.
For example, if you're filtering by color, select the field where the color is stored (e.g., a dropdown with options like red, green, blue, or yellow).
Make sure the field name in your CMS matches exactly with the one you enter in the filter component. This is also capital sensitive!
Step 5: Choose the Correct Field Type
Set the Field Type to match the type of field you're filtering. For instance, if you're filtering by a dropdown selection, the Option field type would be appropriate.
Step 6: Link the Collection to the Filter
Make sure the filter component is linked to the correct CMS collection you want to apply the filter to.
Step 7: Preview the Filter
Once you’ve set it up, preview your project, and you’ll see the dynamic filter in action. Now you can filter content based on the selected field, such as showing only items that match the chosen options.
Step 8: Customize the Styling
You can easily customize the filter’s appearance by clicking on the Styling option. Adjust the layout, colors, fonts, and other design elements to match your website’s style.
Conclusion
You’ve now successfully added and set up the Dynamic Filtering component in your Framer CMS using Superfields. This feature lets users sort content based on your chosen fields, making it easy to find exactly what they’re looking for.
Happy building!
