If you’ve ever scrolled through a website and struggled to find the information you need, you know how frustrating it can be. This shows why filters are crucial—they help users quickly locate specific content within a defined dataset, like products or blog posts.
For a Wix website, filters work best when applied to structured content, such as directories, product listings, or blog entries stored in a CMS collection. By using filters within repeaters or tables, you can offer your visitors a smoother and more intuitive browsing experience tailored to their needs.
In this tutorial, I’ll guide you step by step on how to add filters to specific elements of your Wix site, with simple instructions and helpful illustrations. Let’s get started!
Want to learn more? Ready to dive deeper into Wix and Velo? Take your skills to the next level with our comprehensive 'Velo for Beginners' course on Udemy. Enroll today to uncover the intricacies of Wix and Velo.
Need help with your site? The Wix Wiz team is at your side. Schedule a one on one consultation or have the entire team onboard with our development and support plans.
What Is Data Filter?
A data filter is a tool that allows visitors to refine and sort displayed content based on specific criteria, eliminating the need to scroll through irrelevant options. For example, a filter might let users narrow down a list of products by price range, category, or brand, or locate blog posts on a particular topic.
Adding data filters to your Wix site isn’t just about functionality—it’s about creating a focused and efficient way for users to explore your content displayed in repeaters or tables. This ensures they can easily find what they’re looking for without wasting time.
Why Data Filters Are Essential for Your Website
Human attention spans are getting shorter. No one wants to spend unnecessary time searching through your website without being sure the information or product they need is there.
Filters play a vital role in solving this issue by helping users navigate your content quickly and efficiently. They enhance the user experience, improve navigation, boost engagement, and give your website a more polished, professional feel.
When visitors can find what they need effortlessly, they’re more likely to stay longer and explore additional options, increasing your chances of higher conversion rates.In this tutorial, we’ll learn through a simple, no-code method to add data filters to your Wix website.
Whether you’re showcasing products, blog posts, or any other dynamic content, creating filters using a dropdown and dataset is a straightforward process that enhances usability and engagement.
Now, let’s create your filters!
Creating a filter using a dropdown and dataset (no code).
In this section, we’ll guide you through creating a filter for your Wix website using a simple dropdown and a dataset, all without needing any code. This method is perfect if you're looking for an easy way to give your visitors the ability to filter content based on specific criteria, like categories or options, with just a few clicks.
To create your filter, It is important to ensure that you have created your CMS collection with the relevant data and data points that will be filtered.
Once you have your data in your CMS collection, Proceed to your Canvas and create a repeater.
Click on Add Element and You will see a Sidebar Menu with a list of options,
Select Layout Tools,
Select Repeater, and add the one with the list layout.
Add Text to your Repeater
Click on Add Element
Select Text and Select Paragraph under Text Style
Once you have filled the repeater with the right items, you want to connect it to the CMS by clicking the icon on top.
This would open a panel on the side and you want to click on Add a Dataset, this dataset serves as a connector from your CMS collection to the repeater.
Here, you want to choose the collection and by default, it will be given a Dataset name and you can click on Create.
You will notice that the side panel will turn into a settings panel for your Dataset.
Now, you want to connect each of the text to the appropriate fields within your dataset
Implementing the Filter
Click on Add Element and select Input
You will see Dropdown, select and drag it to the display then connect it to the CMS, this will introduce you to two options which are Filter Connect and Collect Content.
Select Filter Connect and pick your dataset. Your dataset is now connected to both your filter and repeater.
Click on Connections in the side panel and set the Filter content to your preferred filter and set the condition to be “is” so the filter begins to work.
You can also click on “Settings” at the top of the input field and update the Placeholder Text how you want it.
Follow the same process to create your second input field.
Filtering a filter using some Velo code .setFilter()
For those who want to take their filtering capabilities to the next level, this section covers how to add some custom functionality using Velo code. We'll show you how to use the .setFilter() method to create conditional filters that let users refine their choices further, ensuring a more tailored and interactive browsing experience.
In this part, We will learn conditional filters, so you can filter items extensively. For instance, after filtering cars by their makes, You want to be able to filter them even further by their specific models. We will be making use of some codes to achieve this.
In the previous part, when you filter items with the first input field, it doesn’t affect the second input field but here, you will be making sure they both work together. To achieve this, You are going to change the approach to how the fields are connected to data.
Change them from “Filter Content” to “Collect Content”
then scroll down to “show list options” and toggle it on.
Next, You want to click on the Choose a dataset option, Add a dataset, reconnect it to the collection, give it a different name, and click Create. Set where the Labels and Values connect to.
However, You will notice that there will be no All option as Wix no longer considers this to be a filter and this removes the ability to filter.
Proceed to repeat the same process with your second input field, then you will be reinstating their filtering capabilities by clicking on the code icon on the left sidebar.
You will be using the setFilter() function which you can learn more about in the Wix documentation here.
Applying Filter Codes
When You open your code environment, you will notice the input field has an assigned ID, you can leave it or change it to something else.
On the right side panel, You want to also view all datasets and rename them to something you can easily keep in mind and remember.
Now, in your code environment, you want to remove all of the comments and leave only the onready function.
So you will have the following code
In the code above, the inputs have been instructed to filter the collections based on the make and then the model, it is also designed to ensure that the make is first selected before the model. In order to ensure this works appropriately, proceed to properties and settings for the model input and uncheck the enabled option.
Publish changes and test your site.
Creating a clear button.
In this section, we’ll show you how to add a "Clear" button to your Wix site, allowing users to easily reset filters and start fresh. This feature ensures a smooth and user-friendly experience, giving visitors the flexibility to remove any active filters with a single click.
Here, We will learn how to ensure that you are able to clear the filters when they have been added to return things to their natural state.
Go to add elements, drag in a button element and change the text to Clear.
Open up your code panel and change the button ID to clear button, then proceed to the bottom of your filter code and add
This code ensures that the selected data is cleared, the values in both fields are cleared and the model field is disabled as initially specified.
Creating a sort dropdown
Sorting is a great way to organize content for your visitors. Here, we’ll guide you through creating a sort dropdown that lets users order the content based on various criteria like A-Z, Z-A, or by date. This gives your visitors control over how they view the content, improving their browsing experience.
The data in the collection do not follow any particular order and appear randomly. To fix that, We will learn you through how to create a sort dropdown that rearranges the data in order.
In your right-side panel, If you click on dataset settings, You will notice that there is a sort section that arranges the data in the order of when it was created(New to Old).
As the site editor, You can also change the order and sort it in other ways, however, this isn’t a friendly experience for the user, You want to make sure they are able to sort the data themselves.
You will require some code to achieve this.
First, You want to add an element, click input, pick a dropdown and add it under the existing dropdowns.
Click on Settings, rename it to Sort by and Save.
Click on Manage Choices, select Add Multiple Choices and
Make A-Z,
Model A-Z,
Model Z-A,
Year,
Save your changes and you will notice the dropdown has been updated. Click on Code and your code environment will open up. You will be making use of the SetSort which you can read more about in the documentation here.
Rename your dropdown ID to SortDropdown then in your code environment, input:
Ensure that every “case” is exactly how they were added in the dropdown choices.
Creating a price slider filter
Want to allow users to filter items based on price? In this section, we’ll walk you through adding a price slider that lets users set a price range, helping them find products or services that fit their budget. This simple, interactive feature can significantly enhance the shopping experience on your site.
A slider filter improves user experience by allowing users to filter items quickly based on their preferred range, pinpoint their desired price range, and compare and select items more effectively.
This approach makes filtering by ratings, dates, weights, or any numerical range, possible for users and is particularly useful for instances like e-commerce platforms, and real estate listings, where narrowing down options is essential.
In this tutorial, we will cover the steps to create one. You will first have to go to Add Elements, select Input and drag in a slider.
Select your Slider and click on Settings
Set the minimum value to the lowest price point, the maximum value to the highest price point and set a default point.
Now, Open your code environment and add
Save your changes and preview your website. Your slider should be functional and only show prices that are less than or equal to the specified amount.
Displaying the item count and a message when there are no items that match the filter.
It's important to let users know if their filter didn’t return any results. This section shows you how to display the total number of items that match a filter and how to show a friendly message if no items are found. This improves the user experience by keeping visitors informed, preventing frustration.
Here, We will learn how you will be showing users how many items are available and a message when there are zero items.
First, Go to Add Elements, select and drag in a text paragraph
Write {resultsMessage} and open your Code Environment
You can save this and proceed to test your website, you should see the total results of items.
Conclusion
And that's a wrap! With filters now in place, your Wix site is ready to provide a smoother, more intuitive experience for your visitors. Whether it's sorting through products or browsing content, you're offering them a quicker, more personalized journey. You’ve just upped your website’s game, making it not only functional but also user-friendly. Keep building, and may your site continue to shine!
With these steps, you can create a more organized and efficient website, making it easier for users to get the information they want. Happy building!
Want to learn more? Ready to dive deeper into Wix and Velo? Take your skills to the next level with our comprehensive 'Velo for Beginners' course on Udemy. Enroll today to uncover the intricacies of Wix and Velo.
Need help with your site? The Wix Wiz team is at your side. Schedule a one on one consultation or have the entire team onboard with our development and support plans.
Comments