Designing back-in-stock and notify me UI in Figma: alerts, email capture, and handoff

Quick answer

Back-in-stock UI replaces the primary ATC with a NotifyMeButton, captures email or SMS through a focused modal, and confirms with a toast—while low-stock uses inline urgency without blocking purchase. Build StockStatus variants (in_stock, low_stock, out_of_stock, preorder) bound to the buy box on PDP; reuse the same notify flow on wishlist rows and PLP cards when variants are unavailable. Never promise a date unless merchandising supplies one. Pair with forms, badges, and inline alerts. Start from the Figma guides hub.

---

Who this is for

• Product designers shipping fashion, electronics, and limited drops where inventory churn is high.
• Design system teams aligning stock messaging across PDP, cards, cart, and account notification settings.
• Engineers integrating waitlist APIs, variant-level inventory, marketing consent, and restock email triggers.

---

Stock status surfaces

Surface	Goal	Key components
PDP buy box	Purchase or notify	StockStatus, NotifyMeButton
Variant picker	Per-SKU availability	Disabled swatches + tooltip
PLP card	Set expectations early	StockBadge, muted card overlay
Wishlist row	Save + notify	NotifyToggle per line
Cart line	Prevent checkout surprise	StockErrorBanner
Notify modal	Capture contact	NotifyMeForm
Account settings	Manage alerts	NotificationPreferenceRow

Verdict: stock state lives on the variant, not the parent product—design picker + buy box as one interactive system so “Notify me” always references the selected SKU.

---

StockStatus variants

Status	Buy box CTA	Supporting copy
in_stock	Add to cart	Optional “Ships in 2–3 days”
low_stock	Add to cart	”Only 3 left” badge
out_of_stock	Notify me when available	”Currently unavailable”
preorder	Pre-order now	Ship window: “Ships June 30”
discontinued	Disabled	”No longer available” — link to related products

StockStatus
├── Variant: status=in_stock | low_stock | out_of_stock | preorder | discontinued
├── Variant: channel=web | email_restock (confirmation only)
├── Property: quantityRemaining (number, optional)
├── Property: shipDate (date, optional)
└── Layers:
    ├── StatusBadge (optional)
    ├── PrimaryCTA (ATC | NotifyMe | Preorder)
    └── HelperText

Low stock uses warning tone tokens; out-of-stock uses neutral/disabled primary button styling—not error red on the whole buy box.

---

NotifyMeButton and modal flow

Step	UI	Notes
1. Tap Notify me	Opens NotifyMeModal	Focus trap; ESC closes
2. Signed-in user	Email pre-filled, read-only optional	One-click “Notify me”
3. Guest	Email input + validation	Inline error on invalid
4. Variant summary	Thumbnail + title + selected variant	Confirm correct SKU
5. Consent	Marketing checkbox (optional, unchecked default)	Separate from transactional
6. Success	Close modal + toast	”We’ll email you when it’s back”
7. Duplicate signup	Toast info	”You’re already on the list”

NotifyMeModal
├── Variant: user=guest | signed_in
├── Variant: channel=email | sms (if supported)
├── Property: productId + variantId
└── Layers:
    ├── ProductSummary
    ├── ContactField (email or phone)
    ├── MarketingConsentCheckbox (optional)
    ├── PrivacyNote (link)
    ├── PrimarySubmit ("Notify me")
    └── SecondaryCancel

SMS flows need regional compliance copy—design as separate variant, not an afterthought.

---

NotifyMeForm field specs

Field	Validation	Error copy
Email	RFC format	”Enter a valid email address”
Phone (SMS)	E.164 or locale mask	”Enter a valid mobile number”
Consent	Required if marketing checked	”Accept terms to receive offers”

Show loading on submit button; disable double-submit. On API failure, use inline alert in modal: “Something went wrong—try again.”

---

Variant picker + inventory

Picker state	Visual	Interaction
Available swatch	Default border	Selectable
Low stock swatch	Dot indicator	Selectable + low stock copy
OOS swatch	Diagonal strike or 40% opacity	Disabled; tooltip “Out of stock”
OOS selected via URL	Fallback to first in-stock or show notify	Deep link handling note

When user selects OOS variant, swap primary CTA to Notify me automatically—do not leave a disabled Add to cart with no alternative.

---

PLP and card treatment

Inventory	Card treatment	CTA
In stock	Normal	Quick view / navigate
Low stock	”Only X left” chip	Normal
OOS	Optional gray overlay	”Notify me” text link or bell icon
Mixed variants	”Available in select sizes”	Navigate to PDP

