Brand Design System

Order Box Components

5 e-commerce components for shopping cart, checkout, and order management functionality.

Conversion Critical: These components directly impact purchase completion. Ensure they're clear, fast, and trustworthy.

Add to Cart Box

Primary purchase interface shown on product detail pages.

$49.00$65.00Save 25%
1
✓ Free Shipping✓ 30-Day Returns

Cart Item

Individual product row in the shopping cart.

Product thumbnail

Manjish Glow Elixir Face Oil

30ml

2
$98.00

Cart Summary

Order totals section with itemized breakdown.

Order Summary

Subtotal (3 items)$163.00
ShippingFREE
Discount (SAVE20)-$32.60
Total$130.40

Tax included. Shipping calculated at checkout.

Secure checkout powered by Stripe

Free Shipping Progress

Motivational progress bar to encourage larger orders.

You're $35 away from FREE shipping!
$65$100 for free shipping

Mini Cart

Compact cart preview for header dropdown or sidebar.

Your Cart (3)

Product thumbnail

Manjish Glow Elixir Face Oil

30ml × 2

$98.00
Product thumbnail

Manjish Elixir

50ml × 1

$65.00
Subtotal$163.00

Common Properties

PropertyTypeDescription
Product DataObjectProduct info (name, price, image, variants)
QuantityNumberSelected quantity
VariantsArraySize, color, or other options
Price DisplaySelectShow sale price, compare at price, savings
CTA TextStringButton text (Add to Cart, Buy Now, etc.)
Trust BadgesBooleanShow shipping/return guarantees

Usage Guidelines

✓ Do

  • Make the Add to Cart button prominent
  • Show clear pricing and any savings
  • Include trust signals (secure checkout, returns)
  • Provide immediate feedback on actions
  • Show free shipping progress to encourage upsells

✗ Don't

  • Hide the price or make it hard to find
  • Require login before adding to cart
  • Make quantity adjustment difficult
  • Skip confirmation after adding to cart
  • Use confusing or misleading pricing

Related Components