Im Warenkorb können Kunden überprüfen und bearbeiten, was sie kaufen möchten. Diese Beispiele umfassen vollständige Seiten und Drawer mit unterschiedlich viel Platz für Konfigurationen, Lieferinformationen und optionale Extras. Die Bestellung selbst muss in beiden Formaten übersichtlich bleiben.
TRNK öffnet nach dem Hinzufügen einen separaten Warenkorb. Der Artikel enthält Konfigurations- und Fulfilment-Details, Mengenregler und Anweisungen des Verkäufers. Die aufgezeichnete Seite hat keine Empfehlungsleiste, was Platz lässt, um die Möbelbestellung vor dem Checkout zu überprüfen.
Für deinen Shop
Nutze eine vollständige Seite, wenn die Bestellung Details enthält, die eine sorgfältige Überprüfung erfordern.
CW&T unterteilt seinen Desktop-Warenkorb in Einzelpositionen, Kosten und den zu zahlenden Gesamtbetrag. Variantenbezeichnungen, Menge und das Entfernen bleiben beim Produkt; Checkout- und Versandkontext stehen bei der Gesamtsumme. Monospaced-Text setzt das Styling des Shops in dieser praktischen Zusammenfassung fort.
Für deinen Shop
Trenne die Artikelbearbeitung von der abschließenden finanziellen Zusammenfassung.
FINEX bietet sowohl einen Drawer als auch einen separaten Warenkorb. Der Drawer bestätigt Größe, Geschenkoptionen und Gesamtsumme, während die Seite eine größere Artikeltabelle und Express-Checkout-Optionen bietet. Beim Wechsel zwischen beiden sollten die gleichen Auswahlen und Beträge erhalten bleiben.
Für deinen Shop
Halte Auswahlen und Summen zwischen dem Warenkorb-Drawer und der vollständigen Seite identisch.
GSI Outdoors öffnet ein Panel auf der rechten Seite mit Thumbnail, Titel, Preis, Mengenreglern und geschätzter Gesamtsumme. Der Versandfortschritt befindet sich über dem Artikel und eine kleine Empfehlungsleiste darunter. Die abgedunkelte Seite im Hintergrund bewahrt den Browsing-Kontext, während die Bestellung überprüft wird.
Für deinen Shop
Beginne mit einer vollständigen, gut lesbaren Bestellzusammenfassung.
Heart Coffee Roasters enthält neben der Zusammenfassung und dem Versandfortschritt eine Eingabeaufforderung für Bestellnotizen. Der Drawer öffnet sich, nachdem das Produkt hinzugefügt wurde. Ein solches Feld ist nur dann sinnvoll, wenn das Fulfilment-Team auf die Anfragen reagieren kann, wie z.B. relevante Zubereitungshinweise.
Für deinen Shop
Frage nur nach zusätzlichen Bestellinformationen, wenn sie auch jemand nutzt.
Athletic Brewing platziert eine Geschenk-Nachrichten-Option neben Artikelsteuerungen, Mitgliedschaftsinfos und Empfehlungen. Das Feld öffnet sich bei Bedarf. Bei optionalen Inhalten müssen die Gesamtsumme und der Checkout trotzdem leicht erreichbar bleiben, besonders auf kleinen Bildschirmen.
Für deinen Shop
Mache sekundäre Aufgaben verfügbar, ohne jede Bestellung in ein langes Formular zu verwandeln.
Der aufgezeichnete Drawer von Jonathan Adler enthält die aktuelle Bestellsumme direkt im Checkout-Button. Er hat in diesem Zustand keine Empfehlungsleiste oder Anzeige des Versandfortschritts. Jede Artikelbearbeitung muss diese wiederholte Summe aktualisieren, damit die Aktion weiterhin den korrekten Betrag anzeigt.
Für deinen Shop
Platziere die aktuelle Gesamtsumme neben dem Checkout-Button und aktualisiere sie nach jeder Bearbeitung.
Slowdown Studio gruppiert Notizen und Versand in ausklappbare Bereiche unter dem bearbeitbaren Artikel. Empfohlene Decken belegen ein benachbartes Panel mit eigenen Hinzufügen-Buttons. Die Bestellung und Vorschläge bleiben getrennt, mit praktischen Details in der Nähe des Checkouts.
Für deinen Shop
Gruppiere sekundäre Warenkorb-Aufgaben unter klaren Labels.
House of Spoils zeigt Informationen zu Mitgliedschafts-Ersparnissen innerhalb einer einfachen Bestellzusammenfassung. Der aufgezeichnete Zustand hat weder Cross-Sells noch Versandfortschritt. Die Nachricht muss die Bedingungen für die Ersparnis nennen, damit ein neuer Kunde den angezeigten Preis versteht.
Für deinen Shop
Kläre die Bedingungen hinter einer angezeigten Ersparnis.
DedCool zeigt ein automatisches Duftgeschenk als kostenlose Einzelposition an, mit einem mehrstufigen Reward-Balken darüber. Probeauswahlen und ein Reisespray-Angebot bieten weitere Auswahlmöglichkeiten darunter. Eine klare Gruppierung ist nötig, um bezahlte Artikel, enthaltene Geschenke und optionale Zusätze im vollen Panel voneinander zu unterscheiden.
Für deinen Shop
Trenne enthaltene Geschenke von optionalen Zusätzen und erkläre die Reward-Schwellenwerte neben der Bestellung.
Dinosaur Designs integriert Versandkosten-Schätzungen und Rabattcode-Bereiche in seinen Drawer. Kunden können diese prüfen, bevor sie zum Checkout weitergehen. Der aufgezeichnete Warenkorb erfordert zudem die Akzeptanz der AGB, ein separater Schritt, der einen klaren Zweck benötigt, wenn er woanders übernommen wird.
Für deinen Shop
Mache Lieferkosten und Rabatte vor dem Checkout einfach überprüfbar.
Olli Ella hat auf dem Desktop ein benachbartes Empfehlungs-Panel. Ihr mobiler Drawer konzentriert sich auf die Bestellung und behält die Rabatteingabe über der Zwischensumme. Die Menge an sekundären Inhalten ändert sich mit dem verfügbaren Platz, damit essenzielle Überprüfungs-Elemente zugänglich bleiben.
Für deinen Shop
Sorge dafür, dass Bestelldetails und Checkout auf kleinen Bildschirmen leicht erreichbar bleiben.
Appointed zeigt Varianten-Attribute zusammen mit dem Preis und den Mengenreglern. Format oder Seitenlayout können der Grund sein, warum sich ein Kunde für das Notizbuch entschieden hat, daher müssen diese Details lesbar bleiben. Der Versandfortschritt führt zur Zwischensumme und zur Checkout-Aktion.
Für deinen Shop
Wiederhole die spezifische Option, die für den Kauf wichtig ist.
Experiment listet ein qualifizierendes Geschenk als separaten Artikel mit einem Preis von null auf. Ein Bundle-Vorschlag darunter hat eine andere Rolle: Er ist weiterhin optional. Wenn eine Bearbeitung die Berechtigung für das Geschenk aufhebt, müssen sich das angezeigte Geschenk und die Gesamtsumme aktualisieren, ohne einen unerklärten Artikel zu hinterlassen.
Für deinen Shop
Unterscheide zwischen dem, was enthalten ist, und dem, was lediglich angeboten wird.
Tower 28 platziert ein Proben-Karussell unter dem gekauften Artikel, mit einer Hinzufügen-Aktion für jede Auswahl. Der Versandfortschritt ist separat. Der Warenkorb sollte auch die gewählte Probe identifizieren und es einfach machen, sie zu ändern, um die optionale Auswahl von der bezahlten Ware getrennt zu halten.
Für deinen Shop
Mache optionale Auswahlen klar, begrenzt und einfach zu ändern.
Wähle den Platz, den deine Bestellungen benötigen. Ein Drawer kann ein einfaches Hinzufügen bestätigen, während die Produktseite weiterhin sichtbar bleibt. Eine ganze Seite bietet mehr Platz für konfigurierte Artikel, mehrere Produkte oder längere Erklärungen zum Versand. FINEX bietet beides an; TRNK gibt konfigurierten Möbeln eine vollständige Bestellseite. Vergleiche die Komplexität dieser Käufe mit deinen eigenen.
Sorge dafür, dass der ausgewählte Artikel, seine Optionen und die Menge in beiden Layouts gut lesbar bleiben. Platziere Geschenknachrichten oder Bestellhinweise in der Nähe des entsprechenden Artikels oder der Bestelldetails. Die Beispiele für Warenkorb-Drawer zeigen kompakte Layouts im Detail, einschließlich der Art und Weise, wie sich ihr Inhalt nach dem Hinzufügen ändert.
Der Warenkorb ist der Ort, um eine Bestellung vor dem Checkout zu überprüfen und zu bearbeiten. Gib der Checkout-Aktion einen klaren Bezug zur Gesamtsumme und erkläre Kosten, die erst später berechnet werden. Jonathan Adler integriert die Gesamtsumme in seinen Checkout-Button; Dinosaur Designs bietet ausklappbare Kosteninformationen. Beide beantworten Fragen, die Käufer möglicherweise haben, bevor sie fortfahren.
Teste einen leeren Warenkorb, einen Artikel, mehrere Artikel und einen nicht verfügbaren Artikel. Ändere Mengen und entferne ein Produkt. Ein Geschenk sollte von einem bezahlten Zusatzartikel unterscheidbar bleiben, und ein Mitgliederpreis sollte seine Bedingungen erklären. DedCool und Experiment zeigen Geschenke als separate Artikel an. Lass nicht zu, dass Empfehlungen die vom Kunden bereits ausgewählte Bestellung verdecken.
Wähle den Platz, den die Bestellung erfordert. Ein Drawer kann das Hinzufügen bestätigen, während die aktuelle Seite sichtbar bleibt. Eine ganze Seite bietet komplexen Konfigurationen und längeren Bestellungen mehr Raum. Einige Shops bieten beides an.
Produkte, gewählte Optionen, Mengen, Preise, Gesamtsumme und die Checkout-Aktion. Erkläre alle verbleibenden Kosten oder wiederkehrenden Bedingungen und mache Änderungen sowie das Entfernen von Artikeln unkompliziert.
Nur, wenn die Vorschläge relevant sind und die Überprüfung der Bestellung weiterhin einfach bleibt. Unterscheide sie deutlich von den bereits enthaltenen Artikeln und aktualisiere die Gesamtsumme sichtbar, wenn etwas hinzugefügt wird.
Im Warenkorb können Kunden Produkte, gewählte Optionen und Mengen überprüfen, bevor sie fortfahren. Im Checkout werden die für die Bestellung erforderlichen Informationen wie Liefer- und Zahlungsdetails erfasst. Ein Drawer ist lediglich eine andere Art, den Warenkorb darzustellen; er ersetzt den Checkout nicht.
Führe sie separat von bezahlten Artikeln auf und mache ihren Preis deutlich. Wenn ein Geschenk an eine Bestellbedingung geknüpft ist, erkläre diese Bedingung und aktualisiere den Warenkorb, falls der Kunde nicht mehr dafür qualifiziert ist. Kunden sollten genau wissen, was tatsächlich geliefert wird.
Gib Fudge ein Ziel und eine Referenz. Das Tool schlägt Änderungen für deinen Shop vor, erstellt einen Entwurf in deinem Shopify-Theme und gibt dir Rückmeldung. Du überprüfst jede Änderung, bevor sie live geht.
Sieh dir an, wie der Shop-Editor funktioniert