# How to Build a Product Comparison Feature in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
PRODUCT COMPARISON — SUMMARY
================================

SELECTION:
  Custom state: compare_list (list of Products, max 4)
  Compare button: toggle product in/out of list
  Floating bar: thumbnails + 'Compare Now' button

COMPARISON TABLE:
  Header: horizontal RG of selected products
    Image, name, price, remove button
  Rows: one per specification
    Label | Product 1 | Product 2 | Product 3
  Attributes: price, screen, storage, battery, etc.

HIGHLIGHTING:
  Best numeric value: green background
  Different text values: highlighted background
  Identical values: normal background

ACTIONS:
  Remove: remove from list → refresh table
  Add: popup search → add to list
  Share: generate URL with product IDs
  Save: create SavedComparison record

DATA TYPE: SavedComparison
  user, products (list), created_date
```

## Common mistakes

- **Not limiting the comparison list size** — More than 4 products makes the table too wide and difficult to read, especially on mobile Fix: Limit compare_list to 4 products maximum and show a message when the limit is reached
- **Hardcoding specification rows instead of using dynamic attributes** — Adding new product attributes requires editing the comparison page layout every time Fix: Use a dynamic attribute system: ProductAttribute Data Type with rows generated from a Repeating Group
- **Not handling mobile responsiveness for the comparison table** — Wide comparison tables overflow on mobile screens, making the feature unusable on phones Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-a-product-comparison-feature-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-a-product-comparison-feature-in-bubble