Shop checkout
Most orders are won or lost after the product page. This path follows a customer from the first add to cart through payment to the parcel at the door and the return, and answers each question at the moment it comes up.
The order
Top to bottom, the way the sections sit on the finished page.
Step 1 / 7 · Cart and checkout
Mini cart drawer
The drawer confirms the add to cart, shows the way to free shipping and offers a fitting extra.
The cart as a drawer from the store header. A sheet on phones, a panel on larger screens, with focus kept inside and Escape to close.
Step 2 / 7 · Cart and checkout
Cart
The cart with totals, savings and delivery date, editable without a reload.
The cart as a panel, a page, a popover, an empty state and with upsells.
Step 3 / 7 · Cart and checkout
Coupon field
A calm field for codes and gift cards that never pushes people off to search for one.
Discount codes and gift cards at checkout. Codes are checked, errors say what to do next and the summary counts along.
Step 4 / 7 · Cart and checkout
Checkout
Address, delivery and payment on as few steps as possible, guest checkout first.
From one page to step by step, express checkout and the confirmation after.
Step 5 / 7 · Orders and returns
Orders
The confirmation and the order details with everything people want to look up again.
Everything after the purchase, from order history and tracking to invoice, returns and subscriptions.
Step 6 / 7 · Orders and returns
Order tracking
Tracking with a timeline and a map turns waiting into knowing.
Where the order is now. A timeline with every scan, a drawn map with the van on its way, a lookup for guests and several parcels.
Step 7 / 7 · Orders and returns
Returns flow
A return in a few steps with a label and an exchange option keeps the customer for the next order.
A return in four steps with items, reason, way back and label. As a wizard, an exchange, on one page or the label with a code.
Install all of it at once
One command puts every component of this collection into your project.
aiw add @ai-website/mini-cart-drawer @ai-website/cart @ai-website/coupon-field @ai-website/checkout @ai-website/order @ai-website/order-tracking @ai-website/returns-flowPrompt for your AI assistant
Hand Claude, Cursor, Copilot or Codex the order and it builds the page from exactly these parts.
Build a shop checkout with the UI Kit. Use Mini cart drawer, Cart, Coupon field, Checkout, Orders, Order tracking and Returns flow in this order. Write real copy for my offer and check the page in light and dark.More collections
- SaaS landing pageFrom the promise to the trial
- Local businessCafé, shop or trade around the corner
- Medical practiceTrust, hours and the next free slot
- Online shopFrom the shelf to the order
- PortfolioWork first, then the person behind it
- Blog or magazineFront page, reading and coming back
- EventProgram, tickets and the countdown
- App dashboardThe frame and the screens inside it
- AI productWhat the AI does, shown honestly
- Creator pageOne person, their work and their audience
- 3D and motionDepth that carries the message
- SaaS app screensThe work inside the product