Searchbar

Step 1: Open the CMS Filter App and Navigate to the Settings Tab

Launch the CMS Filter app from the Apps panel. Then, click on the Settings tab located in the top navigation bar. Refer to the screenshot below for visual reference.

Step 2: Copy the Template and Paste it into the Webflow Designer

Within the CMS Filter app, locate and copy the template provided. Next, return to your Webflow Designer and paste the template into your desired page or section. See the screenshot below for guidance.

Step 3: Configure Filter Options

Go to the Filter tab in the CMS Filter app. Uncheck the following options:

• Filter Buttons (Top)

• Checkboxes (Sidebar)

This ensures that only Search remains selected.

If you do not want to customize pagination settings, you can simply click the Update Filter button at the bottom to apply the changes. Refer to the screenshot below for visual guidance.

Step 4: Customize Display Settings

To customize the layout of your filtered items:

• Modify the Items Per Row value to control how many items appear in each row.

• Adjust the Maximum Items value to set how many items will be displayed in total.

Once you've made your changes, click the Update Filter button at the bottom to apply them. Refer to the screenshot below for guidance.

Step 5: Connect Your CMS Collection

After updating the filter settings, you can now close the CMS Filter app.

Next, in the Webflow Designer:

• Select the item container (as shown in the screenshot below).

• Connect it to your CMS Collection.

• Bind the necessary fields (e.g., image, title, description) to the appropriate elements within the container.

Use the screenshot below for step-by-step visual guidance.

Step 7: Set Up Reference or Multi-Reference Fields for Filterin

To enable filtering functionality, you need to define the field by which items will be filtered:

1. In the Webflow Designer, select any CMS item from your collection list.

2. In the right-hand panel, locate the Reference or Multi-Reference field section.

• For a Single Reference Field: Bind a Text element (found under the “reference” element in the Designer) directly to the referenced field.

• For a Multi-Reference Field:

  • Add a nested CMS Collection connected to the multi-reference field (identified as “references” in the Designer).

  • Inside this nested collection, bind a Text or other element to the specific field you want to use for filtering.

Refer to the screenshots below for visual examples of both reference types.