> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# So konfigurierst du Checkout-Widgets

> Vollständige Schritt-für-Schritt-Anleitung zur Konfiguration von Checkout-Widgets in Aftersell, einschließlich aller Widget-Typen, Platzierungsoptionen und Best Practices für Conversions auf Mobilgeräten und Desktop

Dieser Leitfaden führt dich durch die Konfiguration und Platzierung von Checkout-Widgets in Aftersell, von der Aktivierung der Widgets bis zur Optimierung der Platzierung im Shopify-Checkout für maximale Conversion-Raten.

**Hinweis:** Checkout-Widgets sind aufgrund der Einschränkungen der Checkout-Extensibility-API von Shopify nur für Shopify-Plus-Händler verfügbar.

***

<div id="step-1-enable-your-widget-in-aftersell">
  ## Schritt 1: Dein Widget in Aftersell aktivieren
</div>

Bevor du Widgets zu deinem Checkout hinzufügst, musst du sie im Aftersell-Adminbereich aktivieren.

1. Navigiere zum Tab **Checkout** in deinem Aftersell-Adminbereich
2. Wähle den Widget-Typ, den du konfigurieren möchtest ([Upsells](#upsells), [Cart Controls](#cart-controls), [Rewards,](#rewards) [Trust Badges,](#trust-badges) [Testimonials](#testimonials), [Notes](#notes), [Images](#images) oder [Text](#text))
3. Klicke auf **Create**, um ein neues Widget zu erstellen, oder wähle ein bestehendes Widget zum Bearbeiten aus
4. Konfiguriere deine Widget-Einstellungen (siehe [Widget-Typen und Konfiguration](#widget-types-and-configuration) unten)
5. Klicke auf den **Enable**-Schalter in der oberen rechten Ecke der Widget-Einstellungen
6. Aktiviere bei eingeschränkten oder erweiterten Upsells unbedingt benutzerdefinierte Trigger, bevor du fortfährst

***

<div id="step-2-open-the-shopify-checkout-editor">
  ## Schritt 2: Den Shopify-Checkout-Editor öffnen
</div>

Es gibt zwei Wege, den Shopify-Checkout-Editor zu öffnen:

**Option 1: Über den Shopify-Adminbereich**

1. Gehe zu **Settings** in deinem Shopify-Adminbereich
2. Klicke in der linken Navigation auf **Checkout**
3. Klicke auf **Customize** neben dem gewünschten Checkout-Profil

**Option 2: Über Aftersell**

1. Klicke auf die Schaltfläche **Open Shopify Checkout Editor** unten rechts auf der Checkout-Editor-Seite von Aftersell

💡 **Tipp:** Option 1 gibt dir mehr Kontrolle darüber, welches Checkout-Profil du bearbeitest. Wir empfehlen, zuerst an einer Entwurfsversion zu testen, bevor du sie live schaltest.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-admin-settings-link.gif?s=a182cd42cf41d7b53e5e5765afeb65d9" alt="Shopify-Admin-Startseite mit hervorgehobenem Settings-Link zum Öffnen des Checkout-Editors" width="1844" height="1080" data-path="images/aftersell/checkout-widget-config-admin-settings-link.gif" />

***

<div id="step-3-add-the-app-block-to-your-checkout">
  ## Schritt 3: Den App-Block zu deinem Checkout hinzufügen
</div>

1. Klicke im Shopify-Checkout-Editor auf **Add app block**
2. Wähle das gewünschte Aftersell-Widget aus der Liste der verfügbaren Widgets
3. Wähle die richtige Platzierung für dein Widget (siehe [Verfügbare Platzierungen](#available-placements) unten)
4. Wenn deine Widgets im Shop-Pay-Checkout angezeigt werden sollen, aktiviere die Option [**Include app block in Shop Pay**](/de/aftersell/show_checkout_widgets_in_shop_pay)
5. Klicke oben rechts auf **Save**

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-add-app-block-button.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=f6ba0d6ab535b750f8487c408e99ef69" alt="Shopify-Checkout-Editor mit einem Pfeil auf die Schaltfläche „Add block“ in der Seitenleiste" width="3486" height="1964" data-path="images/aftersell/checkout-widget-install-add-app-block-button.png" />

***

<div id="step-4-position-your-widget">
  ## Schritt 4: Dein Widget positionieren
</div>

1. Ziehe den App-Block per Drag-and-Drop an die gewünschte Position innerhalb des ausgewählten Platzierungsbereichs
2. Klicke oben rechts auf **Save**

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-drag-app-block.gif?s=7d17314d5e47e74b202e18baf3867e7a" alt="Blockliste im Shopify-Checkout-Editor neben einer Live-Checkout-Vorschau mit Aftersell-Widgets" width="1916" height="1080" data-path="images/aftersell/checkout-widget-install-drag-app-block.gif" />

***

<div id="widget-types-and-configuration">
  ## Widget-Typen und Konfiguration
</div>

<div id="placements">
  ## Platzierungen
</div>

Platzierungen werden im Aftersell-Checkout-Editor erstellt und ermöglichen es dir, mehrere Widgets desselben Typs auf derselben Checkout-Seite zu betreiben.

Wenn du beispielsweise zwei Upsell-Angebote auf derselben Seite anzeigen möchtest, muss jedes einer anderen Platzierung zugewiesen sein.

<div id="available-placements">
  ### Verfügbare Platzierungen
</div>

* **Default placement**: Die primäre Platzierung. Jeder Widget-Typ startet hier.
* **Additional placement 1**: Ein zweiter Platzierungs-Slot, um ein weiteres Widget desselben Typs auf derselben Seite anzuzeigen.
* **Additional placement 2**: Ein dritter Platzierungs-Slot für weitere Trennung.

Du kannst neue Platzierungen auch direkt über das Platzierungs-Dropdown in Aftersell erstellen, indem du **+ Add new placement** auswählst.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-placement-dropdown.gif?s=e43a141a2b6db37cb17ed0fcb1e2f8ef" alt="Aftersell-Checkout-Editor mit dem Platzierungs-Dropdown über der Upsells-Liste und der Vorschau" width="1912" height="1080" data-path="images/aftersell/checkout-widget-config-placement-dropdown.gif" />

***

<div id="when-to-use-multiple-placements">
  ### Wann du mehrere Platzierungen verwenden solltest
</div>

Verwende mehrere Platzierungen, wenn du:

* Mehr als ein Widget desselben Typs auf einer einzelnen Checkout-Seite anzeigen möchtest
* Widgets in verschiedenen Bereichen der Seite zeigen möchtest
* Verschiedene Zielgruppen mit unterschiedlichen Angeboten ansprechen möchtest
* Widgets mit ähnlichen oder sich überschneidenden Triggern betreiben möchtest

Aftersell verwendet ein Prioritätssystem. Du kannst innerhalb derselben Platzierung keine mehreren Widgets mit identischen Triggern betreiben. Wenn zwei Widgets in einer Platzierung dieselben Trigger-Bedingungen teilen, wird nur eines basierend auf der Priorität angezeigt.

Um ähnliche Trigger zu verwenden, weise jedes Widget einer anderen Platzierung zu, damit sie unabhängig und ohne Konflikte laufen können.

***

<div id="matching-placements-in-the-shopify-checkout-editor">
  ## Platzierungen im Shopify-Checkout-Editor abgleichen
</div>

Jede Platzierung in Aftersell entspricht einem separaten App-Block im Shopify-Checkout-Editor. Die in Shopify ausgewählte Platzierung muss mit der in Aftersell festgelegten Platzierung übereinstimmen.

Wenn ein Widget beispielsweise in Aftersell **Additional placement 1** zugewiesen ist, muss der App-Block in Shopify ebenfalls auf **Additional placement 1** gesetzt sein.

Wenn die Platzierungen nicht übereinstimmen, erscheint das Widget möglicherweise nicht oder wird an der falschen Stelle angezeigt.

**Wichtig:** Ein Platzierungs-Mismatch ist einer der häufigsten Gründe, warum ein Widget nicht angezeigt wird. Wenn ein Widget nicht erscheint, bestätige zuerst, dass die Platzierung in Aftersell und Shopify übereinstimmt, bevor du weiter nach Fehlern suchst.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-block-placement-dropdown.gif?s=b9fc5f328cbf3bf04a63cfbdde505cb4" alt="Einstellungen des Upsell-Widget-Blocks im Shopify-Checkout-Editor mit dem auf eine zusätzliche Platzierung gesetzten Platzierungs-Dropdown" width="2192" height="1080" data-path="images/aftersell/checkout-widget-config-block-placement-dropdown.gif" />

***

<div id="upsells">
  ### Upsells
</div>

Biete Kunden während des Checkouts Produkte an, um deinen durchschnittlichen Bestellwert (AOV) zu steigern.

**Konfigurationsoptionen:**

**Widget-Modi:**

* **Single Product Upsell:** Zeigt ein Produkt mit einer Add-to-Cart-Schaltfläche an
* **Multi-Product Upsell:** Zeigt mehrere Produkte in einem Stapel- oder Karussell-Layout, sodass Kunden mehrere Angebote annehmen können
* **Checkmark Upsell:** Zeigt ein einzelnes Produkt mit einer Checkbox statt einer Add-to-Cart-Schaltfläche (ideal für günstige Add-ons wie Versandschutz)

**Methoden der Produktauswahl:**

* **Specific Products:** Wähle einzelne Produkte zum Upselling manuell aus
* **Collection:** Wähle eine Kollektion und zeige bis zu 5 zufällige Produkte an (Produkte, die bereits im Warenkorb sind, werden automatisch ausgeschlossen)
* **Automatic upsell(s):** Empfiehl automatisch Produkte basierend auf dem Warenkorbinhalt
* **Most Expensive Product:** Verkaufe automatisch das teuerste Produkt aus dem Warenkorb als Upsell
* **Spend threshold:** Empfiehl Produkte, die Kunden helfen, Belohnungsschwellen zu erreichen (nur auswählbar, wenn **Show rewards bar** im selben Upsell-Widget aktiviert ist)
* **Strategy:** Wähle ein Produkt dynamisch über regelbasiertes Targeting aus. Wird nur in Stores mit aktivierten [Strategies](/de/aftersell/strategies_overview) angezeigt

**Zusätzliche Funktionen:**

* Füge Rabatte direkt im Widget hinzu
* Fixiere Abonnementpläne auf bestimmte Optionen
* Zeige Produktbewertungssterne an (erfordert eine kompatible Bewertungs-App)
* Lege eine maximale Anzahl angenommener Angebote pro Widget fest (nur bei Single- und Multi-Upsell-Typen)

[Mehr über Upsell-Widgets erfahren](/de/aftersell/checkout_widget_types#upsells)

***

<div id="cart-controls">
  ### Cart Controls
</div>

Erlaube Kunden, ihren Warenkorb direkt auf der Checkout-Seite anzupassen.

**Verfügbare Steuerelemente:**

* **Variant selector:** Zu einer anderen vorrätigen Variante wechseln
* **Quantity selector:** Produktmengen anpassen
* **Remove item:** „Show Remove Item Button“ entfernt Upsell-Produkte aus dem Warenkorb. Eine zugehörige Einstellung, **Allow Removal of Non-Upsell Products** (standardmäßig deaktiviert), erweitert das Entfernen auf alles im Warenkorb
* **Subscription selector:** Abonnementfrequenz ändern
* **Subscription upgrade:** Einmalkäufe zu Abonnements upgraden
* **Custom text:** Benutzerdefinierten Text unter den Artikelpositionen hinzufügen

**Produkt-Targeting:**

* Auf alle Produkte im Warenkorb anwenden
* Nur auf ausgewählte Produkte anwenden
* Auf alle Produkte außer den ausgewählten anwenden

**Zusätzliche Funktionen:**

* Produktbewertungssterne für Produkte im Warenkorb anzeigen

[Mehr über Cart Controls erfahren](/de/aftersell/checkout_widget_types#cart-controls)

***

<div id="rewards">
  ### Rewards
</div>

Zeige einen Fortschrittsbalken, der Kunden zeigt, wie nah sie an einer Belohnung sind.

**Konfigurationsoptionen:**

* Belohnungsbasis: **Cart total** oder **Item count**
* Betragsbasis (bei Cart total): **Order total (includes shipping and tax)**, **Subtotal (before discounts)** oder **Subtotal after discounts (excludes tax and shipping)**
* Belohnungsnachricht und Styling
* Farben und Design des Fortschrittsbalkens

**Best Practices:**

* Kombiniere sie mit Upsell-Widgets, um Kunden zu helfen, Belohnungsschwellen zu erreichen
* Verwende den Produkttyp „Spend threshold“ in Upsells, um automatisch Produkte zu empfehlen, die die Lücke schließen
* Erstelle Belohnungen in Shopify über Automatic Discounts (für Rabattbelohnungen) oder Shipping Rules (für kostenlosen Versand)
* Verwende **Subtotal after discounts (excludes tax and shipping)** als Betragsbasis, wenn du kostenlosen Versand anbietest, damit der Balken Shopifys eigener Schwellenbewertung entspricht, wenn Rabattcodes angewendet werden

[Mehr über Rewards erfahren](/de/aftersell/checkout_widget_types#rewards)

***

<div id="trust-badges">
  ### Trust Badges
</div>

Baue mit benutzerdefinierten Symbolen und Texten Vertrauen auf, um die Checkout-Conversion-Rate zu steigern.

**Konfigurationsoptionen:**

* Badge-Layout: Vertikaler Stapel oder horizontale Anzeige
* Benutzerdefinierte Symbole und Texte für jedes Badge
* Styling- und Abstandsoptionen

**Best Practices:**

* Hebe Sicherheitsmerkmale hervor (sicherer Checkout, SSL-Verschlüsselung)
* Präsentiere Garantien (Geld-zurück-Garantie, kostenlose Rücksendungen)
* Zeige Versandvorteile (kostenloser Versand, schnelle Lieferung)

[Mehr über Trust Badges erfahren](/de/aftersell/checkout_widget_types#trust-badges)

***

<div id="testimonials">
  ### Testimonials
</div>

Zeige Kundenbewertungen direkt im Checkout an, um Vertrauen aufzubauen.

**Konfigurationsoptionen:**

* **Flex Testimonials (empfohlen):** Ruft automatisch echte Bewertungen aus deiner Bewertungs-App ab (Judge.me, Klaviyo, Okendo oder Yotpo)
* Auswahlmodus: Manuell (bestimmte Bewertungen auswählen) oder Dynamisch (Bewertungen automatisch basierend auf dem Warenkorbinhalt abrufen)
* Anzeigetyp: Horizontales Karussell oder vertikaler Stapel
* Filter für Mindestbewertung

**Einrichtungsvoraussetzungen:**

* Konfiguriere die Zugangsdaten deiner Bewertungs-App unter Settings > Product Reviews
* Bewertungen werden automatisch innerhalb von 24 Stunden synchronisiert, danach wöchentlich

[Mehr über Testimonials erfahren](/de/aftersell/checkout_widget_types#testimonials)

***

<div id="notes">
  ### Notes
</div>

Erlaube Kunden, Notizen zu ihrer Bestellung hinzuzufügen.

**Konfigurationsoptionen:**

* Manuelle Notizen: Freitextfeld für Kundeneingaben
* Vorgefertigte Notizen: Checkboxen für Optionen wie Geschenkverpackung oder Öko-Verpackung

[Mehr über Notes erfahren](/de/aftersell/checkout_widget_types#notes)

***

<div id="images">
  ### Images
</div>

Lade benutzerdefinierte Bilder hoch und zeige sie in deinem Checkout an.

**Konfigurationsoptionen:**

* Bild-Upload
* Schieberegler zur Breitenanpassung
* Keine Mindestgrößenanforderung

[Mehr über Images erfahren](/de/aftersell/checkout_widget_types#images)

***

<div id="text">
  ### Text
</div>

Füge ein Banner mit benutzerdefiniertem Text in deinen Checkout ein.

**Konfigurationsoptionen:**

* **Container Style:** **Plain Text** (der Standard) oder **Badge**. Die Bannerfarben unten erscheinen erst, wenn du Badge wählst
* **Banner Type** (nur Badge):
  * **Info (Blau):** Blauer Hintergrund mit Informationssymbol
  * **Success (Grün):** Grüner Hintergrund mit Häkchensymbol
  * **Warning (Gelb):** Gelber Hintergrund mit Warndreieck-Symbol
  * **Critical (Rot):** Roter Hintergrund mit Ausrufezeichen-Symbol
* Textgröße im Feld **Body** (Small oder Base) — das Heading-Feld hat keine Größensteuerung
* Ausrichtung sowohl im Heading- als auch im Body-Feld
* Abstände: None, Extra Tight, Tight, Base, Loose oder Extra Loose

[Mehr über Text erfahren](/de/aftersell/checkout_widget_types#text)

***

<div id="troubleshooting">
  ## Fehlerbehebung
</div>

<div id="widgets-not-displaying">
  ### Widgets werden nicht angezeigt
</div>

Wenn deine Widgets nach der Einrichtung nicht erscheinen:

1. Überprüfe, ob das Widget im Aftersell-Adminbereich aktiviert ist
2. Prüfe, ob der App-Block im Shopify-Checkout-Editor hinzugefügt wurde
3. Bestätige, dass der App-Block im Shopify-Checkout-Editor gespeichert ist
4. Überprüfe, ob die richtige Platzierung ausgewählt ist. Beim Hinzufügen eines App-Blocks im Shopify-Checkout-Editor musst du die passende Platzierung wählen, etwa Default placement, Additional placement 1 oder Additional placement 2. Bei falscher Platzierung erscheint das Widget möglicherweise nicht oder wird an der falschen Stelle angezeigt. Entferne den App-Block und füge ihn erneut hinzu, wobei du die beabsichtigte Platzierung auswählst.
5. Für Shop Pay: Überprüfe, ob „Include app block in Shop Pay“ angehakt ist
6. Leere den Browser-Cache oder probiere den Inkognito-Modus
7. Warte einige Minuten, bis sich die Änderungen verbreitet haben

<div id="shop-pay-widgets-not-showing">
  ### Shop-Pay-Widgets werden nicht angezeigt
</div>

Um Widgets im Shop-Pay-Checkout anzuzeigen:

1. Öffne das Widget im Shopify-Checkout-Editor
2. Aktiviere die Option **Include app block in Shop Pay** unter Checkout behaviour
3. Speichere deine Änderungen

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif?s=63de90b2b7e5807806e2390316de688d" alt="Seitenleiste des Shopify-Checkout-Editors mit dem Aftersell-Upsell-Widget-App-Block unter Main" width="1416" height="1080" data-path="images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif" />

[Mehr über Shop-Pay-Widgets erfahren](/de/aftersell/show_checkout_widgets_in_shop_pay)

***

<div id="next-steps">
  ## Nächste Schritte
</div>

* [Erfahre mehr über Checkout-Trigger](/de/aftersell/checkout_triggers), um Widgets bedingt anzuzeigen
* [Richte Checkout-A/B-Tests ein](/de/aftersell/checkout_a_b_testing), um Platzierungen zu optimieren
* [Konfiguriere das Checkout-Branding](/de/aftersell/checkout_branding_settings), damit es zu deinem Store-Design passt
* [Entdecke fortgeschrittene Upsell-Strategien](/de/aftersell/best_practices), um den AOV zu maximieren