figma guide
Designing sticky add-to-cart bar UI in Figma: scroll behavior, variants, and handoff
Design sticky buy bars, mobile ATC footers, and scroll-triggered purchase UI in Figma with variant summary, price, and Dev Mode specs for long PDP layouts.
- Published
- Updated
- Jun 24, 2026
- Read time
- 6 min
- Level
- Beginner
Quick answer
A sticky add-to-cart bar appears after the main buy box scrolls off-screen and collapses variant, price, and primary CTA into one fixed row. Trigger it when the original BuyBox crosses the viewport top—not on page load—so above-the-fold PDP stays uncluttered. Include thumbnail, truncated title, selected variant summary (size/color), current price, and the same ATC button states as the inline buy box (including out-of-stock → notify). On desktop, a slim top bar or bottom bar both work; on mobile, prefer bottom-fixed for thumb reach using safe-area padding. Start from the Figma guides hub.
Who this is for
- Product designers with long PDP templates—reviews, specs, and story sections push ATC below the fold.
- Design system teams keeping sticky and inline buy boxes visually and behaviorally in sync.
- Engineers implementing Intersection Observer triggers, z-index stacking, and cart drawer handoff.
Sticky bar surfaces
| Surface | Placement | Key components |
|---|---|---|
| Mobile PDP | Fixed bottom | StickyBuyBar |
| Desktop PDP | Fixed top or bottom | StickyBuyBar wide layout |
| Quick view modal | Usually none | Inline buy box sufficient |
| Cart drawer open | Hide sticky bar | Avoid duplicate CTAs |
| Checkout | Never show | Scope to PDP only |
Verdict: sticky bar is a mirror of buy box state—never a separate purchase logic. If inline ATC is disabled, sticky ATC is disabled with identical copy.
StickyBuyBar anatomy
| Zone | Content | Behavior |
|---|---|---|
| Leading | 48px thumbnail + 2-line title truncate | Tap scrolls to buy box (optional) |
| Center | Variant summary: “Blue / M” | Updates on picker change |
| Trailing | Price + primary CTA | Full-width CTA on narrow mobile |
| Secondary | Wishlist icon (optional) | Same as wishlist on PDP |
StickyBuyBar
├── Variant: visible=true | false (scroll-driven)
├── Variant: stock=in_stock | out_of_stock | low_stock
├── Variant: layout=mobile_bottom | desktop_top | desktop_bottom
├── Property: hasVariantSelected=true | false
└── Layers:
├── ProductThumb
├── TitleTruncate
├── VariantSummary
├── PriceBlock
├── PrimaryCTA
└── SafeAreaSpacer (iOS home indicator)Use Auto Layout with fill on CTA and fixed thumb size; add drop shadow or top border token from effects guide.
Scroll trigger states
| State | Condition | UI |
|---|---|---|
| Hidden | Buy box visible in viewport | No bar |
| Entering | Buy box exits top edge | Bar slides in (200ms) |
| Active | User scrolled past buy box | Bar fixed |
| Exiting | User scrolls back to buy box | Bar slides out |
| Variant error | ATC tapped without size | Bar shows error pulse; scroll to selector |
Prototype with Smart Animate between hidden/active variants; annotate threshold as “when BuyBox bottom < 0” for engineering.
Layout comparison
| Layout | Best for | Tradeoff |
|---|---|---|
| Mobile bottom bar | Thumb reach, iOS/Android web | Covers footer links—add bottom page padding |
| Desktop top bar | Long spec tables below fold | Competes with site header—coordinate z-index |
| Desktop bottom bar | Marketing sites with tall hero | Less common; test against cookie banners |
| Side mini panel | B2B catalogs | Higher dev cost; skip unless required |
Include a comparison table in Dev Mode noting z-index: sticky bar above content, below modals and toasts.
Sync with inline buy box
| Property | Must match inline buy box |
|---|---|
| Selected variant | Size, color, SKU |
| Price | Sale, compare-at, currency |
| CTA label | Add to cart / Notify me / Pre-order |
| Disabled reason | No size selected, OOS |
| Quantity | If inline shows stepper, reflect count in bar or hide qty in sticky |
| Loading | Spinner on ATC during API call |
When user changes size or color in sticky-adjacent pickers only visible inline, bar summary updates via same component properties—document shared variant state in handoff.
Mobile-specific details
| Detail | Spec |
|---|---|
| Safe area | padding-bottom: env(safe-area-inset-bottom) |
| Min tap target | CTA height ≥ 48px |
| Page padding | body bottom pad = bar height when active |
| iOS rubber-band | Bar stays fixed; do not scroll with overscroll |
| Android keyboard | Hide bar when size dropdown focused if it overlaps |
Test on mobile frame presets at 390×844 and 360×800.
Interaction with other overlays
| Overlay | Sticky bar behavior |
|---|---|
| Cart drawer | Hide sticky bar |
| Size guide modal | Hide or dim bar behind modal |
| Cookie consent | Bar stacks above consent or consent dismisses first |
| Promo banner | Offset bar top position on desktop |
| Image gallery fullscreen | Hide bar |
Document z-index stack: gallery > modal > sticky bar > site header > content.
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
| Intersection target | #buy-box element id |
| Show/hide animation | translateY + opacity tokens |
| Variant sync | Shared React/Vue store or DOM data attrs |
| ATC click | Same handler as inline button |
| Analytics | sticky_bar_view, sticky_atc_click |
| SEO / a11y | Bar is not only ATC on page—inline remains primary |
| Reduced motion | Instant show without slide |
| Cart success | Open drawer vs toast — match inline |
Use Dev Mode checklist and responsive frames for breakpoint behavior (sticky often mobile-only).
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Bar visible on load | Cluttered hero | Scroll-triggered only |
| Different price in bar | Trust loss | Single source of truth |
| Sticky without inline buy box | Thin PDP SEO/accessibility | Always keep full buy box in document |
| Bar covers checkout CTA | Accidental double cart | Scope to PDP template only |
| No variant in summary | Wrong SKU in cart | Show “Select size” until chosen |
| Ignoring cookie banner | Overlapping CTAs | Stack order spec |
| Desktop sticky on short PDP | Redundant UI | Optional minScrollDepth flag |
Recommended workflow
- Finalize inline
BuyBoxon PDP with all variant states. - Create
StickyBuyBaras sibling component sharing CTA and price subcomponents. - Define hidden/active variants with slide animation for prototype.
- Add mobile bottom layout with safe-area spacer layer.
- Design desktop alternative (top bar) if marketing wants it—mark as optional breakpoint.
- Spec scroll trigger and z-index stack in Dev Mode.
- Prototype scroll down → change variant inline → bar updates → ATC → cart drawer.
- Document hide rules for modals, cart, and gallery.
FAQ
Sticky bar on desktop too?
Many brands use mobile-only sticky bars. If desktop gets one, prefer top bar after hero scroll—bottom bars fight cookie and chat widgets.
Show quantity stepper in sticky bar?
Usually no on mobile—keep bar compact. Reflect quantity only if your inline buy box is never reachable without long scroll and qty changes are common (B2B).
Two ATC buttons bad for accessibility?
Inline buy box remains the primary landmark; sticky is supplementary. Ensure focus order returns to inline pickers when “Select size” error fires.
Sticky bar on product recommendations landing?
No—sticky buy bar is PDP-specific. Category and PLP pages use different sticky patterns (filters, sort)—not ATC.
Next steps
- Design product detail pages in Figma — inline buy box structure
- Design size guides in Figma — variant summary in bar
- Design mobile app UI frames in Figma — safe areas and thumb zones
- Design shopping cart UI in Figma — drawer after sticky ATC
- Design back-in-stock UI in Figma — notify CTA in sticky bar
§ Keep reading