Shopware-Checkout: Warum mobile Kunden abbrechen

Der Warenkorb ist gefüllt, die Kaufabsicht ist da, und dann der Abbruch. Gerade auf dem Smartphone passiert das im Checkout besonders oft. In Shopware-Projekten sehe ich immer dieselben Ursachen. Dieser Artikel zeigt, wie Sie die Abbruchstellen messen, welche Anpassungen im Template und in der Konfiguration helfen und in welcher Reihenfolge Sie vorgehen.

Mann prüft auf dem Smartphone einen abgebrochenen Kauf im Shopware-Checkout, am Laptop ein Funnel-Report

Zuerst messen: Wo genau steigen Kunden aus?

Bevor Sie etwas ändern, brauchen Sie einen Trichter mit echten Zahlen. Mit Google Analytics 4 (oder einem cookiefreien Tool mit Events) bilden Sie den Checkout in Schritten ab:

Schritt	Typisches Event
Warenkorb geöffnet	`view_cart`
Checkout gestartet	`begin_checkout`
Versandart gewählt	`add_shipping_info`
Zahlart gewählt	`add_payment_info`
Bestellung abgeschlossen	`purchase`

Trennen Sie die Auswertung nach Gerätekategorie (Mobile, Desktop) und Zahlart. Häufig zeigt sich: Der Verlust konzentriert sich auf einen Schritt, zum Beispiel die Adresseingabe oder die Weiterleitung zum Zahlungsanbieter. Erst dann lohnt sich Optimierung.

Mobile First: Das Smartphone ist oft der Hauptkanal

Je nach Branche kommt inzwischen der Großteil der Bestellungen vom Smartphone. Mode, Lifestyle, Drogerie und viele Consumer-Sortimente sind typische Beispiele. Prüfen Sie in Ihren Analytics-Daten, wie hoch der mobile Anteil bei Ihnen ist. Ist er hoch, darf der Checkout nicht als verkleinerte Desktop-Seite behandelt werden. Er muss von Anfang an für das Smartphone gestaltet sein, also mit einem Mobile-First-Ansatz in Design, Template und Tests.

In der Praxis scheitert das an zwei Dingen, die ich in Projekten immer wieder sehe:

Zu schmale Formulare: Eingabefelder, die nicht die volle verfügbare Breite nutzen, Labels, die umbrechen, oder Felder nebeneinander, die auf 360 px Breite kaum noch lesbar sind. Auf dem Smartphone gehört jedes Feld untereinander und über die volle Breite.
Zu kleine Buttons: Wer mit dem Daumen tippt, braucht großzügige Flächen. Richtwert: mindestens 44 × 44 px (Apple) bzw. 48 × 48 dp (Material Design), mit ausreichend Abstand zwischen den Elementen. Der wichtigste Button, etwa “Zahlungspflichtig bestellen”, sollte über die volle Breite gehen und gut erreichbar sein.

Ein einfacher Ausgangspunkt für das Theme:

@media (max-width: 575.98px) {
  .checkout .form-control,
  .checkout .form-select {
    min-height: 48px;
    font-size: 16px;
  }

  .checkout .btn {
    width: 100%;
    min-height: 48px;
  }
}

Testen Sie den Checkout nicht nur im Browser-Emulator, sondern mit dem Daumen auf einem echten Gerät, und zwar auch auf kleinen Displays und mit großer Systemschrift.

1. Zu viele Felder und Schritte

Jedes Pflichtfeld kostet auf einem kleinen Bildschirm Geduld. In Shopware steuern Sie viel ohne Code unter Einstellungen → Shop → Login / Registrierung:

Telefonnummer nur abfragen, wenn Sie sie wirklich brauchen, und als optional markieren.
E-Mail- und Passwort-Bestätigung abschalten (requireEmailConfirmation, requirePasswordConfirmation). Auf dem Handy ist die zweite Eingabe eine Fehlerquelle.
Gastbestellung anbieten und die Registrierung erst nach der Bestellung anbieten.
Firmenfelder nur für B2B-Kundengruppen einblenden.

2. Falsche Tastaturen und fehlendes Autofill

Ein Smartphone kann Adressen nur ausfüllen, wenn die Felder korrekt ausgezeichnet sind. Prüfen Sie im Formular-Markup, ob die Attribute stimmen:

