Is it possible to create a "Tyre Search" function in Webflow that uses three dropdown boxes to select filters and displays the filtered results from the "Tyres" CMS collection on a separate page?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

Yes, it is possible to create a "Tyre Search" function in Webflow that uses three dropdown boxes to select filters and displays the filtered results from the "Tyres" CMS collection on a separate page. Here's how you can accomplish this:

Set up your "Tyres" CMS collection:

In your Webflow project, go to the CMS tab and create a new collection called "Tyres".
Add relevant fields to your collection, such as "Brand", "Size", and "Type". Make sure to add sample data to these fields for testing purposes.

Create a new page for the "Tyre Search" function:

In the Pages tab, create a new page called "Tyre Search" or any name you prefer.
Design the layout of this page as per your requirements, including the three dropdown boxes.

Add dropdown fields:

In the Elements panel, drag and drop three Dropdown elements onto the page.
Double-click each dropdown element to edit its options. For example, you can set the first dropdown to display the "Brand" options from the "Tyres" collection. Repeat this step for the other two dropdowns, selecting "Size" and "Type" options accordingly.

Set up filtering and display:

Select the page element where you want to display the filtered results. This can be a Collection List, a Grid, or any other element.
In the settings panel for this element, choose your "Tyres" CMS collection as the data source.
Set the filters to match the selected options from the dropdowns. For example, you can add a filter for "Brand" that equals the value of the first dropdown, and similarly for "Size" and "Type" filters.
Preview the page and test the dropdowns to see if the filtered results are displayed correctly.

Add interactions (optional):

If you want to enhance the user experience, you can add interactions to the dropdowns, so that the filtered results update dynamically as the user selects different options.
In the Interactions panel, create a new interaction for each dropdown. Set a "Change" trigger and add an action that filters the results based on the selected option. Make sure to target the element displaying the filtered results.

Set up navigation:

To display the filtered results on a separate page, you can create a link or button on the "Tyre Search" page that leads to another page where the filtered results are displayed.
In the Navigator panel, select the link or button you created and go to the Link settings. Choose the destination page where you want to display the filtered results.

By following these steps, you can create a "Tyre Search" function in Webflow using three dropdown boxes to select filters and displaying the filtered results from the "Tyres" CMS collection on a separate page.

Additional Questions:

How can I create dropdown menus in Webflow?
Can I use interactions to filter CMS collections in Webflow?
Is it possible to design custom search functions in Webflow?

How can I link a link block to a section on my page in Webflow if the drop-down list under "Choose a page section" only shows "Choose a page section" with a checkmark next to it?

What could be causing the issue where the form in Webflow won't allow multiple item selections from a desktop computer but works fine on a mobile phone?

Can I format a span of text in a rich text element in Webflow to look like computer code/preformatted text?

How can I change the link colors in the Webflow template I purchased, considering that the links are generated by CMS collections and I can't find where to change them?

Is there a built-in option in Webflow's editor to crop images, or do they need to be pre-sized before uploading or using CMS? Why is this process not more straightforward compared to using simple templates on Squarespace?

What can I do to troubleshoot and fix the issues I am facing with the second-to-last section at the bottom of my Webflow project?

How can I ensure that all blog post thumbnail images in Webflow have the same width and height, so my client does not have to worry about pixels and image cropping?

Can I add a file named something.html to my website's webspace for ownership verification purposes in Webflow?

How can I get my edits to the Navbar on the homepage to carry over to other pages in Webflow?

Is there a simple way to switch my custom domain from my old site to my new site in Webflow, or do I need to go through the process of unlinking and relinking the domain?