One Page Checkout
Ultimate.

Der Standard-Checkout von Shopware führt Ihre Kunden über mehrere Seiten: Warenkorb, Anmeldung, Adresse, Bestätigung. Jeder dieser Wechsel ist eine Gelegenheit zum Abbruch — besonders auf dem Handy.

One Page Checkout Ultimate legt alles auf eine einzige Seite unter /checkout/one-page: Kundendaten, Adresse, Versandart, Zahlungsart, Produktübersicht, Gutscheinfeld und Bestell-Button sind von Anfang an sichtbar. Wer trotzdem gehen will, bekommt das Exit-Intent-Popup mit einem echten Gutscheincode aus Ihrem Shopware-Promotion-System.

Systemanforderungen: Shopware 6.7.0 oder neuer, PHP 8.2 oder neuer, beliebiges Theme mit Theme-Build nach der Installation. Für den Exit-Intent-Gutschein brauchen Sie eine aktive Promotion mit Aktionscode (Kapitel 13); PayPal ist optional und nur für den Express-Schnellabschluss nötig (Kapitel 10). Technischer Name: BmaniaOnePageCheckoutUltimate.

Installation:

1. bin/console plugin:refresh
2. bin/console plugin:install --activate BmaniaOnePageCheckoutUltimate
3. bin/console theme:compile
4. bin/console cache:clear

Alternativ laden Sie das ZIP-Archiv im Administrationsbereich unter Erweiterungen › Meine Erweiterungen hoch und aktivieren es dort.

Die ersten Schritte:

1. Konfiguration öffnen: Erweiterungen › Meine Erweiterungen › One Page Checkout Ultimate › Konfiguration. Stellen Sie oben den richtigen Verkaufskanal ein.
2. Farben setzen: mindestens Primärfarbe und Button-Farbe an Ihr Theme anpassen (Kapitel 6). Alle Farbfelder sind leer vorbelegt und erben dann vom Theme.
3. Testbestellung auslösen: als Gast einen Artikel bestellen und den kompletten Weg bis zur Bestellbestätigung gehen.
4. Gutschein einrichten: erst wenn der Checkout sitzt, das Exit-Intent-Popup und seine Promotion aufsetzen (Kapitel 11 bis 13).

Wo welche Einstellung wohnt. Die Einstellungen liegen bewusst an drei Stellen — jede hat ihre eigene Aufgabe. Wenn Sie ein Feld suchen, ist es genau in einem dieser drei Bereiche:

• Erweiterungen › Konfiguration — Aktivierung, Layout, Farben, Texte des Checkouts (Kapitel 5 bis 7).
• Marketing › Exit Intent — Popup, Trigger, Häufigkeit, Gutschein, Popup-Editor (Kapitel 11 bis 18).
• Einstellungen › Plugins › Checkout-Felder — Sichtbarkeit, Pflicht, Breite, Reihenfolge und Beschriftung jedes Feldes (Kapitel 8).

Global oder pro Verkaufskanal. Beide Konfigurationsseiten kennen einen Verkaufskanal-Umschalter. Was Sie unter „Alle Verkaufskanäle“ speichern, gilt als Ihr Standard. Wählen Sie einen einzelnen Kanal, bekommt nur dieser eigene Werte — der Rest folgt weiter dem Standard (Kapitel 19).

Ein Klick auf „Zur Kasse“ führt Gäste wie angemeldete Kunden direkt auf die One-Page-Seite. Diese Abschnitte erscheinen dort in dieser Reihenfolge:

• Express-Bereich — Anmelde-Link und der Platz für den PayPal-Express-Button.
• Gast oder Kundenkonto — Umschalter mit einer frei editierbaren Vorteils-Box.
• Kundendaten und Adresse — Anrede, Name, E-Mail, Anschrift; optional mit abweichender Lieferadresse.
• Versandart und Zahlungsart — immer sichtbar, nicht ausblendbar.
• Gutscheincode — auf Wunsch als eigener nummerierter Schritt.
• Newsletter — optionaler Schritt mit eigenem Vorteilstext.
• Bestellübersicht — Produkte und Summen, auf Wunsch mitlaufend fixiert.
• AGB und Widerruf — volle Breite über dem Bestell-Button.
• Bestell-Button — mit optionalem Hinweistext darunter.

Karten „Allgemein“ und „One-Page-Layout“:

