Hello Nancy — Pre-Order System Mockups

Nine interactive HTML mockups covering the full pre-order flow, from shopper PDP to merchant admin. Built for dev handoff.

Dated 2026-04-14 · Plan: plan.md · Journeys: customer-journeys.md

Shopper journey

PDP in stock
01 · PDP

In stock — normal Add to cart

Baseline PDP. No pre-order language when inventory is available.

View live HTML
PDP pre-order OOS
02 · PDP

Out of stock — pre-order button replaces Sold out

Ship date + discounted price + card-charge disclosure.

View live HTML
PDP dual button
03 · PDP

Dual button — Buy now + Pre-order side by side

Aggressive push mode, toggled per product by merchant.

View live HTML
Cart
04 · Cart

Mixed cart with pre-order badge

Pre-order line item shows ship-date badge; in-stock coexists.

View live HTML
Checkout
05 · Checkout

Shipping step — renamed ship method

Delivery customization function rewrites the label with the ship date.

View live HTML

Merchant admin (custom app)

Dashboard
06 · Admin

Dashboard — active cohorts + upcoming dates

Tiles for cohorts live, units sold vs cap, nudges.

View live HTML
Cohorts list
07 · Admin

Cohorts list

All cohorts with ship date, discount, cap, units sold, status.

View live HTML
Cohort form
08 · Admin

Cohort create / edit (charge always at checkout)

Name, ship date, discount %, inventory cap, cancellation window, attached products.

View live HTML
Products grid
09 · Admin

Products grid — per-product mode + cohort

Off / Only when sold out / Dual button, assigned per product with cohort selector.

View live HTML