Shop-Checkout
Die meisten Bestellungen entscheiden sich nach der Produktseite. Dieser Weg begleitet Kundschaft vom ersten Hinzufügen über die Zahlung bis zum Paket an der Tür und zur Retoure und beantwortet jede Frage in dem Moment, in dem sie aufkommt.
Die Reihenfolge
Von oben nach unten, so wie die Sections auf der fertigen Seite stehen.
Schritt 1 / 7 · Cart und Checkout
Warenkorb-Seitenleiste
Die Schublade bestätigt das Hinzufügen, zeigt den Weg zum Gratisversand und bietet ein passendes Extra an.
Der Warenkorb als Seitenleiste aus dem Shop-Header. Am Telefon ein Sheet, sonst ein Panel, mit gehaltenem Fokus und Escape.
Schritt 2 / 7 · Cart und Checkout
Warenkorb
Der Warenkorb mit Summen, Ersparnis und Lieferdatum, änderbar ohne Neuladen.
Der Warenkorb als Panel, Seite, Popover, leerer Zustand und mit Zusatzangeboten.
Schritt 3 / 7 · Cart und Checkout
Gutscheinfeld
Ein ruhiges Feld für Codes und Gutscheine, das niemanden auf die Suche danach schickt.
Rabattcodes und Gutscheinkarten an der Kasse. Codes werden geprüft, Fehler sagen, was hilft, und die Übersicht zählt mit.
Schritt 4 / 7 · Cart und Checkout
Kasse
Adresse, Versand und Zahlung in so wenigen Schritten wie möglich, Gastbestellung zuerst.
Von einer Seite bis Schritt für Schritt, Express-Kasse und die Bestätigung danach.
Schritt 5 / 7 · Bestellungen und Retouren
Bestellungen
Die Bestätigung und die Bestelldetails mit allem, was man später noch einmal nachsieht.
Alles nach dem Kauf, von Bestellübersicht und Sendungsverlauf bis zu Rechnung, Rücksendung und Abo.
Schritt 6 / 7 · Bestellungen und Retouren
Sendungsverfolgung
Die Sendungsverfolgung mit Zeitstrahl und Karte macht aus Warten Wissen.
Wo die Bestellung gerade ist. Ein Verlauf mit jeder Meldung, eine Karte mit Lieferwagen, eine Suche für Gäste und mehrere Pakete.
Schritt 7 / 7 · Bestellungen und Retouren
Retourenablauf
Eine Retoure in wenigen Schritten mit Etikett und Umtausch hält die Kundschaft für die nächste Bestellung.
Eine Retoure in vier Schritten mit Artikel, Grund, Rückweg und Etikett. Als Assistent, Umtausch, auf einer Seite oder als Etikett.
Alles auf einmal installieren
Ein Befehl legt alle Components dieser Sammlung in dein Projekt.
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 für deinen KI-Assistenten
Gib Claude, Cursor, Copilot oder Codex die Reihenfolge mit, dann entsteht die Seite aus genau diesen Teilen.
Bau einen Shop-Checkout mit dem UI Kit. Nutze in dieser Reihenfolge Warenkorb-Seitenleiste, Warenkorb, Gutscheinfeld, Kasse, Bestellungen, Sendungsverfolgung und Retourenablauf. Schreib echte Texte für mein Angebot und prüf die Seite in Light und Dark.Weitere Sammlungen
- SaaS-LandingpageVom Versprechen bis zum Test
- Lokales GeschäftCafé, Laden oder Handwerk um die Ecke
- ArztpraxisVertrauen, Sprechzeiten und der nächste freie Termin
- Online-ShopVom Regal bis zur Bestellung
- PortfolioErst die Arbeit, dann der Mensch dahinter
- Blog oder MagazinTitelseite, Lesen und Wiederkommen
- EventProgramm, Tickets und der Countdown
- App-DashboardDas Gerüst und die Screens darin
- KI-ProduktWas die KI tut, ehrlich gezeigt
- Creator-SeiteEine Person, ihr Werk und ihr Publikum
- 3D und BewegungTiefe, die die Botschaft trägt
- SaaS-App-ScreensDie Arbeit im Produkt