Shopify-Warenkorb optimieren: IDEAL

Ein Produkt liegt im Warenkorb. Jetzt möchte der Kunde die Auswahl prüfen, vielleicht etwas ergänzen und wissen, was die Bestellung kostet. Bei IDEAL haben wir den Kaufweg mit einem eigenen Ajax-Drawer überarbeitet. Die Warenkorbübersicht öffnet sich direkt im Shop, während die Produktseite im Hintergrund erhalten bleibt.

Cart Page und Drawer lösen dieselbe Aufgabe unterschiedlich

Eine klassische Cart Page öffnet eine eigene Seite für die Bestellung. Das bietet Platz und kann bei umfangreichen Warenkörben gut funktionieren. Ein Drawer legt sich über die aktuelle Seite. Wer weiter einkaufen möchte, schließt ihn und bleibt an derselben Stelle.

Shopify-Themes können unterschiedliche Warenkorbtypen anbieten. Der Wechsel zum Drawer allein macht noch keinen guten Kaufweg. Entscheidend ist, wie verständlich die Auswahl, Änderungen, Kosten und der nächste Schritt darin sind.

Im IDEAL-Projekt haben wir diesen Bereich nach dem Shopify-Relaunch weiterentwickelt. Die hier gezeigte Ansicht stammt aus dem Shop. Sie zeigt den Drawer mit zwei Artikeln und den Bereich für die Bestellung.

1. Die Auswahl prüfen und ändern

Produktbild und Bezeichnung müssen die Auswahl wiedererkennbar machen. Bei IDEAL stehen die Mengensteuerung und der Preis direkt am Artikel. Kunden müssen dafür nicht zurück zur Produktseite.

Teste den Ablauf mit einem langen Produkttitel, mehreren Artikeln und einer Menge, die nicht verfügbar ist. Nach einer Änderung müssen Artikelzahl, Preis und Gesamtsumme denselben Stand zeigen. Während eine Anfrage läuft, darf ein zweiter Klick nicht unbemerkt eine andere Bestellung erzeugen.

2. Versand und Gesamtbetrag zusammen zeigen

Der IDEAL-Drawer zeigt den Versandstatus oberhalb der Artikel. Im Abschlussbereich stehen Zwischensumme, Versand, enthaltene Mehrwertsteuer und Gesamtbetrag beim Button zur Kasse. Diese Informationen beantworten die Kostenfrage dort, wo der nächste Schritt folgt.

Ein Versandbalken braucht passende Regeln für Land, Rabatt und Warenkorbwert. Zeige kostenlosen Versand nur, wenn er für die aktuelle Situation gilt. Prüfe auch, was passiert, wenn ein Kunde einen Artikel wieder entfernt und unter eine Grenze fällt.

3. Empfehlungen mit direktem Hinzufügen

Der Drawer hat einen eigenen Bereich für zusätzliche Produkte. Ein Kunde kann einen Vorschlag direkt hinzufügen und die Bestellung danach weiter bearbeiten. Der Button zur Kasse bleibt im Abschlussbereich.

Wähle Empfehlungen nach dem Produkt und der Aufgabe des Kunden. Bei Zubehör zählt die Passform beziehungsweise Kompatibilität. Ein allgemeiner Bestseller ist nicht automatisch die beste Ergänzung. Prüfe außerdem, ob die Vorschläge nach einer Änderung noch zur Auswahl passen und tatsächlich verfügbar sind.

4. Auf dem Handy den ganzen Ablauf prüfen

Öffne den Drawer nach einem Produktklick und gehe jede Aktion durch. Sind die Mengenregler gut erreichbar? Kannst du durch eine längere Liste scrollen, ohne den Checkout zu verlieren? Lässt sich der Cart schließen und anschließend wieder öffnen, ohne die Auswahl zu verlieren?

Auch Tastatur und Screenreader gehören in die Prüfung. Der Fokus muss in den geöffneten Dialog wechseln und nach dem Schließen zum Auslöser zurückkehren. Fehlermeldungen brauchen verständlichen Text, und der Kauf darf nicht von einer Animation abhängen.

Eine kurze Abnahme für dein Cart-Projekt

Ein Produkt hinzufügen, Menge ändern und Artikel entfernen.
Zwei Varianten desselben Produkts korrekt auseinanderhalten.
Rabatt, Versand und Gesamtbetrag gegen den Checkout prüfen.
Nicht verfügbare Mengen und unterbrochene Anfragen verständlich behandeln.
Empfehlungen hinzufügen und die aktualisierte Bestellung kontrollieren.
Leerzustand, lange Produktnamen, Handy, Tablet und Tastatur testen.

Für die technische Umsetzung bietet Shopify die Ajax Cart API. Eine erfolgreiche Anfrage und eine vollständig aktualisierte Oberfläche müssen zusammen geprüft werden. Der Kunde sollte immer erkennen, ob seine Änderung übernommen wurde.

Was wir nach dem Umbau ansehen

Betrachte den Weg vom Warenkorb zum Checkout und bis zur Bestellung. Warenkorbwert, bestellte Artikel und Erlös pro Besucher helfen bei der Auswertung. Empfehlungen sollten zur Bestellung beitragen, ohne den Abschluss schwerer zu machen. Bei ausreichend passenden Daten kann ein A/B-Test die Varianten vergleichen.

Ein weiteres Projekt ist das vollständige ahead Ajax-Cart-Revamp. Wenn du deinen eigenen Warenkorb angehen möchtest, findest du die Zusammenarbeit unter Shopify CRO und Shopify Entwicklung.