• One Page Checkout Ultimate aktivieren — Hauptschalter; aus bedeutet, das Plugin greift nirgends ein (Standard: an).
• One-Page-Layout aktivieren — schaltet den One-Page-Checkout ab, ohne das Exit-Intent-Popup zu verlieren (Standard: an).
• Anordnung der Schritte — untereinander oder nebeneinander (Standard: untereinander).
• Schritt-Nummern anzeigen — nummerierte Kreise vor jeder Sektionsüberschrift (Standard: an).
• Bestellübersicht fixieren — die Zusammenfassung läuft beim Scrollen mit (Standard: an).
• Zusammenfassung separat scrollen — gibt der Übersicht eine eigene Scrollfläche (Standard: aus).
• Gutscheincode als eigenen Schritt anzeigen — statt als Feld in der Warenkorb-Karte (Standard: an).
• Anrede als Buttons — Schaltflächen statt Auswahlliste (Standard: an).
• Kompakte Formularfelder — Beschriftung sitzt als Platzhalter im Feld, spart Höhe (Standard: an).
• Express-Bereich oben anzeigen — Anmelde-Link und PayPal-Express-Slot am Seitenkopf (Standard: an).

Elf Farbfelder, alle leer vorbelegt, alle mit Theme-Rückfall. Jedes Feld ist ein Farbwähler; solange es leer bleibt, gilt der Wert aus Ihrem Theme. Sie müssen also nur die Farben setzen, die tatsächlich abweichen sollen:

• Primärfarbe — Akzente, aktive Zustände, Anrede-Buttons.
• Button-Farbe und Button-Textfarbe — Fläche und Beschriftung des Bestell-Buttons.
• Überschriften-Farbe und Textfarbe — Sektionsüberschriften und Fließtext.
• Farbe der Vorteils-Häkchen — Häkchen in der Konto-Vorteils-Box.
• Hintergrund der Hervorhebungs-Boxen — Fläche hervorgehobener Kästen.
• Farbe des Gutschein-Häkchens — Bestätigung nach eingelöstem Code.
• Rahmenfarbe der Sektionen — Umrandung der Schritt-Karten.
• Hintergrundfarbe des Checkouts und der Karten — Fläche hinter allen Karten bzw. der einzelnen Schritt-Karten.

Was über, neben und unter dem Checkout steht — und wann der Standardtext greift:

• Überschrift über dem Checkout — Titel der Seite, zugleich Meta-Titel.
• Text unter der Überschrift — Einleitung in eigenen Worten, komplett abschaltbar.
• Hinweistext unter dem Bestell-Button — kurzer Hinweis direkt am Abschluss, mit eigenem Text überschreibbar.
• Vorteils-Box am Kundenkonto-Umschalter — Argumente für ein Kundenkonto neben der Gast-Wahl, mit eigener Überschrift; Konto-Vorteile nimmt einen Vorteil pro Zeile, jeder bekommt ein Häkchen.
• Newsletter-Schritt im Checkout — optionaler Anmelde-Schritt mit eigenem Vorteilstext.

Unter Einstellungen › Plugins › Checkout-Felder liegen alle Formularfelder in drei Gruppen: Kundendaten, Adresse sowie Versand, Zahlung & Abschluss. Jede Zeile bietet dieselben Stellschrauben:

• Sichtbar — blendet das Feld im Checkout aus.
• Pflichtfeld — macht das Feld verpflichtend; System-Pflichtfelder sind gesperrt.
• Spaltenbreite — volle oder halbe Breite; zwei halbe Felder stehen nebeneinander.
• Reihenfolge — Pfeile verschieben das Feld innerhalb seiner Gruppe.
• Eigenes Label, Platzhalter und Hilfetext — jeweils in Deutsch und Englisch; leer = Textbaustein.

Verwaltet werden: Gast-/Registrierungs-Umschalter, Anrede, Vorname, Nachname, E-Mail-Adresse, Firma, USt-IdNr., Telefon, Straße und Hausnummer, Adresszusatz, Postleitzahl, Ort, Land, Bundesland, abweichende Lieferadresse und Bestellkommentar.

Was im Hintergrund passiert. Sobald die Adresse eines Gastes vollständig ist, registriert das Plugin ihn im Hintergrund — ohne Seitenwechsel und ohne dass der Kunde etwas davon merkt. Die gewählte Versand- und Zahlungsart bleibt dabei erhalten.

Ein Klick auf „Zahlungspflichtig bestellen“ genügt dann: Registrierung und Bestellung laufen in einem Zug, ohne Neuladen der Seite. Der Kunde landet direkt auf der Bestellbestätigung.

Angemeldete Kunden melden sich über den Express-Bereich am Seitenkopf an und finden ihre Adressen vorausgefüllt vor. Der Rest der Seite verhält sich identisch.

