# How to Build a Shopping Wishlist in Bubble

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

## TL;DR

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.

## Before you start

- 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

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

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

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

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

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

File: `Workflow summary`

```text
SHOPPING WISHLIST SUMMARY
=====================================

DATA MODEL (SIMPLE):
  User → wishlist_items (list of Products)

DATA MODEL (ADVANCED):
  Wishlist: user, name, products (list),
    is_public, share_code

HEART TOGGLE:
  Icon: heart on product card
  Conditional: in wishlist → solid red
    Not in wishlist → outline gray
  Click workflow:
    If in wishlist → Remove from list
    If not → Add to list

WISHLIST PAGE:
  RG: Current User's wishlist_items
  Card: image, name, price, stock status
  Buttons: Remove, Move to Cart
  Empty state: friendly message + catalog link
  Summary: item count, total value

SHARING:
  Generate unique share_code
  Share link: /shared-wishlist?code=abc123
  Public page: read-only wishlist display
  Copy to clipboard button

MOVE TO CART:
  Single item: add to cart, remove from wishlist
  All items: process entire wishlist
  Stock check before adding
  Confirmation message
```

## Common mistakes

- **Not handling the case when a wishlisted product is deleted or goes out of stock** — Users see broken cards or try to purchase unavailable items Fix: Filter the wishlist display to show only active products and display an 'unavailable' badge on out-of-stock items
- **Allowing unauthenticated users to click the wishlist heart without prompting login** — Guest users click the heart but nothing saves because there is no user record to attach the wishlist to Fix: Add a condition: if Current User is logged out, redirect to login with a return URL instead of adding to wishlist
- **Using a separate Data Type for each wishlist item instead of a list field** — Creating individual records for each wishlist item multiplies database records unnecessarily and makes list operations slower Fix: 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

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

---

Source: https://www.rapidevelopers.com/bubble-tutorial/build-a-shopping-wishlist-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/build-a-shopping-wishlist-in-bubble