> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/online-shop/checkout-im-onlineshop-gestalten.md). # Checkout im Onlineshop gestalten ## Was du damit erreichst Im Checkout-Editor legst du fest, welche Angaben Käufer machen, wie Texte und Farben wirken, welche Länder auswählbar sind und welche Zustimmung vor dem Abschluss erforderlich ist. Zeige nur Informationen, die für die Bestellung, Lieferung oder spätere Kommunikation wirklich nötig sind. ## Checkout öffnen 1. Öffne **Websites** → **Onlineshops**. 2. Erstelle einen Onlineshop oder öffne einen bestehenden. 3. Öffne die Checkout-Seite im Editor. 4. Wähle das Checkout-Element aus. 5. Passe die Einstellungen an. 6. Speichere und teste auf Desktop und Mobilgerät. ## Erscheinungsbild und Texte anpassen Im Checkout-Element kannst du unter anderem Schriftart, Schriftgröße, Schriftstärke und Farben für Überschriften, Zusammenfassung, Hintergrund und Schaltflächen anpassen. Die Beschriftungen lassen sich für die einzelnen Bereiche verändern: * Kontaktdaten, * Lieferangaben, * Rechnungsanschrift, * Zahlungsbereich, * Warenkorbübersicht. Prüfe in der Vorschau besonders Feldnamen, Schaltflächen und Hinweise. Eine verständliche, einheitliche Sprache senkt Rückfragen. ## Kontakt- und Folgeverhalten festlegen Für Kontakte stehen je nach Checkout-Einstellung diese Optionen zur Verfügung: * einen vorhandenen Kontakt im Checkout beibehalten, * bei jeder Bestellung einen neuen Kontakt anlegen, * Wegwerf-E-Mail-Adressen prüfen. Nach einer erfolgreichen Bestellung kannst du festlegen, ob die Seite unverändert bleibt, zu einer anderen Seite weiterleitet oder eine Website-URL öffnet. Teste die gewählte Zielseite mit einer vollständigen Testbestellung. ## Felder bewusst ein- oder ausblenden Für Name, Rufnummer, Anschrift, Land, Region, Ort und Postleitzahl kannst du festlegen, ob ein Feld erforderlich, optional oder ausgeblendet ist. Die Rechnungsanschrift und Lieferangaben lassen sich ebenfalls ein- oder ausblenden. Wichtige Regeln: * Ist Land oder eine abhängige Regionsangabe ausgeblendet, erscheint keine Länderauswahl. * Für eine genaue Lieferberechnung können Anschrift, Ort und Postleitzahl erforderlich sein. * Bei angebundenen Versanddiensten müssen alle benötigten Anschriftsfelder sichtbar und erforderlich sein. * Nutze die Namensprüfung, wenn vollständige Namen zwingend benötigt werden. ## Anschrift, Länder und Hinweise verwalten Die Adressvervollständigung kann während der Eingabe Vorschläge für Anschrift, Ort, Land, Region und Postleitzahl machen. Teste sie mit realistischen Adressen, bevor du sie aktiv einsetzt. Für die Länderauswahl kannst du: * Lieferungen in alle Länder erlauben, * Lieferungen auf ausgewählte Länder begrenzen, * keine Vorauswahl anzeigen, * das Land anhand der ungefähren IP-Position vorschlagen, * alle erlaubten Länder zur Auswahl anzeigen. Sind nur bestimmte Länder freigegeben, erscheinen nur diese im Checkout. Wählst du keine Länder aus, sind alle Länder verfügbar. Du kannst außerdem ein Feld für zusätzliche Hinweise aktivieren. Ein eingegebener Hinweis erscheint im Bereich für Bestellnotizen auf dem Lieferschein; ohne Eingabe bleibt dieser Bereich ausgeblendet. ## Zustimmung vor dem Abschluss einholen Wenn eine Zustimmung zu Bedingungen oder Datenschutz erforderlich ist: 1. Wähle das Checkout-Element. 2. Öffne den Bereich für Bedingungen. 3. Aktiviere die Zustimmung. 4. Passe den Text der Checkbox an. 5. Verlinke die passenden Bedingungen oder Datenschutzhinweise. 6. Speichere und veröffentliche den Onlineshop. Die Checkbox ist zunächst nicht ausgewählt. Käufer müssen sie vor dem Abschluss aktiv anklicken. Andernfalls erscheint ein Hinweis und der Vorgang kann nicht abgeschlossen werden. Prüfe dies in der Vorschau auf Desktop und Mobilgerät. ## Gutscheincodes steuern Du kannst die Eingabe für Gutscheincodes im Checkout aktivieren oder ausblenden. Prüfe nach jeder Änderung, ob die Warenkorbübersicht und die Schaltflächen verständlich bleiben. ## Weitere sichtbare Einstellungen vollständig prüfen ### Was nach dem Abschluss passiert Unter den Aktionen nach einer erfolgreichen Bestellung wählst du bewusst eine von drei Varianten: * **Standardansicht beibehalten:** Die bestehende Abschlussseite bleibt sichtbar. * **Zu einer Seite weiterleiten:** Käufer gelangen zu einer von dir ausgewählten Shop- oder Website-Seite. * **Eine Webadresse öffnen:** Der Abschluss führt zu einer hinterlegten Internetadresse. Prüfe diese Wahl immer mit einer vollständigen Testbestellung. Eine Weiterleitung ist nur sinnvoll, wenn die Zielseite für Käufer erreichbar ist und klar erklärt, was als Nächstes passiert. ### Zusatzangebot nach dem Checkout einrichten Ein Zusatzangebot erscheint **nach** dem erfolgreichen Checkout und vor der Bestätigungsseite. Es eignet sich für ein ergänzendes Produkt, das zum ursprünglichen Einkauf passt. Entscheidend ist der Weg: Der erste Checkout wird zuerst abgeschlossen; das Zusatzangebot ist danach ein eigener Schritt. Ein akzeptiertes Zusatzangebot erzeugt laut Quelle eine **separate Bestellung**. Es ergänzt die ursprüngliche Bestellung nicht rückwirkend. Plane deshalb Bestätigung, Versand und interne Prüfung für beide Vorgänge getrennt. #### Was du vorab brauchst * Einen fertig eingerichteten Onlineshop mit einer funktionierenden Checkout- und Bestätigungsseite. * Das Produkt, das du als Zusatzangebot zeigen möchtest. * Eine eigene, noch leere Shopseite für das Zusatzangebot. * Eine klare Entscheidung, wohin Käufer nach dem Zusatzangebot gelangen: zu einem weiteren Zusatzangebot oder direkt zur Bestätigungsseite. #### Seite und Element anlegen 1. Öffne **Websites → Onlineshops** und wähle den passenden Shop. 2. Erstelle bei den Shopseiten eine neue Seite für das Zusatzangebot. 3. Öffne **Seite bearbeiten**. 4. Füge einen Bereich über die volle Breite und darin eine Zeile ein. 5. Wähle **Element hinzufügen** und ziehe das sichtbare Element **Upsell** in die Zeile. 6. Klicke das eingefügte Element an und öffne seine Einstellungen. 7. Suche und wähle das Produkt aus, das angezeigt werden soll. 8. Lege unter **Sale Action** fest, ob der Abschluss zu einer weiteren Zusatzangebotsseite oder zur Bestätigungsseite führt. 9. Speichere die Seite. Du kannst mehrere Zusatzangebotselemente in verschiedenen Spalten einer Zeile verwenden. Beginne trotzdem mit einem einzigen, klar passenden Produkt. So lässt sich der Ablauf für Käufer und Team besser testen. #### Versand beim Zusatzangebot bewusst steuern In den Einstellungen des Zusatzangebots kann die Versandoption sichtbar sein. Aktivierst du sie, kann die bestellende Person im Zusatzangebot eine verfügbare Versandart aus einer Auswahlliste wählen. Lässt du sie aus, erscheint diese Auswahl dort nicht. Prüfe diese Entscheidung getrennt vom ersten Checkout. Ein Zusatzprodukt, das keinen Versand benötigt, sollte nicht versehentlich eine Versandwahl anzeigen. Umgekehrt müssen bei versandpflichtigen Zusatzprodukten die verfügbaren Versandoptionen im Test vollständig geprüft werden. #### Einen sicheren Weg zum Überspringen einbauen Füge auf jeder Zusatzangebotsseite eine sichtbare Schaltfläche zum Überspringen hinzu: 1. Füge ein **Button**-Element auf der Seite ein. 2. Wähle bei der Button-Aktion die Bestätigungsseite als Ziel. 3. Beschrifte die Schaltfläche verständlich, zum Beispiel **„Ohne Zusatzangebot weiter“**. 4. Speichere und teste die Schaltfläche. Ohne diesen Weg können Käufer laut Quelle auf der Zusatzangebotsseite festhängen und erreichen die Bestätigungsseite erst nach einem zusätzlichen Abschluss. Die Überspringen-Schaltfläche ist daher kein Detail, sondern ein notwendiger Teil des Ablaufs. #### Checkout mit der Zusatzangebotsseite verbinden 1. Öffne die bestehende Checkout-Seite im Editor. 2. Wähle das Checkout-Element. 3. Öffne den Bereich für die Aktion nach einem erfolgreichen Abschluss. 4. Wähle **Go to page**. 5. Wähle als Shopseite die neu angelegte Zusatzangebotsseite. 6. Speichere und veröffentliche die Änderung. Die Zusatzangebotsseite darf nicht vor dem Checkout liegen. Wird das Element davor platziert, entsteht laut Quelle ein Fehler. Die Reihenfolge muss immer **Checkout → Zusatzangebot oder Überspringen → Bestätigungsseite** sein. #### Den vollständigen Weg testen 1. Führe eine sichere Testbestellung für das ursprüngliche Produkt aus. 2. Prüfe, ob danach die richtige Zusatzangebotsseite erscheint. 3. Kontrolliere Produkt, Darstellung, Versandwahl und beide Weiterleitungswege. 4. Wähle im ersten Test das Zusatzangebot und prüfe, ob zwei getrennte Bestellungen entstehen. 5. Wiederhole den Test und überspringe das Zusatzangebot. Die Bestätigungsseite muss ohne weiteren Abschluss erreichbar sein. 6. Prüfe beide Bestellungen und die zugehörigen Bestätigungen getrennt. #### Typische Fehler **Das Zusatzangebot zeigt einen Fehler:** Prüfe die Seitenreihenfolge. Das Element gehört auf eine neue Seite nach dem Checkout. **Käufer kommen nicht weiter:** Prüfe die Überspringen-Schaltfläche und ihre Zielseite. Sie muss auf die Bestätigungsseite führen. **Es entsteht eine zweite Bestellung:** Das ist bei einem angenommenen Zusatzangebot das bestätigte Verhalten. Bearbeite und prüfe beide Bestellungen getrennt. **Die falsche Seite öffnet sich nach dem Checkout:** Öffne die Checkout-Einstellungen und kontrolliere **Sale Action** sowie die ausgewählte Shopseite. #### Praxisbeispiel Ein Shop verkauft ein Hauptprodukt und möchte danach ein passendes Zubehör anbieten. Das Team erstellt dafür eine eigene Zusatzangebotsseite, fügt ein einzelnes **Upsell**-Element ein und wählt das Zubehör aus. Die Annahme führt zur Bestätigungsseite; eine deutlich sichtbare Schaltfläche erlaubt den direkten Weg dorthin ohne Zusatzangebot. Vor dem Veröffentlichen testet das Team beide Wege. Beim ersten Test nimmt es das Zusatzangebot an und kontrolliert die zwei getrennten Bestellungen. Beim zweiten Test überspringt es das Angebot und prüft, ob die Bestätigungsseite sofort erscheint. ### Kontakte und Texte steuern Im Checkout kannst du außerdem festlegen, ob ein vorhandener Kontakt für den Vorgang beibehalten wird, ob bei jeder Bestellung ein neuer Kontakt entsteht und ob Wegwerf-E-Mail-Adressen geprüft werden. Aktiviere diese Optionen nur, wenn sie zu deinem Umgang mit bestehenden Kundendaten passen. Die Texte im Checkout sind nach Bereichen gruppiert. Passe sie einheitlich an und ändere ihre Bedeutung nicht versehentlich: | Bereich | Änderbare Beschriftungen | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | Kontaktdaten | Überschrift und E-Mail-Bezeichnung | | Lieferangaben | Überschrift, Name, Rufnummer, Suchfeld, Anschrift, Land und weitere Lieferhinweise | | Rechnungsanschrift | Überschrift und Text der Auswahl „gleich wie Lieferanschrift“ | | Zahlungsbereich | Bezeichnung der Zahlung, Text der Abschluss-Schaltfläche und Hinweis darunter | | Warenkorbübersicht | Überschrift, Menge, Aktionscode, Eingabehinweis auf Mobilgeräten, Schaltfläche zum Anwenden, Zwischensumme, Nachlass, Entfernen, Versand und Gesamtsumme | Halte Begriffe wie „Bestellung abschließen“, „Lieferanschrift“ und „Aktionscode“ im gesamten Shop gleich. Ein unklar umbenannter Button kann Käufer vom Abschluss abhalten. ### Adresse, Land und Bestellhinweis im Zusammenspiel Die Adressvervollständigung unterstützt Anschrift, Ort, Land, Region und Postleitzahl. Sie ersetzt nicht die Entscheidung, welche Felder im Checkout sichtbar sind. Stelle für Rufnummer, Anschrift, Land, Region, Ort und Postleitzahl jeweils bewusst **erforderlich**, **optional** oder **ausgeblendet** ein. Wenn das Land oder die davon abhängige Region ausgeblendet ist, erscheinen auch die Einstellungen für die Länderauswahl nicht. Für die Ländervorauswahl stehen diese Möglichkeiten zur Verfügung: * keine Vorauswahl – Käufer wählen ihr Land selbst; * ungefähren Standort vorschlagen – das Land wird anhand der IP-Adresse vorgeschlagen; * alle erlaubten Länder anzeigen; * nur ausgewählte Lieferländer anzeigen. Bei der Begrenzung auf Lieferländer gilt: Werden keine einzelnen Länder ausgewählt, sind wieder alle Länder verfügbar. Prüfe deshalb eine zulässige und eine nicht zulässige Testadresse. Ein Feld für Bestellhinweise kann ein- oder ausgeschaltet werden. Ist es eingeschaltet und eine Person trägt etwas ein, erscheint der Hinweis später auf dem Lieferschein im Bereich für Bestellnotizen. Ohne Eingabe wird dieser Bereich nicht angezeigt. ## Praxisbeispiel Ein Shop versendet nur innerhalb ausgewählter Länder. Das Team zeigt deshalb Anschrift, Land und Postleitzahl als erforderliche Felder, aktiviert die Adressvervollständigung und begrenzt die Länderauswahl. Zusätzlich wird ein Hinweisfeld für Lieferwünsche eingeschaltet. Vor der Veröffentlichung testet das Team eine zulässige Adresse, ein nicht zugelassenes Land und einen Abschluss ohne Zustimmung zu den Bedingungen. ## Typische Fehler * **Zu viele Pflichtfelder:** Entferne alles, was für Bestellung und Lieferung nicht benötigt wird. * **Land ausgeblendet, aber Ländersteuerung erwartet:** Die Länderauswahl setzt ein sichtbares Länderfeld voraus. * **Weiterleitung nicht geprüft:** Führe eine vollständige Testbestellung durch. * **Bedingungen nur verlinkt, aber nicht aktiviert:** Prüfe, ob die Zustimmung im Checkout tatsächlich erforderlich ist. * **Lieferangaben zu stark gekürzt:** Kontrolliere, ob Versanddienste noch alle benötigten Angaben erhalten. ## Abweichende Rechnungsanschrift erfassen Wenn Liefer- und Rechnungsanschrift voneinander abweichen können, aktivierst du die Rechnungsanschrift direkt am Checkout-Element. 1. Öffne im Shop-Editor die Checkout-Seite. 2. Wähle das **Checkout-Element**. 3. Öffne **Erweitert > Formularoptionen**. 4. Aktiviere **Rechnungsanschrift erfassen**. 5. Passe Überschrift und den Text für „gleich wie Lieferanschrift“ an deine Sprache an. 6. Speichere und veröffentliche die Änderung. Im Checkout erscheint die Rechnungsanschrift nach den Lieferangaben. Die Option „gleich wie Lieferanschrift“ ist zunächst ausgewählt, damit Käufer keine Angaben doppelt eintragen müssen. Nur wenn sie abweicht, erscheint eine getrennte Eingabe. Bei neu angelegten Shops kann die Funktion bereits aktiv sein; in bestehenden Shops muss sie gegebenenfalls bewusst eingeschaltet werden. Zugehörige eigene Felder werden automatisch angelegt und sind systemgeschützt. Die Informationen erscheinen nur dann in Bestelldetails, Kontakt, Bestätigungs-E-Mail und Lieferschein, wenn Käufer sie tatsächlich ausgefüllt haben. Die Rechnungsanschrift ändert nicht die Berechnung von Versand oder Steuern. Prüfe deshalb mit einem Testkauf sowohl gleiche als auch abweichende Anschriften und kontrolliere anschließend die Bestelldetails. ## Mobile Darstellung im Online-Shop prüfen Die mobile Oberfläche des Shops wird automatisch angepasst. Du musst dafür keine eigene Einstellung aktivieren. Die Änderungen betreffen die Produktansicht, Bewertungen, Sortierung und Filter, Warenkorb, Abschlussseite sowie die Bestätigungsseite nach einer Bestellung. ### Was Besucher auf Mobilgeräten sehen * Bei Produkten erscheinen Bewertung und Anzahl der Bewertungen kompakt direkt am Produktbild. * Sortierung und Filter sind auf kleinen Bildschirmen übersichtlicher angeordnet. Auch umfangreichere Filterwerte bleiben innerhalb der Ansicht bedienbar. * Im Warenkorb sind Produktangaben, Hinweise und Fehlermeldungen besser lesbar. * Auf der Abschlussseite lässt sich die Bestellübersicht bei Bedarf auf- und zuklappen. Eingabefelder für Aktionscodes und die Zusammenfassung sind besser erreichbar. * Die Bestätigungsseite zeigt wichtige Bestelldaten klarer an. ### So prüfst du das Ergebnis 1. Öffne deinen veröffentlichten Shop auf einem Smartphone oder nutze die mobile Vorschau im Browser. 2. Rufe eine Produktliste und eine Produktdetailseite auf. 3. Teste Sortierung, Filter und – falls vorhanden – das Hinterlassen einer Bewertung. 4. Lege einen Testartikel in den Warenkorb und gehe bis zur Bestellübersicht. 5. Prüfe, ob Hinweise und Fehlermeldungen vollständig lesbar sind und ob sich die Bestellübersicht öffnen und schließen lässt. 6. Führe nur einen zulässigen Testvorgang durch und kontrolliere danach die Bestätigungsseite. Die Anpassungen ändern weder die angelegten Produkte noch deine bestehenden Shop-Einstellungen. Wenn ein Element trotzdem abgeschnitten oder unlesbar ist, prüfe zuerst die jeweilige Produktseite, lange Eigennamen und eingebundenen eigenen Code. > **Praxisbeispiel:** Ein Shop nutzt lange Variantenamen. Das Team prüft die Produktansicht und den Warenkorb auf einem Smartphone. Dabei sieht es, dass ein eigener Hinweistext zu lang ist, kürzt ihn und testet die Ansicht erneut. Die Standardoberfläche selbst muss dafür nicht neu eingerichtet werden. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/online-shop/checkout-im-onlineshop-gestalten.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.