Checkout-Seite gestalten
Der Seiten-Editor: Bereiche und Elemente, welche Bausteine es gibt, Formularfelder und Pflichtangaben, AGB- und Widerrufs-Einwilligungen, Feldlayout für B2B und die Preisanzeige mit Ersparnis.
Die Checkout-Seite ist das Design deiner Bezahlseite, unabhängig von Produkt und Preis. Dieselbe Seite kann für beliebig viele Angebote dienen.
Zum Editor kommst du über Design → Checkout-Seiten → Zeile anklicken, oder aus der Liste der Checkout Flows über das Auge-Symbol.
Die Liste sagt seit September 2026 dazu, wo eine Seite verwendet wird — wie viele Checkout-Flows sie zeichnen, beim Überfahren mit welchen Namen — wie viele Blöcke sie trägt und wann sie zuletzt bearbeitet wurde. Eine Seite ohne eigenes Layout trägt den Vermerk Standardlayout: Sie verkauft trotzdem, mit dem eingebauten Checkout. Über das Zeilenmenü laufen Einstellungen, Duplizieren, Vorschau und Löschen; löschen geht nicht, solange ein Flow die Seite verwendet, und die Meldung nennt die Flows beim Namen.
Die Bereiche der Seite#
Die Seite hat vier Bereiche, in die du Elemente legst:
| Bereich | Typische Verwendung |
|---|---|
| Top (Oben) | Kopfzeile, Logo, Überschrift, Vertrauenszeile |
| Main | Kundendaten, Preisoptionen, Zahlung: die eigentliche Bestellstrecke |
| Side | Zusammenfassung, Argumente, Testimonials, Garantien |
| Bottom (Unten) | Fußzeile, rechtliche Hinweise |
Die beiden Seitenleisten#
Links liegen zwei Reiter: Einfügen (durchsuchbar, nach CHECKOUT, FORM, ADVANCED und allgemeinen Blöcken gruppiert) und Ebenen (der Seitenbaum). Rechts erscheinen die Einstellungen des ausgewählten Elements — darüber ein Pfad wie Page › Main › CustomerInfo, über den du zum umschließenden Element springst, und eine Kopfzeile mit Symbol, Name und den Schaltflächen für Sichtbarkeit, Duplizieren und Löschen.
Elemente ziehst du aus dem Reiter Einfügen an die gewünschte Stelle. Auswählen, verschieben, löschen funktioniert wie in einem Baukasten; rechts findest du zum ausgewählten Element die Einstellungen (Abstände, Farben, Rahmen, Ausrichtung, Spaltenbreite).
Die Elemente#
Checkout-Elemente#
Diese Bausteine tragen die Funktion der Seite:
| Element | Wofür |
|---|---|
| Customer Info | Kundendaten und Rechnungsadresse. |
| Checkout Options | Die Auswahl zwischen mehreren Preisen, z. B. monatlich oder jährlich → Checkout-Optionen. |
| Payment Info | Zahlungsart und Bezahlfelder. |
| Total Price | Zusammenfassung mit Zwischensumme, Rabatt, Steuer, Gesamtbetrag. |
| Coupon | Das Gutscheinfeld („Hast du einen Gutscheincode?"). |
| Bump Offer | Das Ankreuzfeld für das Zusatzangebot. |
| Form | Formularfelder und Einwilligungen (siehe unten). |
Inhaltselemente#
| Element | Wofür |
|---|---|
| Text | Überschriften und Fließtext. |
| Markdown | Längere formatierte Texte. |
| Image | Bilder, Logo, Produktabbildung. |
| Video | Videoeinbettung. |
| Testimonial | Kundenstimme mit Name und Bild. |
| List | Aufzählungen („Was ist enthalten"). |
| Container | Gruppiert Elemente, für Spalten und Abstände. |
| Divider | Trennlinie. |
| File List | Liste von Dateien. |
| HTML | Eigener HTML-Block, wenn dir sonst etwas fehlt. |
Formularfelder und Einwilligungen#
Im Element Form legst du fest, was der Käufer außer den Standardangaben noch ausfüllt oder bestätigt.
Eigene Felder#
Über Feld hinzufügen kommen zusätzliche Felder dazu: Beschriftung, Hilfetext, Pflichtfeld, Spaltenbreite. Die Antworten stehen später im Bestelldetail und stehen auch Webhooks zur Verfügung.
Typische Fälle: Umsatzsteuer-relevante Zusatzangaben, „Wie hast du von uns erfahren?", ein Wunschtermin.
Einwilligungen#
Über Einwilligung hinzufügen nimmst du Zustimmungen in den Checkout auf, etwa AGB und Widerrufsverzicht. Pro Einwilligung wählst du:
| Einstellung | Bedeutung |
|---|---|
| Explizit (Ankreuzfeld) | Der Käufer muss aktiv ein Häkchen setzen. |
| Implizit (Hinweis ohne Ankreuzfeld) | Nur ein Hinweistext. |
Vorbereitet sind AGB, Datenschutz, Widerrufsverzicht – Digitale Inhalte, Widerrufsverzicht – Dienstleistung, Unternehmerkauf und Newsletter → Widerruf und Rückerstattung.
Beispiel: AGB-Zustimmung einbauen
So sieht der häufigste Fall aus, Schritt für Schritt:
Im Editor das Element Customer Info anklicken.
Rechts unter Einwilligungen auf Einwilligung hinzufügen.
Bei Vorlage den Eintrag AGB wählen. Text, Modus und „Erforderlich“ sind damit schon gesetzt:
Feld Vorbelegung Text „Ich akzeptiere die Allgemeinen Geschäftsbedingungen.“ Modus Explizit (Ankreuzfeld) Erforderlich ja Link-Text und Link-URL ergänzen, damit das Wort im Satz auf deine AGB zeigt — etwa
AGBundhttps://deine-domain.de/agb. Ohne Link steht der Satz ohne Beleg da.Speichern und im Testkauf prüfen, dass das Häkchen erscheint und der Kauf ohne es nicht durchgeht.
Was der Kunde bestätigt hat, wird mit Datum an der Bestellung gespeichert und lässt sich über den Platzhalter consentRecord in die Bestätigungsmail übernehmen → E-Mail-Vorlagen.
Firmenfelder für Geschäftskunden#
Beim Kundendaten-Element gibt es die Option Firmenfelder anzeigen (Firma + USt-IdNr.). Aktiviere sie, wenn du an Unternehmen verkaufst, nur dann kann ein Käufer seine Umsatzsteuer-Identifikationsnummer angeben, und nur dann kann Reverse Charge greifen → Mehrwertsteuer einstellen.
Wie diese Felder präsentiert werden, steuerst du über Feldlayout:
| Layout | Was der Käufer sieht |
|---|---|
| Klassisch (Voreinstellung) | Firma und USt-IdNr. stehen einfach über der Adresse, ohne Markierung. |
| Optionale Felder markieren | Pflichtfelder tragen ein *, optionale den Zusatz „(optional)". |
| Ankreuzfeld „Ich kaufe als Unternehmen" | Die Firmenfelder erscheinen erst nach dem Häkchen. Die Firma wird dann zur Pflicht, die USt-IdNr. bleibt optional. |
Das Ankreuzfeld steht unten im Rechnungsblock, es schiebt also nichts nach unten, was darüber liegt. Ob es von vornherein angehakt ist, stellst du separat ein.
Preisanzeige mit Ersparnis#
Beim Preis-Element wählst du unter Preisanzeige, wie ein eingelöster Gutschein dargestellt wird:
| Modus | Anzeige |
|---|---|
| Aufschlüsselung (Voreinstellung) | Wie bisher: Positionen, Rabatt, Steuer, Summe. |
| Durchgestrichen | Der ursprüngliche Preis steht durchgestrichen neben dem zu zahlenden. |
| Ersparnis | Zusätzlich ein Hinweis wie „Du sparst 59,50 € (34 %)". |
Beschriftung des Bestellbuttons#
Beim Element Payment Info wählst du unter Zahlungseinstellungen, was auf dem Knopf steht, der die Bestellung auslöst. Zur Auswahl stehen:
| Beschriftung |
|---|
| Zahlungspflichtig bestellen (Voreinstellung) |
| Kostenpflichtig bestellen |
| Zahlungspflichtigen Vertrag schließen |
| Zahlungspflichtig buchen |
| Jetzt kaufen |
Freier Text ist nicht vorgesehen. § 312j BGB stellt Anforderungen an genau diesen Knopf, und ein Eingabefeld würde Formulierungen zulassen, die sie nicht erfüllen — deshalb eine feste Liste. Welche davon zu deinem Angebot passt, entscheidest du (oder deine Rechtsberatung); wir treffen die Auswahl nicht für dich.
Die Beschriftung gilt für alle Bezahlwege der Seite, auch für den PayPal-Knopf.
Ansicht prüfen#
Der Editor hat eine Umschaltung zwischen Desktop- und Mobilansicht. Prüfe beides: Der überwiegende Teil der Käufe passiert am Handy, und lange Seitenspalten sehen dort oft anders aus als gedacht.
Wie die Seite wirklich wirkt, mit echten Preisen, echter Zahlung und echter Bestätigungsmail, zeigt der Testkauf.
Erfolgsseiten#
Die Seite nach dem Kauf gestaltest du unter Design → Erfolgsseiten mit demselben Editor und denselben Inhaltselementen. Im Checkout-Flow wählst du unter Nach dem Kauf aus, ob eine Erfolgsseite gezeigt oder auf eine eigene Adresse weitergeleitet wird.
Fehlerseiten lassen sich nicht gestalten.
Häufige Fragen
Design → Checkout-Seiten → Seite öffnen. Alternativ in der Zeile eines Checkout-Flows über das Auge-Symbol, das ebenfalls in den Editor führt.
Im Editor das Element „Coupon“ aus der Werkzeugleiste in den gewünschten Bereich ziehen. Pro Checkout-Flow lässt sich die Eingabe zusätzlich abschalten.
Im Editor das Element Customer Info anklicken, rechts unter Einwilligungen auf „Einwilligung hinzufügen“ und als Vorlage AGB wählen. Text, Ankreuzfeld und Pflichtstatus sind vorbelegt; ergänze Link-Text und Link-URL, damit der Satz auf deine AGB zeigt. Eine neu gebaute Checkout-Seite hat noch keine Einwilligungen.
Im Editor beim Kundendaten-Element die Option für Firmenfelder (Firma und USt-IdNr.) aktivieren. Damit greift bei bestätigter USt-IdNr. aus dem EU-Ausland auch das Reverse-Charge-Verfahren.
Ja. Im Formular-Element lassen sich zusätzliche Felder anlegen. Die Antworten stehen später bei der Bestellung.
Ja, wenn mehrere Checkout-Flows dieselbe Seite verwenden. Willst du nur ein Angebot ändern, kopiere die Seite zuerst und ordne die Kopie diesem Flow zu.
Frage nicht beantwortet? Schreib uns — deutscher Support, echte Menschen.