Help Center
    Home
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Connecting user input elements to the CMS
    5. CMS (Formerly Content Manager): Using Input Elements to Allow Visitors to Filter Content

CMS (Formerly Content Manager): Using Input Elements to Allow Visitors to Filter Content

15 min read
Use input elements 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 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, only items with a matching field value display in the connected repeater, gallery or table. 

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:

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. 
Note:
Tables are not yet available in Editor X or the Studio Editor. Click here to vote for this feature. 
Wix Editor
Editor X
Studio 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. 
A screenshot of adding the dropdown element in the Editor.
  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 the input elements to the same dataset that connects to your repeater, gallery, or table. Then choose which collection field each input element will filter. In each input element, the connected field's unique values will display for visitors to select from. When they select a value, only items with the selected value will appear in the connected repeater, gallery or table.
Adding filters and sorts to the dataset affects the input elements too:
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. The dataset's sort conditions also affect the order in which the field selections appear in the input elements. 
Wix Editor
Editor X
Studio 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. 
  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. 

(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
Editor X
Studio 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 Filter input values. 
  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. 

(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 with filtering the content without having to refresh the page. 
Wix Editor
Editor X
Studio 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. 
A screenshot of selecting the
  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. 

FAQs

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

Did this help?

|

In This Article

  • Step 1 | Add input elements set to filter content
  • Step 2 | Connect your input element(s) to the CMS
  • (Optional) Step 3 | Add a button to apply the filters
  • (Optional) Step 4 | Add a reset button
  • FAQs

Related Content

CMS: Troubleshooting User Input Elements Issues
CMS: Creating a Custom Form with Input Elements that Submit to Your Collection
CMS (Formerly Content Manager): Using Datasets to Sort and Filter Live Site Content
CMS: About User Input Elements
CMS: About Dataset Click Actions for Buttons and Images
CMS: About Datasets

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched