> ## 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.

# Dein erstes Checkout-Widget erstellen

> Anleitung zum Einrichten eines Checkout-Widgets in Aftersell, von der Auswahl und Erstellung des Widgets bis zur Anpassung von Stil und Verhalten.

In diesem Artikel führen wir dich durch den Prozess der Einrichtung eines Checkout-Widgets in Aftersell. Um mehr über die verschiedenen verfügbaren Widget-Typen zu erfahren, [klicke hier](/de/aftersell/checkout_widget_types).

Los geht's.

***

<div id="step-1-selecting-your-widget">
  ## Schritt 1: Dein Widget auswählen
</div>

Wähle zunächst das Widget aus, das deinen Anforderungen entspricht. Ob Upsell- oder Testimonial-Widget – Aftersell bietet eine Reihe von Optionen für deine Bedürfnisse.

In diesem Tutorial wählen wir das Upsell-Widget aus.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=3302868c50e12461761e6a1300820bd7" alt="Aftersell-Checkout-Seite mit Widget-Karten für Upsells, Cart Controls, Rewards und Testimonials" width="1988" height="1566" data-path="images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png" />

***

<div id="step-2-creating-your-widget">
  ## Schritt 2: Dein Widget erstellen
</div>

Klicke auf „Create Upsell“, um mit dem Aufbau deines Upsell-Widgets zu beginnen.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-editor-upsells-panel-arrow.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e89c35b59c09c6fd858e910f46d9fcc0" alt="Upsells-Panel im Checkout-Editor mit einem Pfeil, der auf die Schaltfläche „Create upsell“ zeigt" width="2884" height="1234" data-path="images/aftersell/checkout-widget-create-editor-upsells-panel-arrow.png" />

***

<div id="step-3-selecting-a-preset">
  ## Schritt 3: Eine Vorlage auswählen
</div>

Wähle aus einer Liste optimierter Widget-Vorlagen oder starte von Grund auf neu.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-new-campaign-preset-options.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=d64607da81a3a4b43e9d5c7c9a7420c2" alt="Bildschirm „Create new campaign“ mit Vorlagenoptionen wie Single- und Multi-Product-Upsells" width="1646" height="1674" data-path="images/aftersell/checkout-widget-create-new-campaign-preset-options.png" />

***

<div id="step-4-edit-styling-and-behaviour">
  ## Schritt 4: Styling und Verhalten bearbeiten
</div>

Jetzt geht es um die Feinabstimmung. Passe das Styling und das Verhalten deines Widgets perfekt an. Optimiere die Trigger-Logik, verfeinere die Produktauswahl oder verleihe dem Design den letzten Schliff.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-single-product-upsell-editor.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e9560a037ceb877ea2d47d261278934b" alt="Editor für Single-Product-Upsell mit Trigger-, Produkt- und Styling-Einstellungen sowie Live-Vorschau" width="2968" height="1619" data-path="images/aftersell/checkout-widget-create-single-product-upsell-editor.png" />

***

<div id="step-5-enable-widget-status">
  ## Schritt 5: Widget-Status aktivieren
</div>

Stelle sicher, dass der Status deines Widgets auf aktiv gesetzt ist.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=7f9cedd5ace808ad47a077090be3e29d" alt="Checkout-Editor mit eingeschaltetem Upsell-Status-Schalter zur Aktivierung des Widgets" width="2892" height="1386" data-path="images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png" />

Dein Checkout-Widget ist jetzt in Aftersell live – der letzte Schritt wartet: das Widget in deinen Shopify-Checkout einfügen. Du möchtest wissen, wie das geht? Klicke unten, um tiefer in den Prozess einzutauchen.

[Mehr erfahren](/de/aftersell/adding_a_checkout_widget_to_your_shopify_checkout)