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.
Manjish Glow Elixir Face Oil
30ml
2
$98.00Cart 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)
Manjish Glow Elixir Face Oil
30ml × 2
Manjish Elixir
50ml × 1
Subtotal$163.00
Common Properties
| Property | Type | Description |
|---|---|---|
| Product Data | Object | Product info (name, price, image, variants) |
| Quantity | Number | Selected quantity |
| Variants | Array | Size, color, or other options |
| Price Display | Select | Show sale price, compare at price, savings |
| CTA Text | String | Button text (Add to Cart, Buy Now, etc.) |
| Trust Badges | Boolean | Show 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
- Button Element - CTA buttons
- Quantity Picker - Quantity selector
- Progress Bar - Shipping threshold