# 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.flowappz.com/home/cms-filter/filters/searchbar.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.