<input type="email"  name="email"      autocomplete="email" inputmode="email">
<input type="tel"    name="phone"      autocomplete="tel"   inputmode="tel">
<input type="text"   name="firstName"  autocomplete="given-name">
<input type="text"   name="lastName"   autocomplete="family-name">
<input type="text"   name="street"     autocomplete="address-line1">
<input type="text"   name="zipcode"    autocomplete="postal-code" inputmode="numeric">
<input type="text"   name="city"       autocomplete="address-level2">

Außerdem sollte die Schriftgröße in Eingabefeldern mindestens 16 px betragen. Darunter zoomt iOS beim Fokussieren in die Seite, und der Kunde verliert die Orientierung.

Änderungen am Storefront-Template machen Sie in Ihrem Theme-Plugin über Twig-Vererbung, nie im Core:

{% sw_extends '@Storefront/storefront/component/address/address-form.html.twig' %}

{% block component_address_form_zipcode %}
    {# Anpassung am PLZ-Feld, z. B. inputmode und autocomplete #}
    {{ parent() }}
{% endblock %}

3. Langsame Seiten im Checkout

Der Checkout wird nicht aus dem HTTP-Cache bedient, weil er kundenspezifisch ist. Jede Sekunde Serverzeit trifft den Kunden direkt. Prüfen Sie:

APP_ENV=prod und APP_DEBUG=0 in Produktion
OPcache aktiv und ausreichend dimensioniert
Redis oder ein vergleichbarer Cache für Sessions und Cache-Pools statt Dateisystem
Plugins, die bei jedem Warenkorb-Request externe APIs ansprechen (Versandberechnung, Adressprüfung, Rabattlogik)

Wie Sie das messen, steht im Artikel Core Web Vitals im Shopware-Shop messen.

4. Versandkosten zu spät sichtbar

Versandkosten, die erst auf der letzten Seite erscheinen, sind einer der häufigsten Abbruchgründe. Zeigen Sie dem Kunden früh:

einen Versandhinweis oder eine Schwelle für Gratisversand im Warenkorb,
voraussichtliche Lieferzeit pro Artikel auf der Produktseite,
Gesamtsumme inklusive Versand im Mini-Warenkorb.

Im Shopware-Admin können Sie Versandarten mit Regeln (Rule Builder) pflegen, sodass Kosten abhängig von Warenwert, Land oder Kundengruppe korrekt berechnet werden.

5. Zahlarten, die mobil haken

Besonders kritisch sind Zahlarten mit Weiterleitung oder Pop-up. Testen Sie jede aktive Zahlart auf echten Geräten (iOS Safari, Android Chrome) und prüfen Sie:

Kehrt der Kunde nach der Zahlung zuverlässig in den Shop zurück?
Funktioniert die Zahlart im In-App-Browser von Social-Media-Apps?
Sind Apple Pay und Google Pay verfügbar, wo sie Sinn ergeben? Sie ersparen die Eingabe von Karten- und oft auch Adressdaten.
Wie verhält sich der Shop bei fehlgeschlagener Zahlung? Bleibt der Warenkorb erhalten?

Praktische Reihenfolge

Trichter je Gerät messen und die größte Abbruchstelle identifizieren.
Formulare und Buttons mobil prüfen (volle Breite, Touch-Flächen).
Quick Wins in der Konfiguration umsetzen (Felder, Gastbestellung, Bestätigungen).
Formular-Markup und Autofill korrigieren.
Serverzeit im Checkout prüfen.
Zahlarten auf echten Geräten testen.
Nach jeder Änderung erneut messen, sonst wissen Sie nicht, was gewirkt hat.

Alle Prüfpunkte zum Abhaken finden Sie in der Shopware-Checkout-Checkliste, online oder als PDF. Der Checkout ist eine von fünf Stellen, an denen Shops Käufer verlieren. Die übrigen zeigt die Seite zur Shopware Conversion-Optimierung.

Wie dieser Ablauf in einem echten Projekt aussah, zeigt die Fallstudie mobiler Checkout eines Modehändlers. Ich biete die mobile Checkout-Optimierung als Festpreis an, typischer Umfang etwa eine Woche. Wo steigen Ihre Kunden aus? Fragen Sie jetzt Ihre Checkout-Optimierung an.