CMS: Using Input Elements to Allow Visitors to Filter Content

Use input elements such as Dropdowns or Radio Buttons to provide a way for site visitors to filter the content that appears in repeaters, galleries, and tables. This article walks you through connecting input elements to a dataset that connects your CMS (Content Management System) collection to live site content.

Each input element connects to a specific collection field to show the field's unique values as filter options. When visitors select a filter option, only items with a matching field value appear in the connected repeater, gallery or table. Alternatively, you can add a conditional filter that changes the behavior of the filter. For example, you could add the "Is not" condition to create a filter that displays items that do not match the visitor's selection.

By default, when visitors select a filter, the content changes immediately. However, you can add an "apply filter" button if you want visitors' filters to be applied only after clicking a separate button. You can also add a reset button visitors can click to instantly clear all the filters they've set.

Before you begin:

• Add the CMS (Content Management System) to your site if you haven't already.

• Connect a repeater, gallery, or table to your CMS collection.

Step 1 | Add input elements set to filter content

Go to the page in your editor where you want visitors to filter the content that appears in a repeater, gallery, or table. Then add the input elements that you want visitors to use to filter the content. If you add multiple input elements, you can set each to filter a different collection field.

You can choose from the following input elements that allow filtering: Radio Buttons, Checkboxes, Dropdown, Selection Tags, or Slider (Range Sliders only). Keep in mind that each input element has limitations to the field types it can filter.

Wix Editor

1. Go to your editor.

2. Go to the page that includes the repeater, gallery, or table you want visitors to filter.

3. Click Add Elements

   

   on the left side of the editor.

4. Click Input.

5. Under Selection, click the type of input element you want visitors to use to filter content. Choose from the following elements that allow filtering: Radio Buttons, Checkboxes, Dropdown, Selection Tags, or Slider (Range Sliders only)

6. Click and drag the relevant input element onto the page.

1. (Optional) Repeat steps 3-6 above to add more input elements that your visitors will use to filter the content.

Studio Editor

1. Go to your Editor.

2. Go to the page that includes the repeater or gallery that you want visitors to filter.

3. Click Add Elements

   

   on the left side of the Editor.

4. Click Input.

5. Under Selections, click the type of input element you want visitors to use to filter content. Choose from the following elements that allow filtering: Dropdowns, Radio Buttons, Checkboxes, Multi-checkboxes, or Selection Tags

6. Click and drag the relevant input element onto the page.

1. (Optional) Repeat steps 3-6 above to add more input elements that your visitors will use to filter the content.

Step 2 | Connect your input element(s) to the CMS

Connect each input element to the same dataset that connects to your repeater, gallery, or table. Then choose which collection field each input element will filter. The input elements will display each unique value from the connected collection field. When a visitor makes a selection in the input, the repeater, gallery, or table displays only items that match the selected field.

You can also add conditional filtering that applies to the filter. For example, add the "Is not", "Does not equal", or "Does not include" conditions to create a filter that displays items that do not match the field that your visitor selects. When you add a condition to the filter, the field title and placeholder text on your input element automatically adjust to let visitors know what the filter does (e.g. "Exclude by field").

How dataset filters and sorts affect your input elements:

Your input elements connect to a dataset that retrieves content from its connected collection fields. If you add filters to the dataset to exclude items from appearing, the excluded items and their field contents are not passed to the input elements. This means your input elements will only display unique field values from items that are included by the dataset.

Sort conditions work differently: the options in input elements set to filter content always appear in alphabetical order (A-Z), no matter which sorts you add to the dataset. Vote for the ability to sort these options.

Wix Editor

1. In your editor, click the input element you just added.

2. Click the Connect to CMS icon

   

   .

3. Click Filter content.

1. Click the Choose a dataset drop-down and select the same dataset that connects to the repeater, gallery, or table that you want visitors to filter.

2. Click the Filter content by drop-down and choose which collection field visitors will use to filter the content that displays.

3. (Optional) Add a condition that affects how the filter works:

   1. Click Advanced Filtering.

   2. Click the Condition drop-down and choose an operator that controls how the filter is applied (e.g. Is not, Does not equal, Does not include).

      Note: The conditions vary depending on the input element type and the connected field type. See the Advanced filtering conditions for each input element section below for details.

1. Repeat these steps for each input element you want visitors to use to filter content.

2. Click Preview to test using your inputs element(s) as filters.

3. Click Publish if you are ready to make the changes go live.

Studio Editor

1. In your editor, click the input element you just added.

