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.

E-CommerceComplexecommerce
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