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.
Prerequisites
- 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
Choose Your Data Structure
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.
Add the Favorite Toggle Button to Product Listings
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.
Create the Toggle Favorite Workflow
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.
Build the Favorites Page
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.
Add a Favorites Count Badge
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 working example
1DATA STRUCTURE (Option A — list on User):2- User (modified)3 - favorite_products (list of Product)45DATA STRUCTURE (Option B — separate type):6- Favorite7 - user (User)8 - item (Product)9 - created_date (date)1011PAGE: Product listing (Repeating Group cell)12- Icon Heart13 - Default: gray outline heart14 - Conditional: When Current User's favorite_products contains Current cell's Product → red filled heart1516WORKFLOWS:171. Heart icon clicked (add favorite)18 Only when: Current User's favorite_products does not contain Current cell's Product19 → Make changes to Current User: favorite_products add Current cell's Product20212. Heart icon clicked (remove favorite)22 Only when: Current User's favorite_products contains Current cell's Product23 → Make changes to Current User: favorite_products remove Current cell's Product2425PAGE: favorites26- RepeatingGroup FavoriteItems27 - Type: Product28 - Source: Current User's favorite_products29 - Cell: product image, name, price, View button, Remove button30- Group EmptyState (visible when count = 0)31 - Text: "You haven't saved any favorites yet"32 - Button: "Browse Products" → Go to page products3334NAVIGATION:35- Icon Heart + Text badge (Current User's favorite_products:count)36 - Badge visible when count > 0Common mistakes when building a favorites list in Bubble
Why it's a problem: Using 'Do a Search for' instead of the User's list field to check favorites
How to avoid: Use 'Current User's favorite_products contains Current cell's Product' — this checks the already-loaded user data without an extra search.
Why it's a problem: Forgetting to handle the case where the user is not logged in
How to avoid: Add 'Only when Current User is logged in' to the favorite workflow. Show a login prompt for anonymous users.
Why it's a problem: Using a list field for very large favorites lists (100+ items)
How to avoid: 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.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a favorites/wishlist feature to my Bubble.io e-commerce app. Users should be able to click a heart icon to save products, see a filled heart for saved items, and view all favorites on a dedicated page. Should I use a list field on User or a separate data type?
Add a favorites feature. Add a favorite_products list field on User. On product listings, add a heart icon toggle that adds/removes products from the list. Create a favorites page showing all saved products with remove buttons and an empty state.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation