How to build ecommerce filters in Bubble

The simplest and most reliable way to build ecommerce filters in Bubble is to store your products in the database with fields you want to filter by (such as category, price, brand, tags), then place visual filter inputs on the page (dropdowns, sliders, checkboxes), and connect them to the Search for Products data source of your repeating group using Bubble’s built‑in constraints or the :filtered operator. Each filter updates custom states or input values, and the repeating group automatically refreshes to show only the matching products.

Core Concept

In Bubble, a repeating group shows a list of items using a Search. Filters work by changing that search. You can either apply constraints directly inside Search for Products or run a broader search and refine it using :filtered with “Advanced” expressions. For ecommerce filters, using constraints when possible is faster for the database.

How to Structure It

• Create fields on the Product datatype: category (text), brand (text), price (number), tags (list of text).
• Place filter UI elements: dropdown for category, checkbox list for tags, slider for price range.
• Add custom states (optional) to store selections, like price_min and price_max.

Connecting Filters to the Repeating Group

Set the repeating group data source to a search with constraints that reference those filter inputs or custom states.

// Repeating Group's Data Source (example)

Search for Products:filtered {  
    // Used only when constraints can't handle it  
    constraint: Advanced: This Product's tags intersects with Dropdown Tags's value  
}

But whenever possible, put constraints directly:

// Faster database-side filtering

Search for Products  
  category = Dropdown Category's value  
  price >= Slider Price's low value  
  price <= Slider Price's high value  

Best Practices

• If a filter is optional, wrap it with “Ignore empty constraints”. This prevents Bubble from blocking the search.
• For multi-select filtering (example: multiple brands), store them in a custom state list and use :filtered → Advanced with “This Product’s brand is in State Brand List”.
• Use constraints for anything simple (equals, greater than, contains), because it keeps queries fast.