According to Statista, US shopping revenue from eCommerce will exceed 1.7 trillion dollars by 2027. That’s a lot of potential revenue for your eCommerce store. But, how can you ensure that your store outperforms your competitors? Use Webflow eCommerce filters to add faceted search to your website. With smart filters, your users will be able to easily sort and filter your inventory. Convert shoppers to customers faster with a simple, streamlined user experience.

In this article, we’ll learn more about Webflow eCommerce filters. Then, we'll share how to add Jetboost's CMS Dynamic Filtering to your website. 

What is a Webflow eCommerce filter?

eCommerce filters let users sort and filter inventory to find exactly what they want. Filters are a key feature that impacts customer engagement, product discoverability, and sales. Don't let shoppers exit your eCommerce store because your inventory is messy and difficult to navigate.

With Jetboost, it's easy to add filtering to your website with no coding required. You can also design the look and feel of your filters to match your existing user interface. To learn more, check out our article about Jetboost’s unique filter options.

What is a Webflow eCommerce filter used for?

Multi-dimensional filters let users find and discover your products. Users can find products that they know they want. Users can also discover new products that they didn’t even know existed. The faster a user can find a product on your website, the more likely that user is to buy the product.

A study revealed that when customers feel risk, uncertainty, or that the shopping experience is too difficult, they abandon their shopping carts. Improve your user engagement with filters to improve sales. It’s a win, win situation for everyone.

What types of eCommerce filters should I use?

The filters that you need for your eCommerce store will be specific to your business. Keep it simple, and select filters that make sense for your inventory. Don’t overwhelm users with complicated filter navigation or too many filters. Use filters to convert shoppers, not drive them away out of frustration. Below are a few common filters you may want to add to your website.

Category. If you sell a variety of products, product categories will help narrow down your inventory. For example, a jewelry retailer may add filters for necklaces, bracelets, earrings, etc. 

Theme. Thematic filters help users narrow down their generic ideas to tangible products. For example, add seasonal or occasion filters to your clothing store.

Price. This is a filter that all eCommerce stores should use. All shoppers like to know the cost before they buy!

Color. A visual filter applicable to most eCommerce stores. 

Size. This is an easy yet useful filter to add to any online clothing store.

Rating. Let your users know what’s hot and what’s not with a rating filter.

Promotional. Do you have products on sale? What about daily deals? Use promotional filters to help users easily find sale items. It's tough to resist a good deal.

How do I add Webflow eCommerce filters to my website?

With our powerful CMS Dynamic Filtering Booster, you can add complex filters to your eCommerce store with no code needed. Enhance this add-on further with extra modular features. Let your users reset selected filters, see all applied filters, and more. This booster is completely customizable with total designer control. Learn how to set it up below. 

Step 1: Set up your Jetboost account. 

If you’re not a Jetboost user, sign-up for Jetboost for free. Add your Webflow account to Jetboost. Now, you can start adding boosters! 

Step 2: Add the CMS Dynamic Filtering Booster to your Webflow website. 

Navigate to your Jetboost dashboard. Click “Add Booster.” Then, add the “Dynamic List Filters” booster. 

Step 3: Configure the CMS Dynamic Filtering Booster. 

On the left-hand sidebar, name the booster. 

Select which CMS Collection on your site you want to filter. Don’t forget, if you'd like to add filtering to additional CMS Collections, just add multiple CMS Dynamic Filtering Boosters to your website.

Select which CMS Collection field you want to filter by. The field must be a Single-Reference, Multi-Reference, or Option field. For this tutorial, we’ll select a multi-reference field. If you'd like to filter a CMS Collection by multiple fields, just add more boosters when you're done.

Choose whether your users can filter your CMS Collection by multiple options. If you select “no,” users can only filter by a single option. For example, users will only be able to filter your clothing store by a single size. If you select “yes,” users can filter your clothing store by multiple sizes at once. For this tutorial, let's filter by multiple options.

