Filtering a collection with Drop-down (FrondEnd)

Hi Guys,

First of all, I want to thank the Webflow team for such a great product! It is making my life a lot easier.

I am trying to build a page where users will search a collection first by a category (BrandName) The collection will show all products, then by Product Number (Search field).

Any ideas or link on where can I see this? I have seen all the collection videos but nothing like this.


It sounds like you need to build a Brand Name collection, and a Product collection. In the Brand Name collection, you need a Multi-reference field that allows you to associate the Product with it’s Brand Name. Then you build a page with a Collection List object filtered to show “Everything in the Brand Name Collection where Products is set.” Inside the collection list item, build a container for your products. You’ll see that the Product fields are accessible further down the list when you’re selecting a data source. If you set the Collection List to show only a single result and enable Pagination, you can now page through each of your brands. If you show all of them, you can use interaction filters to Show and Hide them as needed when users click navigation buttons.

Now your Collection List is showing Brands with their associated Products, but you need to build a solution for users to pick a Brand Name. You can build a Collection page of Brands if you have a smaller number of Brand Names to pick between. This can be as simple as a Collection list of all Brand Names showing just an Image logo and a link to their Products page (what you built above).

This is all assuming you want clickable navigation. If you’re looking to implement textual search, Webflow’s capabilities are limited to optimizing site-wide search. You’ll need to implement a third party solution to enable end-user text-search within your CMS, I think.

1 Like

CThanks! I will give it a shot. If I understood, I can have the brand name collections and then associate them with a product collection so that users can select product id and display the product?

Yes, and you’ll probably want to use a Multi-Reference field. https://university.webflow.com/article/multi-reference-field

That way, you build a product in the Products collection, then go into the Brand Name collection and select it from a drop down list of your products. The downside is that you’ll be selecting from ALL of your products in that drop down (If you sell Pepsi drinks and Levi’s jeans, all the drinks will still be in the drop down while you’re selecting the jeans), but that only really becomes a pain if you have hundreds of different products with little overlap between brands, and it only impacts you on the back-end, not your website users.

1 Like