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

1. Open the Superfields plugin.

2. Paste the filter component into your project.

Step 3: Set Up the Filter Component

1. In the filter component settings, click on Setup.

2. You will have the option to filter by:

CMS field or 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.

1. 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.

2. Inside the articles collection, there’s a field called tags, which is set up as a multi-reference field linked to the categories collection.

3. 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

1. In the filter settings, set the Field Type to multi-reference.

2. 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.

Congratulations! You've successfully set up the Dynamic Filtering component with a multi-reference field in your Framer project.

💡 Note: Your collection list that sits outside of your canvas must have the multi-referenced CMS within it to filter correctly. Drag the referenced CMS into the main collection list card, and either keep this visible or set the height = 1 to hide.