Cart and Order Placement Page Design for Website
Cart and checkout are the last steps before payment. Losses peak here: average abandoned cart rate in e-commerce is 70%. Design of these screens directly impacts conversion — every extra step, every confusing form, every unexpected shipping cost is a lost order.
Cart: Full Page or Sidebar
Two architectural approaches:
Full cart page (/cart) — traditional. Suitable for large carts with complex selection (multiple addresses, gift options). SEO-indexable.
Sidebar/Drawer cart — slides out on item add, keeps current page. Accelerates impulse buys. Not suitable for 10+ item carts — vertical scroll awkward.
Most shops: drawer for quick view + full /cart page for detailed editing.
Cart Page Design
Item list. Each includes:
- Product photo (clickable, links to page)
- Name + selected variants (color, size)
- Price per unit
- Quantity counter (−/+/input)
- Line total
- Delete button
- "Save for later" link (wishlist move)
Order summary (fixed right desktop, bottom mobile):
Items (3): 24 870 ₽
Discount −20%: −4 974 ₽
Code SAVE10: −1 990 ₽
Shipping: Free
──────────────────────
Total: 17 906 ₽
[Proceed to Checkout]
Promo code field. Expandable (collapses by default) — doesn't waste space. Active code shows name and amount. Invalid code — inline error without reload.
Cross-sell in cart. Horizontal carousel "Add to order" with quick add without page transition. Limit to 4–6 items, don't clutter.
Checkout: One-Page vs Multi-Step
One-page checkout — all fields visible or expand section by section. Fewer clicks, higher visual cognitive load.
Multi-step (step-by-step) — standard for most shops. Progress bar top:
① Contacts → ② Shipping → ③ Payment → ④ Confirmation
Mobile: multi-step always better — each step fits screen.
Step 1: Contact Details
Email: [________________]
We'll send order confirmation
Phone: [+7 (___) ___-__-__]
For delivery clarifications
☐ Already registered [Sign In →]
First name: [________________]
Last name: [________________]
Guest checkout mandatory. Registration requirement drives 20–35% abandonment. Offer account creation after successful payment ("Save your data for next purchase — takes 5 seconds").
Autofill. All fields need proper autocomplete attributes: autocomplete="email", autocomplete="tel", autocomplete="given-name", autocomplete="family-name".
Step 2: Shipping
Delivery method:
◉ Courier to door
Moscow: 299 ₽ (free from 3 000 ₽)
Delivery: Mar 14–15
○ Pickup point [CDEK / PickPoint / Boxberry]
38 locations in Moscow — [Select on map]
○ Russian Post
4–7 business days, from 199 ₽
──── When "Courier" selected ────
Street: [__________________________]
Building: [____] Apartment: [____]
Entrance: [__] Floor: [___]
Intercom: [________]
Courier note: [__________________________]
Integrated pickup point map (Yandex.Maps or Leaflet) with partner filters. Selection on map → address and hours auto-populate.
Date and time slot. Calendar with available dates (unavailable grayed), then time slots (9:00–13:00, 13:00–18:00, 18:00–22:00).
Step 3: Payment
Payment method:
◉ Bank card
[____________________] [MM/YY] [CVV]
☐ Save for next orders
[Visa] [Mastercard] [MIR]
○ SBP (Fast Payments System)
Instant, no fee
○ Cash to courier
Change from 5 000 ₽
○ 0% Installment
Tinkoff / Sber / Halva
──────────────────────────────
Order with payment obligation:
Total: 17 906 ₽
[✓ Place Order]
By ordering, you agree to
Terms and Privacy Policy
Security icons next to pay button: SSL lock, PCI DSS, payment logos.
3D Secure / SCA. Design accommodates modal for bank confirmation — embedded iframe, not redirect.
Step 4: Confirmation
✓ Order #48291 placed!
Confirmation sent to [email protected]
──────────────────────
MacBook Pro 14" M3 Pro × 1 ......... 189 990 ₽
AppleCare+ (1 year) × 1 ......... 12 990 ₽
──────────────────────
Total: 202 980 ₽
Shipping: Moscow, Example St., 1, apt. 42
Courier, Mar 15, 13:00–18:00
──────────────────────
[Track Order] [Continue Shopping]
Create account to track orders:
[Email] [Create Password] [Register]
Form Validation
Inline validation, not on submit. Errors appear after blur (focus loss), not during input:
Phone: [+7 (123) ]
↑ Enter correct phone number
Green checkmark on correct field. "Next" button active only on valid form — but show what's incomplete on attempt.
State Preservation
Cart stored in localStorage + synced with server on auth. Checkout form stored in sessionStorage — user can reload without data loss.
Timelines
Cart page design (desktop) — 2–3 days. Full checkout design: cart + 3 steps + confirmation, desktop + mobile, all states and form errors — 7–12 days. Design with A/B testing variants (CTA, layout, steps) — additional 2–4 days.