Normalerweise führt der PayPal-Express-Button zurück in den Checkout, wo der Kunde ein zweites Mal bestätigen muss. Mit aktivem Schnellabschluss läuft es so:

1. AGB zuerst: Der Express-Button wird erst klickbar, wenn die AGB-Checkbox angehakt ist.
2. PayPal zeigt „Jetzt bezahlen“: Der Kunde weiß damit, dass sein Klick die Bestellung auslöst.
3. Automatischer Abschluss: Nach der Rückkehr finalisiert das Plugin die Bestellung hinter einem Vollbild-Hinweis und führt direkt zur Bestätigung.

Bestellt wird dabei exakt der Warenkorb, den der Kunde bei PayPal bestätigt hat — ein älterer gespeicherter Warenkorb wird nicht hineingemischt. Ändert sich die Summe dennoch, greift dieselbe Regel wie in Kapitel 9: keine automatische Bestellung, der Kunde bestätigt die neue Summe.

Das Popup und alles, was dazugehört, konfigurieren Sie unter Marketing › Exit Intent. Löst ein Trigger aus (Kapitel 12), erscheint das Angebot; ein Klick auf den Button holt einen Code aus Ihrer Promotion und löst ihn bei aktivem Auto-Einlösen sofort ein — die Summen aktualisieren sich ohne Neuladen.

Karte „Aktivierung“:

• Exit-Intent-Popup aktivieren — Hauptschalter (Standard: an).
• Auf Warenkorb-Seite anzeigen und Auf Checkout-Seite anzeigen (Standard: beide an).
• Gutschein automatisch einlösen — aus bedeutet: dem Kunden wird nur der Code angezeigt (Standard: an).

Anzeige-Häufigkeit: einmal pro Session (Standard), einmal pro Tag, einmal pro Kunde (solange derselbe Browser genutzt wird) oder immer (Testmodus). Der Merker liegt im Browser des Kunden, nicht in Ihrem Shop — für eigene Tests genügt deshalb ein privates Fenster.

Vier Auslöser, jeder einzeln schaltbar und feinjustierbar:

• Maus verlässt das Fenster (Standard: an) — öffnet das Popup, wenn die Maus die Seite nach oben verlässt, der typische Weg zum Tab-Schließen. Nur Desktop. Die Maus-Sensitivität legt fest, ab wie vielen Pixeln unter der Oberkante die Bewegung als Verlassen zählt (Standard: 20 px).
• Zurück-Button (Standard: an) — öffnet das Popup auf Touch-Geräten beim Druck auf Zurück; die Seite bleibt stehen.
• Inaktivitäts-Timer (Standard: aus) — öffnet das Popup nach einer Zeit ohne Scrollen, Maus- oder Tastatureingabe (Standard: 30 Sekunden).
• Schnelles Hochscrollen (Standard: aus) — öffnet das Popup beim raschen Scrollen nach ganz oben; der Schwellwert liegt bei 400 px in einem Zug.
• Klick auf Overlay schließt (Standard: an) — die Escape-Taste funktioniert immer.

Das Popup erfindet keine Rabatte. Es gibt Codes aus einer Promotion aus, die Sie in Shopware anlegen — Rabatt-Typ, Höhe, Mindestbestellwert und Gültigkeit pflegen Sie an der Promotion selbst, nicht hier.

So richten Sie den Gutschein ein:

1. Promotion anlegen: unter Marketing › Promotions mit Rabatt-Typ, Höhe, Mindestbestellwert und Zeitraum.
2. Aktionscodes aktivieren: in der Promotion „Aktionscodes benötigt“ einschalten und die Code-Art wählen — fester Aktionscode oder individuelle Einmal-Codes.
3. Code-Pool erzeugen: bei individuellen Codes einen Pool in der gewünschten Menge generieren.
4. Promotion verknüpfen: in der Karte „Gutschein“ auswählen und aktiv schalten.

Die Statusmeldung lesen: Bereit — freie Einmal-Codes im Pool oder ein fester Aktionscode steht bereit. Promotion inaktiv oder abgelaufen — das Popup bleibt aus, bis Sie die Promotion aktivieren oder ihren Zeitraum verlängern. Keine Codes — keine Promotion verknüpft, kein nutzbarer Code oder der Pool ist aufgebraucht; es wird kein Gutschein ausgegeben.

Ein Klick auf eine Design-Karte trägt die passenden Farben und Radien in die Felder ein. Sie sehen die Werte und können jeden davon gezielt ändern.

