Bundle & Upsell UI in Figma

Quick answer

Bundle and upsell UI spans three moments: PDP “Frequently bought together,” dedicated bundle pages, and cart/checkout add-ons. A bundle row shows 2–4 products, individual prices struck through, bundle total, and one “Add all to cart” CTA. Upsells in cart use compact cards with single-line benefit—not full PLP grids. Kit builders need slot-based selection with required vs optional items and live price recalculation. Always show savings amount (“Save $18”) beside pricing tokens. Start from the Figma guides hub and templates pillar.

Who this is for

Product designers increasing AOV on DTC, marketplace, and subscription-adjacent stores.
Design system teams standardizing bundle cards, kit slots, and cart upsell modules.
Engineers implementing dynamic bundle SKUs, inventory checks, and discount rule engines.

Bundle types map

Type	User goal	Primary surface
Fixed bundle	Buy preset kit	PDP module or bundle landing
FBT (frequently bought together)	Add complementary items	PDP below buy box
Mix-and-match kit	Choose variants in slots	Dedicated builder page
Cart upsell	Last-minute add-on	Cart drawer or checkout sidebar
Post-purchase upsell	One-click add to shipped order	Confirmation page (rare)

Verdict: design BundleRow (FBT) and KitBuilder first—they cover 80% of bundle UX; cart upsell reuses the same product mini-card.

FrequentlyBoughtTogether row

Element	Spec	Notes
Section title	”Frequently bought together”	Or “Complete the set”
Product tiles	3 max visible + overflow	80–96px thumb
Plus separators	Between tiles	Not on mobile—use vertical stack
Checkbox per item	Pre-checked main SKU	Uncheck removes from bundle
Bundle price	Sum with strike-through	Highlight savings
Add all CTA	Primary button	Disabled if OOS item
Savings badge	Chip “Save 15%”

FrequentlyBoughtTogether
├── Variant: layout=horizontal | stacked
├── Variant: itemCount=2 | 3 | 4
├── Property: savingsAmount=18.00
├── Property: savingsPercent=15
└── Layers:
    ├── SectionTitle
    ├── ProductTile (repeat)
    ├── PlusSeparator
    ├── CheckboxRow
    ├── PriceSummary
    ├── SavingsBadge
    └── AddAllButton

Place on PDP after buy box or below reviews. Mobile: vertical stack with checkboxes left-aligned.

ProductTile (bundle context)

Part	Spec
Thumbnail	Link to PDP
Title	2 lines max
Variant selector	Inline dropdown if needed
Price	Current + optional strike
Stock state	OOS grays tile + unchecks
Checkbox	Toggles inclusion in bundle total

Reuse card spacing tokens at smaller density—do not import full PLP card.

Fixed bundle landing page

Block	Content
Hero	Bundle name, hero image, savings headline
Included items list	Expandable rows with qty
Price block	Compare-at vs bundle price
Add bundle CTA	Sticky on mobile optional
FAQ	Return policy for partial bundle

Link from category pages and PLP badges (“Bundle deal”).

KitBuilder (mix-and-match)

Slot	Behavior
Required base	Pre-selected, locked
Optional add-ons	Checkbox or slot picker
Variant pick	Per-slot dropdown
Running total	Updates on every change
Validation	”Select a size for Item 2” inline

KitBuilder
├── Variant: mode=fixed | flexible
├── Property: slotCount=3
└── Layers:
    ├── SlotRow (repeat)
    │   ├── SlotLabel
    │   ├── ProductPicker
    │   ├── VariantDropdown
    │   └── SlotPrice
    ├── TotalBar
    ├── SavingsLine
    └── AddKitButton

Show progress when slots have dependencies—pair with steppers for 4+ steps.

Cart upsell module

Pattern	When	UI
Single card	One high-confidence SKU	Image + title + “Add for $X”
Carousel	Multiple add-ons	Horizontal scroll
Threshold prompt	Free shipping gap	Progress bar + suggested SKU
Warranty / care plan	High-ticket	Toggle row in summary

CartUpsell
├── Variant: type=product | shippingThreshold | protection
├── Property: dismissible=true
└── Layers:
    ├── UpsellTitle
    ├── MiniProductCard
    ├── AddButton
    └── DismissLink

Place below line items, above coupon field. Never block checkout CTA.

Pricing and discount display

Rule	UI treatment
Bundle discount	Show pre-bundle subtotal struck through
Percent vs fixed	Prefer “Save $X” when > $5
Stacking	If coupons disallowed, note inline
Per-item allocation	Engineering only—optional tooltip
Tax recalc	Loading state on total bar

Align with pricing UI and BNPL callouts on bundle totals.

Inventory and error states

State	UI
One item OOS	Uncheck + “Out of stock” on tile
Partial bundle ship	Split shipment note in cart
Bundle SKU deprecated	Redirect to components list
Max qty	Inline error on add
Region restriction	Hide bundle module entirely

Use inline alerts for cart-level bundle errors.

Handoff checklist

Item	Dev Mode annotation
Bundle SKU ID	Master vs component SKUs
Checkbox default state	Which items pre-selected
Price calculation	API vs client-side preview
OOS behavior	Disable add vs partial add
Analytics	`bundle_view`, `bundle_add`, `upsell_add`
Coupon stacking rules	Boolean flags
Mobile layout breakpoint	Stack vs horizontal
Accessibility	Checkbox labels include product name

Use Dev Mode checklist and interactive components for checkbox and add-button states.

Common mistakes

Mistake	Why it hurts	Fix
FBT with 6+ products	Choice paralysis	Cap at 3–4
Hidden savings	Weak conversion	Always show “Save $X”
Separate add buttons per item	Defeats bundle intent	One “Add all” primary
Upsell above cart totals	Blocks checkout	Below items
No variant pick in bundle	Wrong SKU orders	Per-tile dropdown
Strike price without context	Legal/trust issues	Label “Was” / “Individually”
Kit builder without running total	Abandonment	Sticky total bar
Same upsell on every PDP	Irrelevance	Personalization slot in spec

Recommended workflow

Define bundle types with merchandising—fixed, FBT, kit, cart upsell.
Build ProductTile and FrequentlyBoughtTogether with checkbox and OOS states.
Design KitBuilder slots with variant dropdowns and validation.
Add CartUpsell module to cart/checkout templates.
Create fixed bundle landing hero + included-items list.
Document SKU rules, stacking, and analytics in Dev Mode.

FAQ

FBT on quick view?

Compact 2-item row only—full FBT belongs on full PDP.

Show bundle on PLP card?

Use “Bundle” badge—not full FBT row.

Subscription bundles?

Add frequency selector and “Subscribe & save” line—pair with pricing tokens.

Compare with compare products?

Different intent—bundles are complementary SKUs, compare is spec tables.

Gift bundles?

Add gift message slot at kit builder step—link gift card UI if applicable.

Next steps

Design product detail pages in Figma — FBT placement
Design shopping cart and checkout UI in Figma — cart upsell module
Design price tags and pricing UI in Figma — bundle savings display
Design product recommendations UI in Figma — personalized upsell logic
Design order confirmation UI in Figma — post-purchase add-on (optional)

Designing bundle deals and upsell UI in Figma: kits, frequently bought together, and handoff