• Purpose

    • Let customers review items, update quantities, apply discounts, choose a shipping method, and proceed to checkout.

  • Primary goals

    • Clear product list and inline edits.
    • Let customers pick from available shipping methods (standard/express/local pickup) and see accurate cost + delivery estimate.
    • Keep checkout flow frictionless and transparent about shipping costs and timelines.

  • Page layout & sections

    • Header: “Shopping Bag” + item count
    • Main:
      • Cart items list (thumbnail, title, attributes/variant, price, quantity selector, remove)
      • Promo code entry & apply CTA
      • Shipping Methods selector (see details below)
      • Price summary panel (subtotal, discounts, shipping, tax, total) — sticky on desktop
      • Checkout CTA + Save for later link
    • Bottom:
      • Suggested items / Recently viewed
      • Security / payment trust icons
      • Small FAQ: shipping times, returns link (links to full Returns & Exchanges if you keep a page for that)

  • Shipping Methods section (exact behavior)

    • Title: Shipping Methods
    • Intro line: Choose how you want your order delivered — prices and delivery estimates update instantly.
    • UI:
      • If user logged-in and address on file: preselect best method and show alternatives.
      • If guest: show “Enter postal code to see available shipping methods” input (auto-focus).
      • Show a list of available methods as radio options, each with:
        • Method name (e.g., Standard Shipping, Express Shipping, Local Pickup)
        • Price (or “Free” when applicable)
        • Estimated delivery range (e.g., 3–5 business days)
        • Small carrier note or icon (e.g., DHL, USPS, Local Store Pickup)
        • Delivery cutoff info if relevant (e.g., “Order by 2 PM for next-day dispatch”)
      • Disabled options should state reason (e.g., “Not available for items over 10 kg” or “Not available to PO Boxes”)
    • Microcopy for methods:
      • Standard Shipping — Cost: $X — Delivery: 3–7 business days
      • Express Shipping — Cost: $Y — Delivery: 1–2 business days
      • Local Pickup — Cost: Free — Ready in: 1 business day (pickup at: [store location])
    • Secondary actions:
      • “See all shipping options” link opens modal with carrier terms and tracking policy
      • “Calculate shipping” button only if postal code required; otherwise selection updates total automatically

  • Exact microcopy (relevant snippets)

    • Shipping methods title: Shipping Methods
    • Postal code placeholder: Enter ZIP / postal code to view shipping options
    • Preselect label: Recommended
    • Disabled tooltip: “Not available for this address or item combination”
    • Checkout CTA: Proceed to Checkout
    • Shipping change toast: “Shipping method updated — Order total recalculated”

  • UX interactions & validation

    • Postal code format: validate local format if region-specific, otherwise allow alphanumeric.
    • Selecting a shipping method updates price summary immediately (debounced).
    • If shipping method unavailable for any item, show inline warning at that item and suggest alternatives (remove item, change shipping, or split shipments).
    • Offer fallback if no shipping methods: “We can’t ship to the provided address. Try a different address or contact support.”
    • Local Pickup flow: show store address, opening hours, and “Notify when ready” toggle.
    • When shipping methods change price/taxes, visually highlight changed rows in price summary for 2–3 seconds.

  • Accessibility & mobile

    • Radio options with descriptive labels and aria-describedby linking to estimate details.
    • Large touch targets for method options and postal code entry.
    • Ensure screen readers announce shipping cost and ETA when a method is selected.

  • Edge cases & error states

    • No methods available: show support contact with phone/chat link and “Request a quote” CTA.
    • Item-specific shipping restriction: mark item blocked and explain reason.
    • Price change after method selection: show banner “Shipping price updated for selected method” with accept button.

  • Backend / implementation notes

    • Endpoints:
      • GET /api/shipping/methods?postalCode=xxxx&cartId=yyy -> returns list of methods { id, name, cost, estimate, available, reasonIfNot }
      • POST /api/cart/shipping { cartId, shippingMethodId } -> returns updated cart totals
    • Server should return both cost and estimated delivery range per method.
    • Cache shipping quotes for short time (e.g., 5–10 minutes) but refresh if cart changes.

  • Analytics events

    • shipping_methods_viewed { cartId, postalCodePresent }
    • shipping_method_selected { method_id, method_name, cost }
    • shipping_unavailable { postalCode, reason }