Help Centre
How can we help?
Search Docs
Superfields allows you to use dynamic filtering with multi-reference fields in your Framer CMS, helping you create easy-to-navigate content. Here's how you can set it up step-by-step.
Step 1: Set Up Your Collection List
First, make sure that your collection list is properly set up and connected to the Superfields component in your Framer project.
Step 2: Add the Filter Component
Open the Superfields plugin in Framer.
Paste the filter component into your project.
Step 3: Set Up the Filter Component
In the filter component settings, click on Setup.
You will have the option to filter by:
CMS field
Favorites
Since we’re working with multi-reference fields, select CMS field.
Step 4: Specify the Field Name
This is where it’s important to get things right.
Go to your CMS and find the collection you want to use for the filter. In this example, you have articles and categories set up.
Inside the articles collection, there’s a field called tags, which is set up as a multi-reference field linked to the categories collection.
Back in Framer, go to the filter setup and enter tags as the Field Name (it must match exactly with the field name in your CMS).
Step 5: Set the Field Type to Multi-Reference
In the filter settings, set the Field Type to multi-reference.
Next, you'll need to define the Reference Type. In this case, the reference is pulling from the title of the tags in the categories collection.
Step 6: Connect Your Collection List
Connect your collection list to articles (the collection that contains the tags field).
Step 7: Preview the Filter
After setting everything up, preview your project. You should now see that your filter works and is filtering content based on the tags (which are linked to the categories).
Step 8: Troubleshooting
If the filter isn't working as expected, make sure that within your CMS collection list, you also have the categories collection (or whatever your multi-reference collection is) connected.
Step 9: Customize the Styling
Just like any other component in Superfields, you can customize the styling of your filter to match the look and feel of your site.
Conclusion
Congratulations! You've successfully set up the Dynamic Filtering component with a multi-reference field in your Framer project.
