# Checkboxes (Top) **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: * **Search** * **Checkboxes (Sidebar)** This ensures that only **Filter Buttons (Top)** remain 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 6: Connect CMS Collection to Filter Buttons** Select the **top navigation buttons** used for filtering and connect them to your **CMS Collection**. Make sure to **bind the appropriate fields** (such as category names or tags) so that the filter buttons dynamically reflect your CMS content. Refer to the screenshots below for detailed reference.

**Step 7: Set Up Reference or Multi-Reference Fields for Filtering** 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.

Location of Single Reference and Multi-Reference

Setting up single reference text for filtering

Successfully bound the CMS field with text element

For multi-reference connect CMS collection

Successfully bound Tags collection Name field with the text field

**Step 8: Match Custom Attributes for Filtering** To ensure the filter functionality works correctly, the **custom attribute** of each **top filter button** must match the **custom attribute** of the referenced text in your items. This setup allows the filter buttons to correctly identify and display items based on the selected reference value. Make sure the attribute names and values are consistent between the filter buttons and the item references. Refer to the screenshot below for detailed guidance.

Click on one of the items to find the reference text element

--- # 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/checkboxes-top.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.