Use ProductCard property stockSummary=available | low | oos | mixed—do not hide OOS products unless merchandising rules require it; notify captures demand.

---

Wishlist and saved items

Reuse notify modal from wishlist rows:

Row state	Primary action	Secondary
In stock	Move to cart	Remove
OOS	Notify me	Remove
Notified	”Notification on” + bell filled	Cancel alert

Cancel alert opens confirm modal—avoid silent unsubscribe with no feedback.

---

Restock confirmation and email touchpoints

Design transactional states separately from marketing emails:

Touchpoint	Content	UI in Figma
Signup confirmation	”You’re on the list”	Toast + optional email mock frame
Restock email	Product image, variant, ATC deep link	Static email artboard (optional)
Item still OOS at click	PDP with updated message	”Sold out again—join waitlist”
Unsubscribe	One-click footer	Account prefs mirror

Deep link from restock email should land on PDP with variant pre-selected and in-stock ATC if inventory confirmed.

---

Cart and checkout edge cases

Scenario	UI	Spec
Item went OOS in cart	Inline alert on line	Remove or save to wishlist
Partial quantity	Stepper caps at available	”Only 2 available”
Checkout block	Banner at top	Cannot proceed until resolved
Notify from cart	Same modal	Pre-fill variant from line

Cart errors are blocking—use error tone. PDP notify is inviting—use neutral primary for Notify me button.

---

Accessibility

Requirement	Implementation
Disabled swatches	aria-disabled + tooltip text
Status changes	Announce when variant changes stock message
Modal	Focus first field; return focus to Notify button
Toast	role="status" polite
Color	Low stock not color-only—include “Only 3 left” text
Time limits	Preorder dates in <time> element note for dev

Run contrast checks on strikethrough swatches—they still need 3:1 against background.

---

Handoff checklist

Item	Dev Mode annotation
Variant-level SKU	Notify API payload schema
Guest vs auth endpoints	Different success copy paths
Marketing consent flag	CRM vs transactional only
Duplicate signup handling	Idempotent API behavior
Restock trigger	Email + optional push
Deep link URL	?variant= param
Analytics	notify_signup, restock_email_click
Low stock threshold	Config per category
Auto-remove notify on purchase	Clear waitlist entry

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

---

Common mistakes

Mistake	Why it hurts	Fix
Product-level OOS only	Wrong variant notified	Bind status to selected SKU
Disabled ATC with no notify	Lost demand	Swap to Notify me CTA
Promising restock date	Legal/support risk	”Notify me” without date unless confirmed
Marketing opt-in pre-checked	Compliance issues	Unchecked optional checkbox
Same red as errors for low stock	Alarm fatigue	Warning token, not error
No duplicate signup state	User confusion	”Already subscribed” toast
Hiding OOS SKUs everywhere	SEO + demand loss	Show with notify on PLP

---

Recommended workflow

1. Define StockStatus variants and bind to buy box component set.
2. Build NotifyMeModal with guest and signed-in variants.
3. Update variant picker disabled + tooltip patterns for OOS swatches.
4. Extend ProductCard with stock summary and notify link.
5. Add wishlist row notified state and cancel flow.
6. Design cart OOS banner and quantity cap behavior.
7. Prototype OOS variant → notify → success toast.
8. Spec email deep link landing state on PDP.

---

FAQ

Notify me vs waitlist vs pre-order?

Notify me = alert when stock returns; no charge. Waitlist = ordered queue, sometimes with deposit. Pre-order = purchase before ship date. Use distinct CTAs and StockStatus values—do not label pre-order as notify.

Bell icon vs text button?

Text button on PDP buy box for clarity; bell icon on dense cards and wishlist rows. Keep one modal component for both entry points.

Push notifications?

If mobile app exists, add channel toggle in modal (email default on web). Design push permission primer separately—do not bundle browser push into ecommerce modal without context.

Multi-variant notify one email?

One signup per variant ID—confirm variant in modal summary. If user wants whole product, note engineering rule: notify when any variant restocks vs specific variant only.

---

Next steps

• Design product detail pages in Figma — buy box and variant inventory
• Design wishlist UI in Figma — notify on saved OOS items
• Design forms in Figma — email validation in modal
• Design badges and chips in Figma — low stock chips
• Design product recommendations in Figma — alternatives when discontinued