Wishlist & Save-for-Later UI in Figma

Quick answer

Wishlist UI is a toggle on the product surface (heart or bookmark on cards and PDP) plus a dedicated saved-items page or drawer that reuses LineItem from cart with different actions—move to cart, remove, notify when back in stock. Build WishlistToggle with default, hover, active, and loading states; model guest (local) vs signed-in (synced) copy. Design empty, full, and error states explicitly. Pair with badges for sale alerts and toasts for add/remove feedback. Start from the Figma guides hub.

Who this is for

Product designers shipping DTC stores, marketplaces, and subscription catalogs where consideration cycles are long.
Design system teams aligning save-for-later behavior across PLP, PDP, cart, and account areas.
Engineers implementing heart toggles, list persistence, stock notifications, and cart merge rules.

Wishlist surfaces

Surface	Goal	Key components
Toggle on card	Save while browsing	`WishlistToggle` on `ProductCard`
Toggle on PDP	Save during evaluation	`WishlistToggle` in buy box
Wishlist page	Review and batch actions	`SavedItemsList`, `SavedLineItem`
Mini wishlist drawer	Quick peek (optional)	`WishlistDrawer`
Account nav badge	Count indicator	Badge on nav icon

Verdict: reuse cart LineItem layout with action=move-to-cart | remove instead of quantity steppers—one component family keeps PLP → save → cart visually consistent.

WishlistToggle anatomy

Part	Purpose	Spec tip
Icon	Heart, bookmark, or star	Outline = saved off; filled = saved on
Hit area	Touch target	Min 44×44px on mobile
Label (optional)	Screen reader / tooltip	”Save to wishlist” / “Saved”
Loading	API in flight	Spinner overlay on icon
Disabled	Out of catalog	Gray + no interaction

WishlistToggle
├── Variant: size=sm | md | lg
├── Variant: state=default | hover | active | loading | disabled
├── Property: isSaved (boolean)
└── Layers:
    ├── HitArea
    ├── Icon
    └── LoadingOverlay (optional)

Prototype with interactive components swapping isSaved and triggering a toast on the saved page.

Place the toggle top-right on product cards (does not compete with image) and near the buy box on PDP—never inside the primary CTA row.

SavedLineItem vs cart LineItem

Field	Cart `LineItem`	Wishlist `SavedLineItem`
Thumbnail	Yes	Yes
Title + variant	Yes	Yes
Price	Live price	Live price + “Price dropped” chip
Quantity stepper	Yes	No
Primary action	—	Move to cart
Secondary	Remove	Remove from wishlist
Stock state	In-cart qty limits	Out of stock + notify

When price decreases, show a badge (“−15% since you saved”)—engineers bind to price history API.

Guest vs signed-in flows

Scenario	UX	Copy
Guest taps heart	Save to device; prompt sign-in on wishlist page	”Sign in to sync across devices”
Guest opens wishlist	Local list only	Banner with sign-in CTA
Signed-in save	Immediate sync	Toast: “Saved to your list”
Merge on login	Combine local + account lists	Modal: “We merged 3 items”
Session expired	Read-only list + re-auth	Inline alert

Design all four states—guest save, guest list, signed-in list, merge modal—so engineering does not invent auth UX mid-sprint.

Wishlist page layout

WishlistPage
├── PageHeader (title + item count)
├── Toolbar (sort, share list, select all)
├── SavedItemsList
│   └── SavedLineItem × n
├── BulkActionsBar (sticky when selecting)
└── EmptyState

Toolbar action	Purpose
Sort	Date saved, price low–high, back in stock
Share	Gift registry / public list URL
Select all	Batch move to cart or remove
Filter	In stock only, on sale only

Use tables layout on desktop (image | details | price | actions) and stacked cards on mobile—same responsive pattern as cart page.

Empty and edge states

