# How to build a favorites list in Bubble

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

## TL;DR

Add a favorites or wishlist feature in Bubble by creating a list of Products (or any Data Type) on the User record, or a separate Favorite data type linking User to the item. Toggle a heart icon on click to add or remove items, and display saved favorites in a dedicated Repeating Group. Both approaches work — a list field is simpler, while a separate data type offers more metadata.

## Add a Favorites/Wishlist Feature in Bubble

This tutorial shows you how to let users save items to a favorites list in your Bubble app. You will learn two data modeling approaches, implement the toggle workflow, and display saved items. This works for products, articles, listings, or any content users want to bookmark.

## Before you start

- A Bubble account with an existing app
- A Data Type to favorite (e.g., Product, Article, Listing)
- User authentication configured
- Basic familiarity with workflows and Repeating Groups

## Step-by-step guide

### 1. Choose Your Data Structure

You have two options. Option A: Add a field 'favorites' (list of Products) directly on the User data type. This is simpler but limits metadata. Option B: Create a separate 'Favorite' data type with fields: user (User), item (Product), and created_date (date). This allows tracking when items were favorited and adding notes. For most apps, Option A (list field on User) is sufficient. Go to Data tab → User → add field 'favorite_products' as type Product, check 'This field is a list'.

**Expected result:** A list field on User or a Favorite data type is created for storing favorited items.

### 2. Add the Favorite Toggle Button to Product Listings

On your product listing page, inside the Repeating Group cell, add an Icon element (use a heart icon). Set its color conditionally: When Current User's favorite_products contains Current cell's Product, set the icon color to red (filled). Otherwise, keep it gray (outline). Alternatively, use two icons — a filled heart and an outline heart — with opposite visibility conditions.

> Pro tip: Use the 'contains' operator for list checks: 'Current User's favorite_products contains Current cell's Product' returns yes/no.

**Expected result:** Products already in the user's favorites show a red heart, others show a gray heart.

### 3. Create the Toggle Favorite Workflow

Add a workflow on the heart icon click. For adding: 'Only when Current User's favorite_products does not contain Current cell's Product' → Make changes to Current User → favorite_products add Current cell's Product. For removing: 'Only when Current User's favorite_products contains Current cell's Product' → Make changes to Current User → favorite_products remove Current cell's Product. These two conditional actions create a toggle effect — click once to add, click again to remove.

**Expected result:** Clicking the heart icon toggles the product in and out of the user's favorites list, with the icon updating visually.

### 4. Build the Favorites Page

Create a page called 'favorites'. Add a Repeating Group with Type = Product and Data source = Current User's favorite_products. Each cell displays the product image, name, price, and a View button that navigates to the product detail page. Add a Remove button (or the same heart toggle) per cell. Add an empty state: a Group visible when Current User's favorite_products:count is 0, containing text like 'No favorites yet' and a 'Browse Products' button.

**Expected result:** Users see all their favorited items in a dedicated page with options to view or remove them.

### 5. Add a Favorites Count Badge

In your navigation bar (ideally a reusable element), add a heart icon with a small Text element overlaid showing 'Current User's favorite_products:count'. Set the count badge to be visible only when the count is greater than 0. This gives users a visual indicator of their saved items from any page in the app.

**Expected result:** A heart icon with a count badge in the navigation shows how many items are in the favorites list.

## Complete code example

File: `Workflow summary`

```text
DATA STRUCTURE (Option A — list on User):
- User (modified)
  - favorite_products (list of Product)

DATA STRUCTURE (Option B — separate type):
- Favorite
  - user (User)
  - item (Product)
  - created_date (date)

PAGE: Product listing (Repeating Group cell)
- Icon Heart
  - Default: gray outline heart
  - Conditional: When Current User's favorite_products contains Current cell's Product → red filled heart

WORKFLOWS:
1. Heart icon clicked (add favorite)
   Only when: Current User's favorite_products does not contain Current cell's Product
   → Make changes to Current User: favorite_products add Current cell's Product

2. Heart icon clicked (remove favorite)
   Only when: Current User's favorite_products contains Current cell's Product
   → Make changes to Current User: favorite_products remove Current cell's Product

PAGE: favorites
- RepeatingGroup FavoriteItems
  - Type: Product
  - Source: Current User's favorite_products
  - Cell: product image, name, price, View button, Remove button
- Group EmptyState (visible when count = 0)
  - Text: "You haven't saved any favorites yet"
  - Button: "Browse Products" → Go to page products

NAVIGATION:
- Icon Heart + Text badge (Current User's favorite_products:count)
  - Badge visible when count > 0
```

## Common mistakes

- **Using 'Do a Search for' instead of the User's list field to check favorites** — Searching the database every time the heart icon renders is expensive in a Repeating Group. A list check on the current user is instant. Fix: Use 'Current User's favorite_products contains Current cell's Product' — this checks the already-loaded user data without an extra search.
- **Forgetting to handle the case where the user is not logged in** — Anonymous users cannot have a favorites list stored in the database. The workflow will error silently. Fix: Add 'Only when Current User is logged in' to the favorite workflow. Show a login prompt for anonymous users.
- **Using a list field for very large favorites lists (100+ items)** — Bubble list fields on User can degrade in performance with very long lists. Fix: If users are likely to save hundreds of items, use a separate Favorite data type instead of a list field.

## Best practices

- Use a list field on User for simple favorites (under 50 items per user). Use a separate data type for large lists or when you need metadata.
- Show visual feedback immediately — change the heart icon color without waiting for the database write to complete.
- Add an empty state on the favorites page to guide users who have not saved anything yet.
- Include a favorites count badge in the navigation for cross-page visibility.
- Set Privacy Rules so users can only access their own favorites.
- Allow favoriting from multiple places — product listings, detail pages, and search results.

## Frequently asked questions

### Should I use a list field on User or a separate Favorite data type?

A list field is simpler and faster for small lists (under 50 items). A separate data type is better when you need to track when items were favorited, allow notes/tags, or handle more than 50 items per user.

### Can I let users share their favorites list?

Yes. Make the favorites page accessible with a URL parameter (user ID). Set Privacy Rules to allow viewing another user's favorites if they have enabled sharing.

### How do I notify users when a favorited item goes on sale?

Create a database trigger on the Product type: when price changes, search for users whose favorite_products contain that product, and send them an email notification.

### Will the heart icon update in real time if I favorite from another tab?

Yes, if you use a list field on User. Bubble auto-updates Current User data via WebSocket, so changes to the user record reflect across tabs.

### Can I add categories or folders to favorites?

Yes. Create a FavoriteFolder data type and link favorites to folders. This allows users to organize saved items. For complex organization systems, RapidDev can help design the data architecture.

### How do I handle favorited items that get deleted?

When a product is deleted, it remains as an empty reference in the list. Add a conditional in the favorites page RG cell: if Current cell's Product is empty, show 'This item is no longer available' and offer a remove button.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-a-favorites-list-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-a-favorites-list-in-bubble