2. Click the Connect to CMS icon

   

   .

3. Click Filter content.

4. Click the Choose a dataset drop-down and select the same dataset that connects to the repeater or gallery that you want visitors to filter.

5. Click the Filter content by drop-down and choose which collection field visitors will use to filter the content that displays.

6. (Optional) Add a condition that affects how the filter works:

   1. Click Advanced Filtering.

   2. Click the Condition drop-down and choose an operator that controls how the filter is applied (e.g. Is not, Does not equal, Does not include).

      Note: The conditions vary depending on the input element type and the connected field type. See the Advanced filtering conditions for each input element section below for details.

1. Repeat these steps for each input element you want visitors to use to filter the content.

2. Click the Preview icon

   

   at the top right to test using your inputs element(s) as filters.

3. Click Publish if you are ready to make the changes go live.

Advanced filtering conditions

Click below to view the advanced filtering conditions available for each input element:

(Optional) Step 3 | Add a button to apply the filters

If you only want the filters your visitors select to be applied after clicking a separate button, you can create an 'apply filters' button. When visitors click this button, all the input element filters they selected are applied. Without it, the filters are applied as soon as visitors select them from each input element.

Wix Editor

1. Click Add Elements

   

   on the left side of the Editor.

2. Click Button.

3. Click the button you want to use for applying the filters and drag it onto the page. You can use any of the following button types: Themed Buttons, Text & Icon Buttons, Icon Buttons, or Image Buttons.

   Tip: Alternatively, you can add an image and use it as your 'apply filters' button.

4. Click Change Text and enter the text you want to display on the button (e.g. "Apply Filters").

5. Click the Connect to CMS icon

   

   .

6. Click the Choose a dataset drop-down and select the same dataset that connects to the repeater, gallery, or table.

7. Click the Click action connects to drop-down and select Apply filters.

1. Click the button and select the Design icon

   

   to customize the appearance of your 'apply filters' button.

2. Click Preview to test your 'apply filters' button.

3. Click Publish if you are ready to make the changes go live.

Studio Editor

1. Click Add Elements

   

   on the left side of the Editor.

2. Click Button, then drag the button to where you want it to appear.

   Tip: Alternatively, you can add an image and use it as your 'apply filters' button.

3. Click Change Text and enter the text you want to display on the button (e.g. "Apply Filters").

4. Click the Connect to CMS icon

   

   .

5. Click the Choose a dataset drop-down and select the same dataset that connects to the repeater or gallery.

6. Click the Click action connects to drop-down and select Filter input values.

1. Click the button and select the Design tab

   

   from the Inspector panel to customize the appearance of your 'apply filters' button.

2. Click the Preview icon

   

   at the top right to test your 'apply filters' button.

3. Click Publish if you are ready to make the changes go live.

(Optional) Step 4 | Add a reset button

You can create a reset button that visitors click to reset all the input element filters they've selected. This provides an easy way for visitors to start over and filter the content without having to refresh the page.

Wix Editor

1. Click Add Elements

   

   on the left side of the Editor.

2. Click Button.

3. Click and drag the button you want to use as your reset button onto the page. You can use any of the following button types: Themed Buttons, Text & Icon Buttons, Icon Buttons, or Image Buttons.

   Tip: Alternatively, you can add an image and use it as your reset button.

4. Click Change Text and enter the text you want to display on the button (e.g. "Reset Filters").

5. Click the Connect to CMS icon

   

   .

6. Click the Choose a dataset drop-down and select the same dataset that connects to the repeater, gallery, or table.

7. Click the Click action connects to drop-down and select Reset input values.

1. Click the button and select the Design icon

   

   to customize the appearance of your reset button.

2. Click Preview to test your reset button.

3. Click Publish if you are ready to make the changes go live.

Studio Editor

1. Click Add Elements

   

   on the left side of the Editor.

2. Click Button, then drag the button to where you want it to appear.

   Tip: Alternatively, you can add an image and use it as your reset button.

3. Click Change Text and enter the text you want to display on the button (e.g. "Reset Filters").

4. Click the Connect to CMS icon

   

   .

5. Click the Choose a dataset drop-down and select the same dataset that connects to the repeater or gallery.

6. Click the Click action connects to drop-down and select Reset input values.

1. Click the button and select the Design tab

   

   from the Inspector panel to customize the appearance of your reset button.

2. Click the Preview icon

   

   at the top right to test your reset button.

3. Click Publish if you are ready to make the changes go live.

FAQs

Click below for answers to the most common questions about using input elements to filter content.