State	Visual	CTA
Empty	Illustration + short copy	”Browse products” → PLP
All OOS	List visible, CTAs disabled	”Notify me when available” per item
Item removed from catalog	Gray row + “No longer available”	Remove from list
List full (cap)	Inline alert	”Remove items to save more”
Error loading	Retry banner	”Couldn’t load your list”

Follow empty state patterns—wishlist empty is high-intent recovery: link to categories or recently viewed, not a generic homepage link.

Save-for-later inside cart

Some stores let shoppers move cart lines to wishlist without losing context:

Action	Location	Result
”Save for later”	Per cart line	Line moves to wishlist section below cart
”Move to cart”	Wishlist section	Reverse flow
Section header	Below active cart lines	”Saved for later (2)”

Reuse SavedLineItem inside the cart page—only the container changes. Document that saved lines do not count toward cart subtotal or free-shipping threshold.

Stock and price notifications

Trigger	UI	Channel
Back in stock	Bell icon on row + email toggle	Push/email (marketing)
Price drop	Badge on row	Optional digest email
Low stock	”Only 2 left” on saved item	Urgency without cart pressure

Design a Notify me modal with email field for guests and one-click confirm for signed-in users. Include unsubscribe copy in footer specs.

Accessibility

Requirement	Implementation
Toggle state	`aria-pressed` on heart button
Live updates	Toast + polite announcement region
Keyboard	Toggle focusable; list actions tab order
Color	Do not rely on red heart alone—pair with fill + label
Contrast	Outline heart meets 3:1 on product photos—use scrim if needed

Cross-check with accessibility plugins before handoff.

Handoff checklist

Item	Dev Mode annotation
Toggle sizes per surface	sm on card, md on PDP
API endpoints	Add/remove/list/merge
Guest storage key	localStorage schema note
Move-to-cart behavior	Opens cart drawer vs navigates
Price refresh cadence	Stale price max age
Notification opt-in	GDPR/marketing consent flag
Analytics	`add_to_wishlist`, `remove_from_wishlist`
Max list size	Hard cap number

Use Dev Mode checklist and semantic color tokens for sale badges.

Common mistakes

Mistake	Why it hurts	Fix
Heart with no loading state	Double-tap duplicates	Loading overlay on toggle
Separate card layout for wishlist	Visual drift from PLP	Reuse `ProductCard` + `SavedLineItem`
No guest flow	Lost saves after browse	Local persistence + sign-in prompt
Move to cart without variant check	Wrong SKU in cart	Open variant picker if needed
Hidden wishlist entry	Feature unused	Nav icon + count badge
OOS items look purchasable	Support tickets	Disabled move + notify CTA

Recommended workflow

Define WishlistToggle with size and state variants.
Place toggles on ProductCard and PDP buy box in existing files.
Build SavedLineItem by forking cart LineItem actions column.
Compose wishlist page with toolbar, list, empty, and bulk bar.
Add guest/sign-in banners and merge modal.
Spec cart “save for later” section if in scope.
Prototype heart toggle → toast → wishlist page → move to cart.
Mobile pass with sticky bulk actions and 44px targets.

FAQ

Heart icon or bookmark?

Heart is universal for B2C fashion and lifestyle; bookmark reads better for B2B catalogs and spec-heavy products. Pick one icon system-wide.

Public wishlists / gift registries?

Add Share list in toolbar → generates read-only URL. Design owner vs viewer modes: viewers see products without edit actions.

Multiple wishlists?

If supported, use dropdown on save: “Add to… Wedding / Everyday.” Default list handles 80% of cases—advanced lists are optional.

Wishlist count on nav badge?

Show count capped at 99+; hide badge at zero. Animate increment on save only if motion respects reduced-motion preference.

Next steps

Design product detail pages in Figma — save toggle in buy box
Design shopping cart UI in Figma — save-for-later section
Design product listing grids in Figma — heart on cards
Design empty states in Figma — zero saved items

Designing wishlist and save-for-later UI in Figma: hearts, lists, and handoff