• Minimal Clean — viel Weißraum, große Typografie, weiche Schatten (Standard).
• Glassmorphism — halbtransparente Fläche mit Blur-Effekt.
• Aurora Gradient — sanft animierter Mehrfarbverlauf über drei Farben.
• Neo-Brutalism — harte Kanten, kräftige Flächen, Offset-Schatten.
• Dark Luxe — dunkles Panel mit edlem Akzentrand.
• Neon Glow — dunkler Grund mit leuchtendem Neon-Rand und Glow-Button.

Farben, Position und Animation: Akzentfarbe (führt Button, Rahmen und Leuchteffekte), Hintergrund und Textfarbe der Popup-Box, bei Aurora zusätzlich Verlaufsfarbe 2 und 3; Eckenradius in Pixeln; Overlay-Deckkraft von 0 (durchsichtig) bis 100 (schwarz), Standard 60. Die Position ist zentriert über der Seite oder eine Leiste unten; als Animation stehen Einblenden (Standard), von unten oder oben gleiten, Aufpoppen, 3D-Kippen, Federn oder keine zur Wahl.

Bild-Anordnung. Vier Varianten: Bild oben (Standard), Bild links, Bild rechts und Split, bei dem das Bild eine halbe Popup-Seite füllt. Der Bildabstand zum Rand steuert, wie viel Luft zwischen Bild und Popup-Kante bleibt — 0 ergibt ein randloses Bild in jedem Layout.

Größe und Format:

• Größe des Popups — fünf Stufen von sehr klein bis sehr groß; skaliert Breite, Abstände und Schrift gemeinsam (Standard: Mittel).
• Format des Popups — automatisch (folgt dem Inhalt), Querformat, quadratisch oder Hochformat (Standard: automatisch).
• Eigene Breite — überschreibt die Größen-Stufe und wirkt in jedem Format, auch im Hochformat.
• Innenabstand und Bildabstand zum Rand — leer folgt dem Standard des gewählten Layouts.

• Überschriften-Ebene — semantisches HTML-Element H1 bis H4, relevant für SEO und Screenreader (Standard: H3).
• Überschrift (px) und Fließtext (px) — eigene Schriftgrößen.
• Ausrichtung (Angebot) — volle Breite (Standard), links, zentriert oder rechts; die Ausrichtung (Erfolgsansicht) lässt sich getrennt setzen oder mit „Wie Angebot“ übernehmen.
• Ecken-Radius — 0 = kantig, hohe Werte wie 999 = Pillenform.
• Abstand nach oben und Abstand zum Rand — Abstand zwischen Text und Button bzw. zwischen Button und Popup-Kante; 0 = bündig.

Leere Felder folgen der Größen-Stufe beziehungsweise dem gewählten Design. Alle Zahlenfelder aktualisieren die Vorschau bei jedem Tastendruck.

Angebot — was der Kunde zuerst sieht:

• Überschrift — die Zeile, die den Absprung unterbricht.
• Fließtext — das Angebot in ein bis zwei Sätzen.
• Button-Text — Beschriftung des Buttons, der den Gutschein anfordert.

Erfolgsansicht — nach dem Klick:

• Erfolgs-Überschrift — Titel, nachdem der Rabatt gesichert wurde.
• Text: automatisch eingelöst — erscheint, wenn das Auto-Einlösen aktiv ist und geklappt hat.
• Text: manuell einlösen — erscheint, wenn der Kunde den Code selbst im Gutscheinfeld eingeben soll.
• Button-Text der Erfolgsansicht — Beschriftung des Schließen-Buttons.

Das Feld „Eigenes CSS“ liefert Ihre Regeln unverändert als Style-Block mit dem Popup aus. Sie überschreiben damit jede Einstellung aus dem Popup-Editor — das ist der letzte Schritt in der Reihenfolge: Design, dann Editor-Felder, dann Ihr CSS.

Die wichtigsten Klassen:

• .bmania-ocu-ei__dialog — die Popup-Box selbst
• .bmania-ocu-ei__headline — Überschrift
• .bmania-ocu-ei__text — Fließtext
• .bmania-ocu-ei__cta — Button

Die Vorschau im Administrationsbereich spiegelt Ihr CSS live wider. Sie wird dafür auf die Vorschau begrenzt und die Storefront-Klassennamen werden automatisch übersetzt — was Sie in der Vorschau sehen, kommt so auch im Shop an.

Der Umschalter „Einstellungen gelten für“ steht anfangs auf „Alle Verkaufskanäle“. Was Sie dort speichern, ist Ihr globaler Standard und gilt überall. Wählen Sie einen einzelnen Kanal, sehen Sie die dort wirksamen Werte — zunächst also die globalen. Sobald Sie speichern, bekommt dieser Kanal eine eigene Kopie und folgt dem globalen Standard nicht mehr. Alle anderen Kanäle bleiben unberührt.

