A product comparison feature in Bubble lets users select 2-4 products and view their specifications side by side in a comparison table. You store selected products in a custom state list, display them in a columnar layout with product attributes as rows, and highlight differences between values. This is essential for e-commerce apps where customers need to compare features, prices, and specs before purchasing.
Overview: Product Comparison in Bubble
This tutorial shows how to build a product comparison feature where users select multiple products and view their specifications in a side-by-side table with highlighted differences.
Prerequisites
- A Bubble app with a Product Data Type containing multiple attributes
- Understanding of custom states and Repeating Groups
- Products with comparable specification fields (price, features, specs)
Step-by-step guide
Add comparison selection to product listings
Add comparison selection to product listings
On your product catalog page, add a 'Compare' checkbox or button on each product card. Create a page custom state 'compare_list' (type: list of Products). When the Compare button is clicked, toggle the product in the list: if already in the list, remove it; if not, add it. Limit the list to 4 products maximum. Show a floating comparison bar at the bottom showing the selected product thumbnails and a 'Compare Now' button.
Expected result: Users can select up to 4 products for comparison with a floating bar showing selections.
Build the comparison table layout
Build the comparison table layout
Create a 'compare' page. Pass the selected product IDs via URL parameters or use a shared custom state. Display a horizontal Repeating Group of the selected products as column headers, each showing the product image, name, price, and a 'Remove' button. Below, create rows for each specification: one row per attribute (screen size, storage, battery, weight, etc.). Each row has a label on the left and values for each product in the columns.
Pro tip: For a dynamic attribute list (not hardcoded), create a ProductAttribute Data Type and use a vertical Repeating Group for rows with a nested horizontal Repeating Group for each product's value.
Expected result: A comparison table displays selected products as columns with specification rows.
Highlight differences between products
Highlight differences between products
Add conditional formatting on each specification cell. For numeric values: highlight the best value (lowest price, highest storage) in green and the worst in a lighter shade. For text values: highlight cells where the value differs from other products. Use a comparison approach: 'When this cell's value is not equal to the first product's value' → change background color. This draws attention to the differences users care about.
Expected result: Differences between products are visually highlighted with color coding.
Add and remove products from the comparison
Add and remove products from the comparison
On the comparison page, add a 'Remove' button on each product column that removes that product from the list and refreshes the display. Add an 'Add Another Product' button that opens a popup with a product search, allowing users to add more products without leaving the comparison page. When the list changes, the comparison table updates automatically.
Expected result: Users can dynamically add and remove products from the comparison without leaving the page.
Save and share comparisons
Save and share comparisons
Add a 'Share Comparison' button that generates a URL with product IDs as parameters. Anyone with the URL sees the same comparison. Optionally, let logged-in users save comparisons: create a 'SavedComparison' Data Type with user, products (list), and created_date. Add a 'Save' button and a 'My Comparisons' page listing saved comparisons.
Expected result: Users can share comparison links and save comparisons to revisit later.
Complete working example
1PRODUCT COMPARISON — SUMMARY2================================34SELECTION:5 Custom state: compare_list (list of Products, max 4)6 Compare button: toggle product in/out of list7 Floating bar: thumbnails + 'Compare Now' button89COMPARISON TABLE:10 Header: horizontal RG of selected products11 Image, name, price, remove button12 Rows: one per specification13 Label | Product 1 | Product 2 | Product 314 Attributes: price, screen, storage, battery, etc.1516HIGHLIGHTING:17 Best numeric value: green background18 Different text values: highlighted background19 Identical values: normal background2021ACTIONS:22 Remove: remove from list → refresh table23 Add: popup search → add to list24 Share: generate URL with product IDs25 Save: create SavedComparison record2627DATA TYPE: SavedComparison28 user, products (list), created_dateCommon mistakes when building a Product Comparison Feature in Bubble
Why it's a problem: Not limiting the comparison list size
How to avoid: Limit compare_list to 4 products maximum and show a message when the limit is reached
Why it's a problem: Hardcoding specification rows instead of using dynamic attributes
How to avoid: Use a dynamic attribute system: ProductAttribute Data Type with rows generated from a Repeating Group
Why it's a problem: Not handling mobile responsiveness for the comparison table
How to avoid: On mobile, limit to 2 products side by side with a swipe gesture to see more, or switch to a stacked card layout
Best practices
- Limit comparisons to 2-4 products for readability
- Highlight the best values in each specification row for quick scanning
- Show a floating selection bar on catalog pages for easy comparison access
- Make the comparison shareable via URL parameters
- Handle mobile with a reduced column layout or horizontal scrolling
- Show prices prominently at the top as the primary comparison point
- Add a 'Buy' button under each product column for quick purchase from the comparison
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a product comparison feature in Bubble.io where users select up to 4 products and see their specs side by side in a table with differences highlighted. How do I build this?
Build a product comparison feature. Add a Compare button on product cards that adds products to a comparison list (max 4). Create a comparison page showing products as columns with specification rows. Highlight the best price in green and differences in yellow.
Frequently asked questions
Can I compare products from different categories?
Technically yes, but it is most useful when comparing products in the same category that share attributes. Filter the comparison to same-category products for meaningful results.
How do I handle products with missing specification values?
Display 'N/A' or '-' when a product does not have a value for a specification. Use ':default to "N/A"' on the dynamic expression.
Can I add the comparison feature to a mobile app?
Yes, but limit to 2 columns on mobile with a toggle or swipe to show additional products. Consider a stacked card layout as an alternative to a table.
How do I persist the comparison list across page navigation?
Store the product IDs in URL parameters or use the 'compare_list' custom state on a reusable element that persists across pages (like a Floating Group).
Can RapidDev build advanced product comparison features?
Yes. RapidDev can build comparison features with dynamic attributes, scoring algorithms, recommendation engines, and mobile-optimized layouts in Bubble.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation