# How to build comparison lists in Bubble

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

## TL;DR

Build comparison lists in Bubble by letting users add items to a compare list using custom states or a CompareList data type, then displaying selected items side-by-side in a horizontal Repeating Group with attributes aligned in rows. Highlight the best value in each row for quick decision-making.

## Overview: Creating Comparison Lists in Bubble

This tutorial shows you how to build a product or feature comparison interface in Bubble. Users can select items to compare from a listing page, view them side-by-side with attributes aligned in rows, and see the best value highlighted in each category. This is essential for e-commerce, SaaS pricing pages, or any app where users need to evaluate options.

## Before you start

- A Bubble account with an existing app
- A data type with comparable attributes (e.g., Product with price, rating, features)
- Basic understanding of Bubble Repeating Groups and custom states
- Familiarity with conditional formatting

## Step-by-step guide

### 1. Set up the compare list mechanism

On your product listing page, add a Custom State on the page called compare_list (type: list of Products). When a user clicks a Compare checkbox or button on a product card, add the product to this list: Set state of Page — compare_list add Current cell's Product. To remove, use the remove operator. Limit the list to 3-4 items by adding an Only when condition: Page's compare_list:count < 4.

> Pro tip: Show a floating bar at the bottom of the page displaying the number of selected items and a Compare Now button that navigates to the comparison view.

**Expected result:** Users can add up to 4 products to a comparison list stored in a page custom state.

### 2. Build the side-by-side comparison layout

Create a comparison section (or a separate page). Add a Repeating Group with type Product, layout set to horizontal (Row), data source: Page's compare_list. Each cell displays the product image, name, and key attributes in a vertical Column layout. Ensure all cells have identical heights by using fixed-height Groups for each attribute row. This creates the side-by-side column effect.

**Expected result:** Selected products appear in horizontal columns with attributes aligned vertically.

### 3. Add attribute rows with labels

To the left of the horizontal Repeating Group, add a fixed-width column with labels for each attribute: Price, Rating, Category, Features, etc. Align these labels vertically to match the attribute positions in each comparison cell. Each attribute in the Repeating Group cell should be at the same vertical position as its label. Use Groups with fixed heights to maintain alignment.

**Expected result:** Attribute labels on the left align with corresponding values in each product column.

### 4. Highlight the best value in each row

Add conditionals to highlight winning values. For Price (lowest is best): When Current cell's Product's price = Page's compare_list:each item's price:min, change the text color to green and make it bold. For Rating (highest is best): When Current cell's Product's rating = compare_list:each item's rating:max, apply the same highlight. Repeat for each comparable attribute with appropriate min/max logic.

**Expected result:** The best value in each comparison row is highlighted in green bold text.

### 5. Add remove and clear functionality

In each comparison column header, add an X button to remove that product: Set state compare_list remove Current cell's Product. Add a Clear All button above the comparison that empties the list: Set state compare_list to empty. When the list is empty, show a message like Select products to compare with links back to the catalog page. For sophisticated comparison tools with weighted scoring, consider working with RapidDev.

**Expected result:** Users can remove individual items or clear the entire comparison, with an empty state message.

## Complete code example

File: `Workflow summary`

```text
COMPARISON LISTS — WORKFLOW SUMMARY
=====================================

PAGE CUSTOM STATE:
  compare_list (list of Products, default empty)

CATALOG PAGE:
  Each product card:
    - Checkbox/Button: Add to Compare
      Visible when: compare_list doesn't contain this Product
    - Button: Remove from Compare
      Visible when: compare_list contains this Product
  Floating Compare Bar:
    Visible when: compare_list:count > 0
    Text: "Comparing X items"
    Button: Compare Now → navigate to comparison view

WORKFLOW: Add to compare
  Event: Button Add to Compare is clicked
  Only when: compare_list:count < 4
  Action: Set state compare_list add Current cell's Product

WORKFLOW: Remove from compare
  Event: Button Remove is clicked
  Action: Set state compare_list remove Current cell's Product

COMPARISON VIEW:
  Layout:
    - Left column: attribute labels (fixed width)
    - Horizontal Repeating Group (type: Product)
      Data source: compare_list
      Each cell (Column layout):
        - Product image
        - Product name + Remove X
        - Price (conditional: green when = min)
        - Rating (conditional: green when = max)
        - Category
        - Feature list

CONDITIONALS (per cell):
  Price text:
    When this Product's price = compare_list's prices:min
    → color green, bold
  Rating text:
    When this Product's rating = compare_list's ratings:max
    → color green, bold
```

## Common mistakes

- **Not limiting the number of items in the comparison list** — Too many items make the comparison unreadable and can break the horizontal layout on smaller screens Fix: Add an Only when condition limiting the list to 3-4 items and show a message when the limit is reached.
- **Using a database data type instead of custom state for the compare list** — Creating database records for temporary comparisons wastes workload units and requires cleanup Fix: Use a page Custom State (list type) for the comparison. It resets on page reload and costs zero workload units.
- **Not aligning attribute rows across columns** — Misaligned rows make it impossible to compare the same attribute across products Fix: Use fixed-height Groups for each attribute row in the Repeating Group cells so all columns align vertically.

## Best practices

- Limit comparisons to 3-4 items for readability
- Use custom states for temporary compare lists to avoid database operations
- Align all attribute rows at the same height across columns
- Highlight the best value in each row with color and bold text
- Show a floating bar on the catalog page with the compare count and action button
- Add a clear all button for quick reset
- Handle the empty state with a helpful message linking back to the catalog

## Frequently asked questions

### Can I persist the comparison list across page reloads?

Custom states reset on reload. To persist, save the selected product IDs as URL parameters or store the list in a database field on the User.

### How do I handle products with different sets of attributes?

Use a consistent attribute set for all products. For missing values, display N/A with gray text so the row alignment is maintained.

### Can I compare more than 4 items?

Technically yes, but horizontal layouts become unusable beyond 4 items on most screens. Consider a scrollable comparison table for larger sets.

### Does the comparison work on mobile?

A horizontal layout with 3-4 columns is tight on mobile. Consider a tabbed view on small screens where users swipe between products.

### Can RapidDev help build advanced comparison tools?

Yes. RapidDev specializes in Bubble development and can build sophisticated comparison tools with weighted scoring, user-defined criteria, and exportable comparison reports.

---

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