1. Global einrichten: erst unter „Alle Verkaufskanäle“ alles so einstellen, wie es meistens passen soll.
2. Ausnahme wählen: den abweichenden Kanal im Umschalter auswählen.
3. Nur das Nötige ändern: anpassen und speichern — der Kanal führt ab jetzt eigene Werte.
4. Bei Bedarf zurücknehmen: „Kanal-Einstellungen entfernen“ löscht die Ausnahme; der Kanal folgt wieder dem globalen Standard.

Cache und Theme. Farben, Layout und Texte landen im Seiten-Cache. Nach Änderungen leeren Sie den Cache und laden die Storefront hart neu. Nach Installation und nach jedem Update gehört zusätzlich ein Theme-Build dazu:

1. bin/console theme:compile
2. bin/console cache:clear

Sprachen. Alle Standardtexte liegen in Deutsch und Englisch vor und folgen der Sprache des Verkaufskanals. Eigene Texte gelten dagegen sprachübergreifend — wer je Sprache unterschiedliche Formulierungen braucht, arbeitet mit getrennten Verkaufskanälen (Kapitel 19). Feld-Beschriftungen im Checkout sind je Sprache hinterlegbar (Kapitel 8).

Updates. Ihre Einstellungen bleiben bei einem Update erhalten. Prüfen Sie danach den Checkout und — falls Sie eigenes CSS nutzen — das Popup.

One Page Checkout Ultimate ist ein Werkzeug für die Darstellung Ihres Checkouts, keine Rechtsberatung. Ob Ihre Pflichtangaben vollständig sind, ob Rabatte zulässig ausgelobt werden und ob Ihre Datenschutzerklärung alles abdeckt, kann es nicht prüfen.

Die Runde nach der Einrichtung:

1. Testbestellung als Gast — kompletter Weg bis zur Bestellbestätigung, mit einer Adresse, die Versandkosten auslöst.
2. Testbestellung als Kunde — angemeldet, mit gespeicherter Adresse und abweichender Lieferadresse.
3. Auf dem Handy — auf einem echten Gerät, nicht nur im Simulator; gerade das Popup verhält sich dort anders.
4. AGB und Widerruf — sichtbar, anklickbar, vollständig? Bestellung ohne Haken nicht möglich?
5. Gutschein einlösen — Popup auslösen, Code erhalten, Summe prüfen und danach den Pool-Füllstand kontrollieren.
6. Promotion-Zeitraum — läuft die verknüpfte Promotion ab, bleibt das Popup stumm. Termin notieren.
7. Testmodus zurückstellen — Anzeige-Häufigkeit von „Immer“ auf einen echten Wert setzen (Kapitel 11).

Mein Checkout sieht aus wie vorher. Woran liegt das? Meist am Cache oder am fehlenden Theme-Build. Prüfen Sie in dieser Reihenfolge: beide Hauptschalter an, Werte im richtigen Verkaufskanal gespeichert, theme:compile gelaufen, Cache geleert, Seite hart neu geladen.

Das Popup erscheint bei mir nie. Ist es kaputt? Wahrscheinlich nicht. Die Anzeige-Häufigkeit merkt sich im Browser, dass Sie es schon gesehen haben — testen Sie in einem privaten Fenster. Prüfen Sie außerdem, ob eine Promotion verknüpft und gültig ist; ohne Gutschein bleibt das Popup absichtlich aus.

Brauche ich PayPal für dieses Plugin? Nein. Ohne PayPal funktioniert der komplette One-Page-Checkout einschließlich Exit-Intent. Nur der Express-Schnellabschluss (Kapitel 10) setzt ein aktives SwagPayPal voraus und wird sonst schlicht übersprungen.

Kann ich Versandart oder Zahlungsart ausblenden? Nein, das ist bewusst nicht vorgesehen. Beide Sektionen bleiben immer sichtbar, weil ein Ausblenden in der Praxis nur zu Bestellungen ohne brauchbare Auswahl geführt hat.

Werden meine Bestellungen anders verarbeitet? Nein. Die Bestellung läuft über den nativen Shopware-Bestellabschluss — mit allen Zahlarten, Steuerberechnungen und Belegen. Deaktivieren Sie das Plugin, übernimmt wieder Shopwares Standard-Checkout; bestehende Bestellungen bleiben unverändert.

Wo bekomme ich Hilfe? Über den Support-Kontakt im Shopware-Account oder direkt bei der Gründerkind GmbH. Halten Sie Shopware-Version, Plugin-Version und die betroffene Stelle bereit.