Checkout-Seite gestalten
Der Seiten-Editor: Bereiche und Elemente, welche Bausteine es gibt, Formularfelder und Pflichtangaben, AGB- und Widerrufs-Einwilligungen, Firmenfelder für B2B.
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 → Seite öffnen, oder aus der Liste der Checkout Flows über das Auge-Symbol.
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 |
Elemente ziehst du aus der Werkzeugleiste 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. |
| Pricing Options | Auswahl der Preisoption, wenn der Flow mehrere anbietet. |
| 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 unter anderem Widerrufsverzicht – Digitale Inhalte und Widerrufsverzicht – Dienstleistung → Widerruf und Rückerstattung.
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.
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 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.