Shopping Cart and Checkout Page
A multi-step e-commerce checkout with cart summary, shipping address form, payment method, and order confirmation — optimized for high-conversion DTC stores.
Compatible with:ChatGPTv0Bolt.newCursorGitHub Copilot
Patterns:form, card-grid
Prompt
Build a multi-step shopping cart and checkout page for a DTC e-commerce brand called "Crafter Supply Co." The page should include:
1. **Sticky mini header** — Logo left ("Crafter Supply Co."), a "🔒 Secure checkout" label center (text-sm, gray-500), and a small cart icon with item count right. No full navigation — users should feel focused on completing their purchase.
2. **Progress stepper** — A horizontal 3-step progress indicator at the top of the main area: "1. Cart → 2. Shipping → 3. Payment". Active step highlighted in blue-600, completed steps show a green checkmark.
3. **Two-column layout (main area):**
- **Left column (60%) — Active step form:**
**Step 1 — Cart:**
- Line-item list. Each item: thumbnail (64×64px), product name, variant (e.g. "Color: Sage Green, Size: A4"), quantity stepper (−/+), unit price, line total, and an "× Remove" link.
- Item 1: "Kraft Paper Sketchbook A4" — Qty 2 — $14.00 each — $28.00
- Item 2: "Premium Brush Set (12pc)" — Qty 1 — $36.00 — $36.00
- Item 3: "Washi Tape Bundle (20 rolls)" — Qty 1 — $22.50 — $22.50
- Promo code input with "Apply" button.
- "Continue to Shipping →" button (blue-600, full-width).
**Step 2 — Shipping:**
- Full form: First name, Last name, Email, Phone, Address line 1, Address line 2 (optional), City, State (dropdown), ZIP, Country (dropdown).
- Shipping method selector (3 radio options with description):
- Standard (5–7 days) — Free
- Express (2–3 days) — $8.99
- Overnight (Next day) — $19.99
- "Continue to Payment →" button.
**Step 3 — Payment:**
- Saved payment methods (if logged in): credit card radio cards.
- Card number input, Expiry, CVV fields (card icons for Visa/MC/Amex).
- Billing address: "Same as shipping" checkbox.
- "Place order →" button (blue-600, full-width, large).
- **Right column (40%) — Order Summary (sticky):**
- Heading: "Order Summary"
- Item list (condensed, with thumbnails): 3 items described above
- Subtotal: $86.50
- Shipping: Free / $8.99 / $19.99 (updates on selection)
- Promo discount: -$8.65 (10% WELCOME10)
- Tax (CA, 8.25%): $6.44
- **Total: $84.29**
- "🔒 SSL encrypted. 30-day returns. Free exchanges."
4. **Order confirmation page (Step 4):** After placing order, show a centered confirmation view:
- Green checkmark icon (48px)
- "Order confirmed! 🎉" heading
- Order number: "#CSC-20260221-4817"
- "We've sent a confirmation to hello@email.com"
- Estimated delivery: Feb 26–28, 2026
- "Track your order →" and "Continue shopping →" buttons
**Design:** Clean white background, blue-600 CTAs, zinc-50 card backgrounds, Inter font. Trust badges (McAfee, SSL, Visa/MC) in footer of right column. Fully responsive — on mobile stack columns, stepper becomes a compressed label only.Mockdown
[HEADER — checkout focused]
[Logo: Crafter Supply Co.] 🔒 Secure checkout [🛒 3]
[PROGRESS STEPPER]
✅ 1. Cart ────── ● 2. Shipping ────── ○ 3. Payment
[TWO COLUMNS]
┌────────────────────────────────────────────────────┐ ┌──────────────────────────────┐
│ YOUR CART │ │ Order Summary │
│ │ │ │
│ [img] Kraft Paper Sketchbook A4 │ │ [img] Sketchbook A4 x2 │
│ Color: Sage Green, Size: A4 │ │ [img] Brush Set x1 │
│ [−] 2 [+] $28.00 [× Rem] │ │ [img] Washi Tape x1 │
│ ───────────────────────────────────────────────── │ │ ─────────────────────────── │
│ [img] Premium Brush Set (12pc) │ │ Subtotal $86.50 │
│ [−] 1 [+] $36.00 [× Rem] │ │ Shipping Free │
│ ───────────────────────────────────────────────── │ │ Promo (WELCOME10) -$8.65 │
│ [img] Washi Tape Bundle (20 rolls) │ │ Tax (CA 8.25%) $6.44 │
│ [−] 1 [+] $22.50 [× Rem] │ │ ─────────────────────────── │
│ │ │ Total $84.29 │
│ Promo code: [________________] [Apply] │ │ │
│ │ │ 🔒 SSL encrypted │
│ [Continue to Shipping → ] │ │ 🔁 30-day returns │
└────────────────────────────────────────────────────┘ │ 💳 Visa / MC / Amex │
└──────────────────────────────┘
[STEP 2 — SHIPPING FORM]
┌───────────────────────┐ ┌───────────────────────┐
│ First name │ │ Last name │
└───────────────────────┘ └───────────────────────┘
┌─────────────────────────────────────────────────┐
│ Email address │
└─────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────┐
│ Address line 1 │
└─────────────────────────────────────────────────┘
┌───────────────┐ ┌────────────┐ ┌──────────────┐
│ City │ │ State ▾ │ │ ZIP │
└───────────────┘ └────────────┘ └──────────────┘
Shipping method:
● Standard (5–7 days) Free
○ Express (2–3 days) $8.99
○ Overnight (Next day) $19.99
[Continue to Payment → ]
[STEP 3 — PAYMENT]
┌─────────────────────────────────────────────────┐
│ Card number [Visa] [MC] [Amex] │
└─────────────────────────────────────────────────┘
┌──────────────────────┐ ┌────────────────────────┐
│ Expiry (MM/YY) │ │ CVV │
└──────────────────────┘ └────────────────────────┘
☑ Billing address same as shipping
[Place order → ]
[ORDER CONFIRMATION]
┌────────────────────────────────────────────┐
│ ✅ │
│ Order confirmed! 🎉 │
│ │
│ #CSC-20260221-4817 │
│ Sent to hello@email.com │
│ Est. delivery: Feb 26–28, 2026 │
│ │
│ [Track your order →] [Continue shopping] │
└────────────────────────────────────────────┘Shopping Cart and Checkout Page
┌───────────────────────────────────────────────┐
│ Logo Search [___________] 🛒 Cart (3) │
├───────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ Product Name │
│ │ │ ★★★★☆ (128 reviews) │
│ │ ┌──────────┐ │ │
│ │ │ Product │ │ $49.99 $69.99 │
│ │ │ Image │ │ ────────────── │
│ │ │ 📷 │ │ Color: ● ○ ○ ○ │
│ │ └──────────┘ │ Size: S [M] L XL │
│ │ │ │
│ │ ○ ○ ● ○ │ Qty: [ 1 ▾ ] │
│ └──────────────────┘ │
│ [ 🛒 Add to Cart ] │
│ [ ♡ Add to Wishlist ]│
├───────────────────────────────────────────────┤
│ Description │ Reviews │ Shipping │
│ ───────────────────────────────── │
│ Premium quality product with... │
└───────────────────────────────────────────────┘Related Layouts
┌───────────────────────────────────────────────┐
│ Logo Search [___________] 🛒 Cart (3) │
├───────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ Product Name │
│ │ │ ★★★★☆ (128 reviews) │
│ │ ┌──────────┐ │ │
│ │ │ Product │ │ $49.99 $69.99 │
│ │ │ Image │ │ ────────────── │
│ │ │ 📷 │ │ Color: ● ○ ○ ○ │
│ │ └──────────┘ │ Size: S [M] L XL │
│ │ │ │
│ │ ○ ○ ● ○ │ Qty: [ 1 ▾ ] │
│ └──────────────────┘ │
│ [ 🛒 Add to Cart ] │
│ [ ♡ Add to Wishlist ]│
├───────────────────────────────────────────────┤
│ Description │ Reviews │ Shipping │
│ ───────────────────────────────── │
│ Premium quality product with... │
└───────────────────────────────────────────────┘E-Commerce
Product Listing and Catalog Page
A filterable e-commerce product catalog with a collapsible filter sidebar, grid/list view toggle, sort controls, pagination, and quick-add to cart.
--product-listing--filter--catalog
Medium
┌───────────────────────────────────────────────┐
│ Logo Search [___________] 🛒 Cart (3) │
├───────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ Product Name │
│ │ │ ★★★★☆ (128 reviews) │
│ │ ┌──────────┐ │ │
│ │ │ Product │ │ $49.99 $69.99 │
│ │ │ Image │ │ ────────────── │
│ │ │ 📷 │ │ Color: ● ○ ○ ○ │
│ │ └──────────┘ │ Size: S [M] L XL │
│ │ │ │
│ │ ○ ○ ● ○ │ Qty: [ 1 ▾ ] │
│ └──────────────────┘ │
│ [ 🛒 Add to Cart ] │
│ [ ♡ Add to Wishlist ]│
├───────────────────────────────────────────────┤
│ Description │ Reviews │ Shipping │
│ ───────────────────────────────── │
│ Premium quality product with... │
└───────────────────────────────────────────────┘E-Commerce
E-Commerce Product Detail Page
A conversion-optimized product detail page with image gallery, variant selector, add-to-cart, reviews, and related products — for DTC e-commerce stores.
--product-page--gallery--cart
Medium