A shopping wishlist in Bubble uses a Wishlist Data Type linked to users with a list of Products. This tutorial covers building the data model, adding a heart icon toggle to add and remove products from the wishlist, creating a dedicated wishlist page showing saved items, implementing wishlist sharing via unique URLs, and adding a move-to-cart button for seamless purchasing.
Overview: Shopping Wishlist in Bubble
This tutorial shows you how to add a wishlist feature to your e-commerce app where users can save products for later, manage their saved items, share wishlists, and move items to their shopping cart.
Prerequisites
- A Bubble app with a product catalog
- User authentication set up
- A Product Data Type with existing records
- Basic understanding of list operations in Bubble
Step-by-step guide
Create the wishlist data model
Create the wishlist data model
You have two options. Option A: Add a 'wishlist_items' (list of Products) field directly to the User Data Type. This is simpler but limits you to one wishlist per user. Option B: Create a 'Wishlist' Data Type with: user (User), name (text — for multiple named wishlists), products (list of Products), is_public (yes/no), share_code (text — unique code for sharing). Option B is more flexible. For this tutorial, we will use Option A for simplicity with notes on upgrading to Option B.
Expected result: A wishlist structure is ready to store products for each user.
Add the heart icon toggle on product cards
Add the heart icon toggle on product cards
On each product card in your catalog, add an Icon element with a heart shape. Add a conditional: When Current User's wishlist_items contains current cell's Product → this icon is solid/filled (red). When it does not contain the product → outline heart (gray). Add a workflow when the icon is clicked: if the product IS in the wishlist, use Make changes to Current User → wishlist_items remove current cell's Product. If the product is NOT in the wishlist, use Make changes to Current User → wishlist_items add current cell's Product. Use two conditionally visible icons or a single icon with conditional styling.
Expected result: A heart icon on each product toggles between filled (in wishlist) and outline (not in wishlist) on click.
Build the wishlist page
Build the wishlist page
Create a dedicated wishlist page. Add a Repeating Group with type Product, data source: Current User's wishlist_items. Display each product with its image, name, price, stock status, and two action buttons: Remove (removes from wishlist) and Move to Cart (adds to cart and optionally removes from wishlist). Add a count display showing total items and total value if all items were purchased. If the wishlist is empty, show a friendly message with a link to the product catalog.
Expected result: A wishlist page displays all saved products with remove and move-to-cart options.
Implement wishlist sharing
Implement wishlist sharing
For shareable wishlists, generate a unique share code when a user first shares: a random text string stored on the User or Wishlist. Create a public page that accepts the share code as a URL parameter. On this page, search for the User with that share code and display their wishlist products in a read-only Repeating Group. Add a 'Share' button on the wishlist page that generates a shareable link (your-app.com/shared-wishlist?code=abc123) and copies it to the clipboard.
Expected result: Users can share their wishlist via a unique URL that anyone can view.
Add move-to-cart functionality
Add move-to-cart functionality
On the wishlist page, the Move to Cart button triggers a workflow that: adds the product to the user's shopping cart (however your cart is implemented — custom state, Data Type, or cookie), optionally removes the product from the wishlist, and shows a confirmation toast message. Add a 'Move All to Cart' button above the list that processes all wishlist items at once. Check stock availability before adding to cart and show a warning for out-of-stock items instead of adding them.
Expected result: Users can move individual or all wishlist items to their shopping cart with stock validation.
Complete working example
1SHOPPING WISHLIST SUMMARY2=====================================34DATA MODEL (SIMPLE):5 User → wishlist_items (list of Products)67DATA MODEL (ADVANCED):8 Wishlist: user, name, products (list),9 is_public, share_code1011HEART TOGGLE:12 Icon: heart on product card13 Conditional: in wishlist → solid red14 Not in wishlist → outline gray15 Click workflow:16 If in wishlist → Remove from list17 If not → Add to list1819WISHLIST PAGE:20 RG: Current User's wishlist_items21 Card: image, name, price, stock status22 Buttons: Remove, Move to Cart23 Empty state: friendly message + catalog link24 Summary: item count, total value2526SHARING:27 Generate unique share_code28 Share link: /shared-wishlist?code=abc12329 Public page: read-only wishlist display30 Copy to clipboard button3132MOVE TO CART:33 Single item: add to cart, remove from wishlist34 All items: process entire wishlist35 Stock check before adding36 Confirmation messageCommon mistakes when building a Shopping Wishlist in Bubble
Why it's a problem: Not handling the case when a wishlisted product is deleted or goes out of stock
How to avoid: Filter the wishlist display to show only active products and display an 'unavailable' badge on out-of-stock items
Why it's a problem: Allowing unauthenticated users to click the wishlist heart without prompting login
How to avoid: Add a condition: if Current User is logged out, redirect to login with a return URL instead of adding to wishlist
Why it's a problem: Using a separate Data Type for each wishlist item instead of a list field
How to avoid: Use a list of Products on the User or Wishlist Data Type for simple add/remove operations
Best practices
- Use list add/remove operations for efficient wishlist management
- Show clear visual feedback when items are added or removed
- Handle out-of-stock and deleted products gracefully
- Prompt login for guest users before allowing wishlist actions
- Provide both individual and bulk move-to-cart options
- Display product price and availability on the wishlist page
- Allow wishlist sharing via unique URLs
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a wishlist feature to my Bubble.io e-commerce app with a heart icon toggle on products, a dedicated wishlist page, and the ability to move items to the shopping cart. How should I build this?
Help me build a wishlist feature with a heart toggle on product cards, a wishlist page showing saved items with remove and move-to-cart buttons, and a shareable wishlist link.
Frequently asked questions
Should the wishlist persist after logout?
Yes. Since the wishlist is stored on the User Data Type, it persists across sessions. The user sees their saved items every time they log back in.
Can a user have multiple wishlists?
With the simple approach (list on User), no. With the Wishlist Data Type approach, yes — users can create named wishlists like 'Birthday Ideas' and 'Home Office'.
How many items can be in a wishlist?
Bubble lists can hold thousands of items. For practical usability, consider adding a limit (e.g., 100 items) and showing a message when the limit is reached.
Can I send reminders about wishlisted items?
Yes. Create a scheduled backend workflow that checks for users with wishlist items and sends periodic reminder emails, especially when wishlisted items go on sale.
Should I allow wishlists for guest users?
For the best experience, prompt login before allowing wishlist actions. You can store a temporary wishlist in a cookie or custom state, then merge it with the user's account on login.
Can RapidDev help build e-commerce features?
Yes. RapidDev can build complete e-commerce features in Bubble including wishlists, shopping carts, checkout flows, and order management.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation