How to Build an E-Commerce Filter System in Bubble

Create a new page called 'shop'. Add a Group element on the left side (250-300px wide) as the filter sidebar. Add a larger Group on the right for the product grid. On the page itself, create these custom states: selected_categories (type: list of texts), min_price (type: number), max_price (type: number), selected_colors (type: list of texts), selected_sizes (type: list of texts). These states will hold the user's current filter selections and drive the product search. At the top of the sidebar, add a 'Clear All Filters' button. Its workflow will reset every custom state to empty. Inside the sidebar, create four collapsible Group sections with headings: Categories, Price Range, Colors, and Sizes.

Create an Option Set called ProductCategory with options matching your catalog (e.g., Electronics, Clothing, Home, Sports). Inside the Categories section, add a Repeating Group with type ProductCategory and data source: All ProductCategories. In each cell, place a Checkbox element and a Text element showing the option's Display value. Next to it, add another Text element displaying the count: Do a search for Product where category = Current cell's ProductCategory :count. This shows users how many products each category contains. Add a workflow on the Checkbox element: When Checkbox value changes and is checked, set state selected_categories to selected_categories plus item Current cell's ProductCategory's Display. When unchecked, set state selected_categories to selected_categories minus item Current cell's ProductCategory's Display.

Inside the Price Range section, add two Input elements side by side: one labeled 'Min' and one labeled 'Max'. Set both content formats to Integer. Below the inputs, add a Text element showing the current range: 'Showing products from $Min to $Max'. Add two workflows. Workflow 1: When Min input's value changes, set state min_price to Min input's value. Workflow 2: When Max input's value changes, set state max_price to Max input's value. If you want a more visual control, install a Range Slider plugin from the Bubble Plugin Marketplace and configure it with min = 0, max = your highest product price, and two handles. Map each handle to the corresponding custom state.

Create an Option Set called ProductColor with options like Red, Blue, Black, White. Add an attribute called hex_code (text) to store the color value (e.g., #FF0000 for Red). Inside the Colors section, add a Repeating Group of ProductColor options laid out as a grid (3-4 columns, fixed cell size of 40x40px). Style each cell as a circle with the background color set to Current cell's ProductColor's hex_code. Add a conditional: when Current cell's ProductColor's Display is in selected_colors, show a white checkmark icon overlay. Workflow on cell click: if the color is in selected_colors, remove it; if not, add it. For Sizes, create a ProductSize Option Set (XS, S, M, L, XL). Display as a row of rectangular buttons. Use the same toggle pattern: click adds or removes the size from selected_sizes, and a conditional changes the button style when selected.

Select the product grid Repeating Group on the right side of the page. Set its Type of content to Product. Set the data source to: Do a search for Product with these constraints: category is in This page's selected_categories, price >= This page's min_price, price <= This page's max_price, color is in This page's selected_colors, size is in This page's selected_sizes. Critically, check the 'Ignore empty constraints' checkbox. This means when a filter state is empty (no categories selected, no min price entered, etc.), that constraint is ignored and all products pass through. The result is that only active filters restrict the results. Above the Repeating Group, add a Text element showing the result count: 'Showing X products' where X is the Repeating Group's List of Products :count.

Above the product grid and below the result count, add a horizontal Repeating Group to show active filter tags. Create a custom state called active_filter_tags (list of texts) on the page. Whenever a filter state changes, rebuild this list by combining all non-empty filter values into readable tags (e.g., 'Category: Electronics', 'Min price: $50', 'Color: Red', 'Size: M'). In each tag cell, display the tag text and an X icon button. The X button workflow: parse the tag type and remove the corresponding value from its custom state (e.g., remove 'Electronics' from selected_categories). Wire up the 'Clear All Filters' button at the top of the sidebar to reset all five custom states to empty and clear the active_filter_tags list. For a polished experience, add RapidDev-style smooth transitions: set the product Repeating Group to animate when its data source changes.