Choose whether your filtered results will display items that match ALL of the selected options (the item has Option A and Option B), or ANY of the selected options (the item has Option A or Option B). This step is unique to multi-reference field filtering. Let’s select “all” for this tutorial.   

Decide if you want to add the selected filters to the URL. Select this if you want your users to be able to share their filtered results. We find this especially useful for eCommerce stores. Shareable shopping helps everyone! 

Step 4: Add the Jetboost script to your Webflow website. 

Add the Jetboost script to the “Head Code” section of your website. If you’re already a Jetboost user, you can skip this step! 

Step 5: Configure your CMS Collection List. 

Add the provided Jetboost class to your Collection List Wrapper element.

Add an Embed element inside of your Collection Item. Add the provided Jetboost code to the Embed element. Click “save & close.” You can skip this step if you’ve already added a different booster to this Collection Item. 

Publish your webpage, and copy the URL.  Paste to the “Test URL” on your Jetboost dashboard. Or, leave the Test URL blank if you’re testing the homepage. Click “test and continue.” We’ll let you know if there are any issues and how to fix them. 

Step 6: Create your Filter. 

Choose whether you’d like to use a button, link block, or check box for your filter. The element you select will be how your users filter your CMS Collection List. Let’s use buttons. 

Next, add a new CMS Collection List to your webpage where you’d like the filter options to be displayed. Connect it to your selected Multi-Reference field. For this tutorial, we’re filtering recipes (CMS Collection List) by diet & allergies (Multi-Reference field).  

Add a button to the new Collection List Item. Connect it to your Multi-Reference field. Style your button!

Add the provided Jetboost class to your new Collection List Wrapper element.

Add an Embed element inside of your new Collection Item. Add the provided Jetboost code to the Embed element. Click “save & close.” 

Style your “active” filter button. Copy the provided Jetboost class, and add it to your button. Style this class how you want the button to look when a user clicks on it. Remove this class when you’re done. Don’t worry, Webflow will remember this class. It will automatically be added and removed, as needed. 

Publish your webpage, and re-test! If there are any issues, we’ll let you know.

Step 7: Final Checks. 

If there are no final issues, click “continue.” You’re all set now! 

Prefer video format? Check out our video tutorial below. 

If you’re interested in learning how to filter by a single-reference field or option field, check out our other video tutorials. View our live demo to learn more about all the filtering options that we offer. Ready to get started now? Try CMS Dynamic Filtering for free!  

Add Search, Sort, and Wishlists to your eCommerce Site

Jetboost is an all-in-one tool for your Webflow eCommerce store. Combine Jetboost’s boosters to give your users an interactive, dynamic shopping experience. Learn more about our other boosters below.   

Real-Time, On-Page Search. Let users search your eCommerce store with Jetboost’s Real-Time, On-Page Search. Read our article to learn how to add a search bar to your website in less than 10 minutes.

CMS Item Favoriting. Use Jetboost’s CMS Item Favoriting Booster to add a wishlist feature to your eCommerce store. Check out our article to learn how to do this quickly with Jetboost. Your users will love how easy it is to shop and save their favorite products to a personalized wishlist.

Dynamic Sorting. Let users sort your inventory by specific criteria like price, rating, etc. Dynamic Sorting is an easy and quick way to improve your user experience and engagement.

Advanced Pagination. Paginate your eCommerce store with Advanced Pagination. Let users scroll through your inventory without full-page refreshes. It’s seamless shopping for the busy user.

Check out our live demo to see how we combine filtering and search to create an intuitive user interface.

Smart Filtering is Smart Business

Simplify your user's shopping experience and increase sales with Jetboost’s Dynamic Filtering. Create complex Webflow eCommerce filters that integrate beautifully with your existing user interface. All with no code! It's your choice how your users search your inventory. Dynamic filtering is a smart choice for your business and your customers.