Help Centre

How can we help?

Search Docs

How to Set Up CMS Filtering with Superfields

How to Set Up CMS Filtering with Superfields

How to Set Up CMS Filtering with Superfields

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.

SUPERCHARGE YOUR FRAMER CMS

Finally! Power up your site's CMS with pagination, favouriting, dynamic filtering, and social sharing components in Framer!

SUPERCHARGE YOUR FRAMER CMS

Finally! Power up your site's CMS with pagination, favouriting, dynamic filtering, and social sharing components in Framer!

SUPERCHARGE YOUR FRAMER CMS

Finally! Power up your site's CMS with pagination, favouriting, dynamic filtering, and social sharing components in Framer!

Building the Framerverse 🚀 - an ecosystem of products & education for Framer.

© 2024 Insert Frame Pty LTD

Home

Live Chat

What's New

Help

Available Mon - Fri

9AM - 5PM AEDT

Hey builder!

How can we help?