Kurze Antwort
Ein Versandrechner im Warenkorb-Drawer sollte die Frage nach Ziel und Kosten beantworten, ohne den Drawer in einen zweiten Checkout zu verwandeln. Platziere ihn nahe der Zwischensumme oder des Checkout-Buttons, halte den eingeklappten Zustand kompakt, erhalte die Schließen- und Checkout-Elemente des Drawers, berechne nach Warenkorbänderungen neu und teste Tastatur, Touch, Smartphone und das Verhalten nach Theme-Updates. Da Drawer theme-spezifisch sind, muss die Kompatibilität auf genau dem Live-Theme geprüft werden.
Die Hauptaufgabe des Drawers erhalten
Der Warenkorb-Drawer dient dazu, den Warenkorb zu prüfen und weiter einzukaufen oder zum Checkout zu gehen. Ein Versandrechner sollte diese Entscheidung unterstützen, nicht dominieren. Nutze einen kurzen Hinweis, schrittweises Aufklappen und kompakte Ergebnisse, die neben Zwischensumme und Checkout-Elementen lesbar bleiben.
Bei Warenkorbänderungen aktualisieren
Eine veraltete Berechnung ist schlimmer als gar keine. Hinzufügen, Entfernen oder Mengenänderungen können Gewicht, Zwischensumme, Profilkombinationen und den Anspruch auf kostenlosen Versand verändern. Der Rechner sollte seinen Kontext aktualisieren oder klar um eine neue Berechnung bitten.
Für schmalen, dynamischen Raum gestalten
Drawer sind oft schmal und scrollbar. Verhindere horizontales Überlaufen, halte Touch-Ziele komfortabel groß, verdecke nicht den Checkout-Button und kündige geänderte Ergebnisse für Hilfstechnologien an. Ein Ladezustand sollte Platz reservieren, damit der Drawer nicht springt.
Nach Theme-Änderungen erneut testen
Themes können bei einem Update das Drawer-Markup, Klassennamen oder das Rendering ändern. Notiere Version und genutzten Selektor und nimm den Rechner in jeden Regressionstest nach Theme-Updates auf.
Checkliste
- Sichtbar nahe Zwischensumme oder Checkout
- Kompakter eingeklappter Zustand
- Kein horizontales Überlaufen
- Checkout-Button bleibt erreichbar
- Neuberechnung nach Warenkorbänderungen
- Lade- und „Kein Tarif“-Zustand passen hinein
- Tastaturfokus bleibt logisch
- Ergebnisänderungen werden angekündigt
- Auf dem Smartphone getestet
- Theme-Updates lösen erneute Tests aus
Fragen
Nutzt jedes Shopify-Theme denselben Warenkorb-Drawer?
Nein. Markup und Verhalten der Drawer unterscheiden sich je nach Theme und Version, daher muss die Kompatibilität getestet werden.
Sollte sich der Rechner automatisch öffnen?
Halte ihn meist kompakt, bis der Kunde eine Berechnung anfordert – es sei denn, der Versand ist im Sortiment die entscheidende Frage.
Wo sollten Ergebnisse erscheinen?
Halte die Ergebnisse nah an Eingabe und Zwischensumme, während der Checkout-Button sichtbar und nutzbar bleibt.
Quellen
Seiten der Shopify-Hilfe können sich auf Englisch öffnen.