Online-Shop
Ein Shop ist eher ein Weg als eine Seite, vom Regal über das Produkt bis zur Bestellung. Diese Components decken jede Station dieses Wegs ab, in der Reihenfolge, in der Kundschaft sie geht.
Die Reihenfolge
Von oben nach unten, so wie die Sections auf der fertigen Seite stehen.
Schritt 1 / 8 · Products
Produktraster
Das Regal, Produkte mit Preis, Bewertung und schnellem Hinzufügen, gefiltert und sortiert.
Produkte als Raster, Liste, Reihe und Lookbook, mit Filtern, Schnellansicht und Kategorien.
Schritt 2 / 8 · Kategorien und Kollektionen
Kategorien
Kategorie-Einstiege führen alle, die stöbern statt suchen, zum richtigen Regal.
Der Weg in einen Katalog. Shop-Abteilungen, Blog-Themen, Leistungsbereiche oder ein Verzeichnis, als Icon-Kacheln, Bildkarten, runde Vorschaubilder, Linkspalten oder große Namen auf einem Foto.
Schritt 3 / 8 · Product Pages
Produktseite
Galerie, Varianten, Preis und der Warenkorb-Button, die Seite, auf der die Entscheidung fällt.
Galerie, Auswahl, Bewertungen und Kaufen, vom klassischen Aufbau bis zum Konfigurator mit Live-Preis.
Schritt 4 / 8 · Bewertungen und Fragen
Produktbewertungen
Bewertungen mit Fotos und verifizierten Käufen direkt am Produkt beantworten Zweifel vor Ort.
Bewertungen als eigene Sections. Eine volle Übersicht mit Filtern, Suche und Antworten des Shops, eine Wand mit Kundenfotos, Schwerpunkte nach Thema, das Formular zum Schreiben und eine Reihe für Startseiten.
Schritt 5 / 8 · Versand und Filialen
Lieferzeit und Versand
Lieferdatum und Versandkosten vor dem Warenkorb verhindern den häufigsten Abbruchgrund.
Wann es ankommt und was es kostet. Optionen für eine Postleitzahl, der Bestellschluss von heute mit dem Weg zur Tür, Preise je Region und ein Lieferfenster zum Buchen.
Schritt 6 / 8 · Cart und Checkout
Warenkorb
Der Warenkorb zeigt Summen, Ersparnis und den Weg zum kostenlosen Versand.
Der Warenkorb als Panel, Seite, Popover, leerer Zustand und mit Zusatzangeboten.
Schritt 7 / 8 · Cart und Checkout
Kasse
Adresse, Versand und Zahlung in so wenigen Schritten wie möglich.
Von einer Seite bis Schritt für Schritt, Express-Kasse und die Bestätigung danach.
Schritt 8 / 8 · Konto und Treue
Wunschliste
Eine Merkliste holt alle zurück, die heute noch nicht kaufen wollten.
Gemerkte Produkte als Raster oder Liste, mehrere benannte Listen, eine Liste, aus der Freunde Geschenke reservieren, und Preisalarme mit Preisverlauf.
Alles auf einmal installieren
Ein Befehl legt alle Components dieser Sammlung in dein Projekt.
aiw add @ai-website/product-grid @ai-website/categories @ai-website/product-detail @ai-website/product-reviews @ai-website/shipping-estimator @ai-website/cart @ai-website/checkout @ai-website/wishlistPrompt für deinen KI-Assistenten
Gib Claude, Cursor, Copilot oder Codex die Reihenfolge mit, dann entsteht die Seite aus genau diesen Teilen.
Bau einen Online-Shop mit dem UI Kit. Nutze in dieser Reihenfolge Produktraster, Kategorien, Produktseite, Produktbewertungen, Lieferzeit und Versand, Warenkorb, Kasse und Wunschliste. 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
- 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