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

# Post-Purchase-Widgets

> Dieses Dokument beschreibt die in Aftersell verfügbaren Post-Purchase-Widgets und wie sie zum Aufbau von Post-Purchase-Upsell-Erlebnissen verwendet werden. Widgets sind nach Geltungsbereich und Funktion gruppiert, wobei jedes Widget einmal dokumentiert ist, um Dopplungen zu vermeiden.

***

<div id="funnel-wide-widgets">
  # Funnel-weite Widgets
</div>

<div id="progress-bar">
  ## Progress Bar
</div>

Die **Progress Bar** zeigt Kund:innen, wo sie sich im Post-Purchase-Ablauf befinden.

Wenn aktiviert, erscheint der Fortschrittsbalken bei allen Upsell-Angeboten innerhalb des Funnels. Alle Änderungen am Fortschrittsbalken gelten für den gesamten Funnel.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-progress-bar.gif?s=f9ee14053add6280b48524aca197a791" alt="Post-Purchase-Fortschrittsbalken mit den Schritten Cart, Order placed, Special offer und Done" width="2936" height="480" data-path="images/aftersell/ppu-widgets-post-purchase-progress-bar.gif" />

**Konfigurationsoptionen**

* Fortschrittsbalken für den Funnel ein- oder ausschalten
* Anzeigestil wählen:
  * **Minimal**
  * **Minimal with labels**
  * **Maximal**
* Erscheinungsbild in **Black** oder **White** wählen
* Oberen und unteren Abstand anpassen, um den Abstand zu steuern

***

<div id="offer-level-widgets">
  # Widgets auf Angebotsebene
</div>

Widgets auf Angebotsebene steuern den Inhalt und das Verhalten eines einzelnen Upsell-Angebots.

Diese Widgets definieren, was der Kunde in einem bestimmten Upsell-Schritt sieht, einschließlich Messaging, Dringlichkeit, Produktinformationen, Preisdetails und Aktionen.

Jedes Angebot in einem Funnel kann mit Widgets auf Angebotsebene unabhängig angepasst werden, sodass du das Erlebnis in jedem Schritt maßschneidern kannst.

Zu diesen Widgets gehören:\
[Text](#text)\
[Timer](#timer)\
[Upsell Product](#upsell-product)\
[Product Selection](#product-selection)\
[Discount](#discount)\
[Badge](#badge)\
[Shipping](#shipping)\
[Image](#image)\
[Buttons](#buttons)\
[Price Breakdown](#price-breakdown)\
[Product Details](#product-details)\
[Variant & plan options](#variant--plan-options)\
[Layout](#layout)\
[Video](#video)\
[Testimonials](#testimonials)

***

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

Das **Text**-Widget wird für Überschriften und unterstützende Texte im gesamten Angebot verwendet.

Es unterstützt eine Überschrift und optionalen Fließtext, mit Steuerelementen für Schriftgröße, Farbe, Schriftstärke, Ausrichtung, Durchstreichung und Abstände.

Verwende die dynamische Variable `{first-name}`, um das Messaging für jeden Kunden zu personalisieren.

***

<div id="timer">
  ## Timer
</div>

Das **Timer**-Widget erzeugt Dringlichkeit durch die Anzeige eines Live-Countdowns.

Solange der Timer läuft, bleibt das Angebot sichtbar. Wenn der Timer null erreicht, verschwindet das Upsell-Angebot automatisch und der Kunde wird im Funnel weitergeleitet.

***

<div id="upsell-product">
  ## Upsell Product
</div>

Das **Upsell Product**-Widget ist das Herzstück des Angebots. Es legt fest, welches Produkt angezeigt wird, und dient als Container für alle produktbezogenen Widgets darunter.

Alles Folgende wird innerhalb dieses Widgets konfiguriert.

***

<div id="product-selection">
  ## Product Selection
</div>

Das Product-Selection-Widget steuert, welches Produkt in einem Upsell-Angebot angezeigt wird.

Du kannst ein festes Produkt auswählen oder das Upsell-Produkt dynamisch anhand der ursprünglichen Bestellung des Kunden bestimmen — für statische wie adaptive Upsell-Erlebnisse.

<div id="product-type-options">
  #### Produkttyp-Optionen
</div>

* **Specific product**\
  Zeigt immer dasselbe Produkt im Upsell an.
* **Automatic upsell**\
  Wählt dynamisch ein Produkt anhand vordefinierter Upsell-Logik aus.
* **Most expensive in cart**\
  Verwendet den Artikel mit dem höchsten Preis aus der ursprünglichen Bestellung des Kunden.
* **Least expensive in cart**\
  Verwendet den Artikel mit dem niedrigsten Preis aus der ursprünglichen Bestellung des Kunden.

<div id="changing-the-product">
  #### Das Produkt ändern
</div>

Das ausgewählte Produkt erscheint oben im Widget. So änderst du es:

1. Klicke auf **Change product**
2. Wähle einen Produkttyp
3. Wähle oder bestätige das Produkt

Beim Durchsuchen des Tabs **Products** in der Auswahl kannst du **Active products only** aktivieren, um Produkte mit Status Draft und Archived aus der Liste auszublenden. Dieser Filter ist standardmäßig deaktiviert und gilt nur für den Products-Tab — Kollektionen sind nicht betroffen.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-offer-editor-edit-product.gif?s=a281ef6837574437297ca063e861d119" alt="Aftersell-Angebotseditor mit dem Panel „Edit upsell product“ neben einer Live-Angebotsvorschau" width="948" height="480" data-path="images/aftersell/ppu-widgets-offer-editor-edit-product.gif" />

<div id="identifying-products-with-identical-names">
  #### Produkte mit identischen Namen identifizieren
</div>

Wenn dein Shop mehrere Produkte oder Varianten mit demselben Titel hat, aktiviere den Umschalter **Show IDs** in der Produktauswahl, um die numerische Shopify-Produkt-ID und Varianten-ID unter jedem Namen anzuzeigen. So kannst du leicht bestätigen, dass du das richtige Produkt auswählst.

Der Umschalter **Show IDs** ist im Tab **Product** der Auswahl verfügbar und standardmäßig deaktiviert. Im Collection-Tab ist er nicht verfügbar.

***

<div id="discount">
  ## Discount
</div>

Das **Discount**-Widget wendet Aktionspreise an und zeigt sie an.

Du kannst zwischen einem prozentualen (%) Rabatt oder einem festen Dollar-Rabatt (\$) wählen. Bei Bedarf kann ein eigener Rabatttext hinzugefügt werden, und der Rabatt kann sich entweder auf den Vergleichspreis des Produkts beziehen oder ihn ignorieren.

<div id="bulk-discount-shortcut-for-multi-product-offers">
  ### Sammelrabatt-Shortcut für Multiprodukt-Angebote
</div>

Bei Multiprodukt- und Kollektionsangeboten erscheint ein **Discount**-Bereich direkt in den Einstellungen des Upsell-Products-Widgets — unterhalb des Produktauswahlbereichs. So kannst du Rabatte für mehrere Produkte schneller festlegen oder aktualisieren, ohne die Einzeleinstellungen jedes Produkts zu öffnen.

Der Bereich ist standardmäßig eingeklappt. Wenn du ihn aufklappst:

* Es wird eine Liste aller Produkte im Angebot angezeigt, jeweils mit einem Kontrollkästchen und einem Badge mit dem aktuellen Rabatt (zum Beispiel `17% off` oder `$18.00 off`).
* Wähle die zu aktualisierenden Produkte über die Kontrollkästchen aus. Standardmäßig sind alle Produkte ausgewählt.
* Ein Hinweis unter der Liste zeigt, auf wie viele Produkte deine Änderungen angewendet werden.
* Verwende die Felder für Rabatttyp und -wert, um den Rabatt festzulegen. Änderungen gelten nur für die ausgewählten Produkte — nicht ausgewählte Produkte behalten ihre bestehenden Rabatte.

<div id="mixed-discounts-across-products">
  #### Gemischte Rabatte über Produkte hinweg
</div>

Wenn ausgewählte Produkte unterschiedliche Rabatteinstellungen haben, zeigen die Felder Platzhaltertext an, um auf die Abweichung hinzuweisen:

* Wenn Produkte unterschiedliche **Rabatttypen** haben (zum Beispiel manche % Rabatt und andere \$ Rabatt), zeigt die Typauswahl **Mixed** an.
* Wenn Produkte unterschiedliche **Rabattwerte** oder -typen haben, zeigt das Wertfeld **Multiple values** mit dem Hinweis, dass die Eingabe eines neuen Werts den aktuellen Rabatt jedes ausgewählten Produkts überschreibt.

<div id="info-icon-on-product-rows">
  #### Info-Symbol in Produktzeilen
</div>

Ein Info-Symbol (i) erscheint neben dem Rabatt-Badge eines Produkts, wenn für dieses Produkt zusätzliche Rabatteinstellungen konfiguriert sind — etwa ein eigener Rabatttitel, ein Vergleichspreis oder ein Abo-Rabatt. Beim Überfahren des Symbols wird eine Zusammenfassung dieser Extras angezeigt.

***

<div id="badge">
  ## Badge
</div>

Das **Badge**-Widget hebt wichtige Produkteigenschaften wie Beliebtheit oder Dringlichkeit hervor.

Du kannst eine vordefinierte Badge-Beschriftung auswählen, aus mehreren visuellen Stilen wählen, ein Symbol einbinden und steuern, wo das Badge im Angebot oder direkt auf dem Produktbild erscheint.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-offer-trending.png?fit=max&auto=format&n=SnVX3h-PpMMxQMDU&q=85&s=c7c4cf7649723721d24bffff865b6f2b" alt="Post-Purchase-Angebot mit einem Trending-Badge über dem Produkttitel" width="1920" height="898" data-path="images/aftersell/ppu-widgets-post-purchase-offer-trending.png" />

Eigene Badge-Bilder können über **Advanced badge settings** hochgeladen werden (SVG oder PNG, bis zu 10 MB).

<Note>
  Die Badge-Bearbeitung ist nur bei V2-Angeboten verfügbar. V1-Angebote behalten zuvor konfigurierte Badges, aber die Badge-Einstellungen können bei V1-Angeboten nicht bearbeitet werden.
</Note>

***

<div id="shipping">
  ## Shipping
</div>

Das **Shipping**-Widget steuert, wie Versandkosten kommuniziert werden.

Du kannst entweder kostenlosen Versand anbieten oder Versandkosten berechnen, indem du einen bestimmten Versandpreis festlegst.

***

<div id="image">
  ## Image
</div>

Das **Image**-Widget steuert, wie Produktbilder angezeigt werden.

Es enthält Optionen zum Anpassen der Größe des Hauptbilds, zum Hinzufügen eines Rahmens, zum Aktivieren eines Bildkarussells und zum Hochladen eines eigenen Produktbilds über **Advanced image settings**.

***

<div id="language">
  ## Language
</div>

Der Bereich **Language** steuert, welche Sprache für alle Systemtexte im Angebot verwendet wird, einschließlich Button-Text, Abo-Beschriftungen, Preisbeschriftungen und anderer nicht bearbeitbarer Zeichenketten.

Wähle eine Sprache aus dem **Language**-Dropdown, um Systemtexte für dieses Angebot automatisch zu übersetzen. Aftersell unterstützt 32 Sprachen.

Diese Einstellung betrifft keine Badges oder eigenen Textfelder — nur systemgenerierter Text wird übersetzt.

***

<div id="buttons">
  ## Buttons
</div>

Das **Buttons-Widget** steuert, wie Kund:innen einen Upsell während des Checkouts annehmen oder ablehnen.

Du kannst Verhalten und Aussehen der Buttons anpassen, darunter:

* Auswahl des **Standardtexts für den Annehmen-Button**
* Erfordern eines **Bestätigungsklicks**, bevor ein Upsell angenommen wird
* Ändern des **Stils des Ablehnen-Buttons** (zum Beispiel Button oder Link)
* Anpassen von **Button-Ausrichtung** und -Breite
* Hinzufügen von optionalem **unterstützendem Text** über oder unter den Buttons, mit Styling-Steuerelementen und Unterstützung dynamischer Variablen

<div id="button-text">
  ### Button-Text
</div>

Du kannst den Text des Annehmen-Buttons für deine Post-Purchase-Angebote über das Dropdown **Default accept button text** konfigurieren. Die verfügbaren Optionen hängen vom Angebotstyp ab:

**Standardangebote:**

* **Pay Now** — Zeigt „Pay Now • \[Gesamtpreis des Produkts]“ (oder „Add Now • Free“ bei kostenlosen Produkten)
* **Accept Offer** — Zeigt „Accept Offer“ unabhängig vom Preis

**Subscription-Upgrade-Angebote:**

* **Upgrade Subscription** — Zeigt „Upgrade Subscription“ (Standard für neue Subscription-Upgrade-Angebote)
* **Accept Offer** — Zeigt „Accept Offer“ unabhängig vom Preis
* **Pay Now** — Zeigt „Pay Now • \[Gesamtpreis des Produkts]“ (oder „Add Now • Free“ bei kostenlosen Produkten)

Um Button-Texte zu übersetzen, verwende den Bereich **Language** über dem Buttons-Bereich.

<div id="button-layout-options">
  ### Button-Layout-Optionen
</div>

Du kannst auch die **Position der Annehmen- und Ablehnen-Buttons** zueinander steuern. Folgende Layouts werden unterstützt:

* **Accept above decline** — Zeigt den Annehmen-Button über der Ablehnen-Option
* **Decline above accept** — Zeigt die Ablehnen-Option über dem Annehmen-Button
* **Accept beside decline** — Zeigt die Annehmen- und Ablehnen-Buttons nebeneinander

Diese Layout-Optionen geben dir mehr Flexibilität, um dein gewünschtes Checkout-Erlebnis und deine Messaging-Hierarchie umzusetzen.

***

<div id="price-breakdown">
  ## Price Breakdown
</div>

Das **Price Breakdown**-Widget schafft Klarheit rund um die Preisgestaltung.

Es kann Versand und Steuern anzeigen, zusätzliche Details wie Zwischensumme und Rabatte enthalten und für maximale Klarheit an den Zahlungs-Buttons ausgerichtet oder in deren Nähe positioniert werden.

<div id="hide-shipping-adjustment-line">
  ### Versandanpassungszeile ausblenden
</div>

Wenn dein Angebot als Replacement Upsell konfiguriert ist (über die Einstellung „Replace item in original order with upsell“), enthält die Preisaufschlüsselung eine Zeile **Shipping adjustment**, die eine etwaige Versandkostendifferenz zwischen dem ursprünglichen und dem Ersatzprodukt widerspiegelt.

Du kannst diese Zeile über das Kontrollkästchen **Hide shipping adjustment line** unterdrücken, das im Price-Breakdown-Bereich nur erscheint, wenn ein Replacement Upsell konfiguriert ist. Diese Einstellung ist standardmäßig deaktiviert, sodass bestehende Angebote nicht betroffen sind.

* Wenn aktiviert, wird die Versandanpassungszeile in der Preisaufschlüsselung des Kunden ausgeblendet.
* Wenn deaktiviert, wird die Versandanpassungszeile wie gewohnt angezeigt.

Diese Einstellung betrifft nur die Versandanpassungszeile bei Replacement-Upsell-Angeboten. Die Standard-Versandzeile bei Nicht-Replacement-Angeboten ist nicht betroffen.

***

<div id="product-details">
  ## Product Details
</div>

Das **Product Details**-Widget steuert, wie wichtige Produktinformationen präsentiert werden.

Es unterstützt Produktbewertungen (die automatisch ausgeblendet werden, wenn keine Bewertungen vorhanden sind), eine optionale Mengenauswahl und die Möglichkeit, das Angebot zu überspringen, wenn das Produkt bereits in der ursprünglichen Bestellung enthalten ist.

Produkttitel und Preise sind vollständig gestaltbar und unterstützen einige dynamische Variablen, darunter `{product}`, `{original-price}`, `{current-price}`, `{savings}` und `{savings-line}`.

Eine optionale Angebotsbeschreibung kann hinzugefügt werden, um Wert oder Dringlichkeit zu unterstreichen.

<div id="product-review-star-colors">
  ### Sternfarben der Produktbewertung
</div>

Wenn **Show product reviews rating** aktiviert ist, kannst du die Farben der Sternbewertungsanzeige anpassen:

* **Star color** — die Farbe gefüllter (aktiver) Sterne. Standard ist `#fdcc0d` (Gelb).
* **Empty star color** — die Farbe ungefüllter (inaktiver) Sterne. Standard ist `#d1d5db` (Hellgrau).

Um die Farben zu ändern, öffne die Einstellungen des **Product Details**-Widgets, aktiviere **Show product reviews rating** und verwende die Farbeingaben, um deine bevorzugten Hex-Werte festzulegen.

<div id="quantity-selector-presets">
  ### Voreinstellungen der Mengenauswahl
</div>

Wenn die Mengenauswahl aktiviert ist, kannst du eine **voreingestellte Menge** konfigurieren, um zu steuern, wie viele Einheiten beim Anzeigen des Angebots gezeigt oder erlaubt sind. Folgende Voreinstellungsoptionen sind verfügbar:

* **Fixed** — Legt eine feste Menge fest, mit der der Kunde startet. Die Mengenauswahl ist ausgeblendet und der Kunde kann die Menge nicht ändern.
* **Percentage of purchased quantity** — Legt die Menge als Prozentsatz der ursprünglich vom Kunden gekauften Einheiten fest.
* **Minimum quantity** — Legt eine Untergrenze für die Menge fest. Der Kunde startet bei diesem Wert und kann sie erhöhen.
* **Maximum quantity** — Legt eine Obergrenze für die Menge fest. Der Kunde startet bei 1 und kann nicht über das konfigurierte Maximum hinausgehen (bis zu 20). Dem Kunden wird eine Nachricht mit der Maximalmenge für den Artikel angezeigt.

<div id="description-position">
  ### Position der Beschreibung
</div>

Bei Einzelprodukt-Angeboten kannst du steuern, wo die Produktbeschreibung im Verhältnis zu den CTA-Buttons erscheint:

* **Default (above buttons)** — Die Beschreibung erscheint über den Annehmen- und Ablehnen-Buttons
* **Below buttons** — Die Beschreibung erscheint unter den Annehmen- und Ablehnen-Buttons

Mit dieser Einstellung kannst du das Layout besser an deine Messaging-Hierarchie und Designvorlieben anpassen.

***

<div id="variant--plan-options">
  ## Variant & plan options
</div>

Das **Variant & Plan Options**-Widget steuert die Sichtbarkeit von Varianten, die Auswahl und das Sperren von Abo-Plänen.

Du kannst ausverkaufte Varianten anzeigen oder ausblenden, das gesamte Produkt ausblenden, wenn alle Varianten nicht verfügbar sind, und steuern, ob Variantenoptionen mit nur einer Auswahlmöglichkeit angezeigt werden. **Erweiterte Einstellungen ermöglichen es, die Variantenauswahl vollständig auszublenden**.

Zu den Optionen für die Variantenvorauswahl gehören Smart Matching zum ursprünglichen Kauf, Unselected (Auswahl durch den Nutzer erforderlich) oder First available variant.

Bei Produkten mit mehreren Variantenoptionen werden alle Optionen angezeigt und eine verfügbare Variante wird vorausgewählt, sofern vorhanden; ausverkaufte Optionen werden als nicht verfügbar angezeigt. Bei Produkten mit einer einzigen Variantenoption werden ausverkaufte Optionen ausgeblendet.

<div id="subscription-plan-locking">
  ### Abo-Plan sperren
</div>

Wenn du Abo-Produkte mit mehreren Abo-Plänen anbietest, kannst du das Angebot auf einen bestimmten Plan festlegen. Das verhindert, dass Kund:innen den Abo-Plan während des Post-Purchase-Erlebnisses ändern, und stellt sicher, dass sie genau die von dir konfigurierte Abo-Option erhalten.

**So sperrst du einen Abo-Plan:**

1. Suche im Bereich **Variant & Plan Options** das Dropdown **Lock subscription plan**
2. Wähle einen bestimmten Plan aus dem Dropdown
3. Der Plan ist jetzt gesperrt — Kund:innen sehen den Plannamen als statischen Text statt eines änderbaren Dropdowns

<Frame>
  <img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-variant-plan-options.gif?s=8851a3d937b3f732660588f555e8743b" alt="Variant-and-Plan-Options-Panel mit dem Dropdown „Lock subscription plan“" width="848" height="1080" data-path="images/aftersell/ppu-widgets-variant-plan-options.gif" />
</Frame>

**Wenn ein Plan gesperrt ist:**

* Kund:innen sehen den Plannamen als Text
* Das Plan-Auswahl-Dropdown ist ausgeblendet
* Kund:innen können den Abo-Plan nicht ändern
* Wenn der gesperrte Plan in Shopify nicht mehr verfügbar ist, greift das Angebot elegant auf die Anzeige aller verfügbaren Pläne zurück

**Automatisches Zurücksetzen:**

Die Einstellung für den gesperrten Plan wird automatisch zurückgesetzt, wenn du die Kaufoption des Produkts auf „nur Einmalkauf“ änderst (und die Abo-Option entfernst).

<div id="variant-selector-position">
  ### Position der Variantenauswahl
</div>

Du kannst steuern, wo die Variantenauswahl im Verhältnis zu den CTA-Buttons erscheint:

* **Above CTA buttons (default)** — Die Variantenauswahl erscheint über den Annehmen- und Ablehnen-Buttons
* **Below CTA buttons** — Die Variantenauswahl erscheint unter den Annehmen- und Ablehnen-Buttons

Wenn sowohl die Variantenauswahl als auch die Produktbeschreibung unter den CTA-Buttons positioniert sind, kannst du ihre Reihenfolge steuern:

* **Variant selector first** — Die Variantenauswahl erscheint vor der Produktbeschreibung
* **Description first** — Die Produktbeschreibung erscheint vor der Variantenauswahl

Du kannst außerdem den oberen und unteren Abstand der Variantenauswahl anpassen, um die Abstände fein abzustimmen und das gewünschte visuelle Layout zu schaffen.

***

<div id="layout">
  ## Layout
</div>

Das **Layout**-Widget steuert die Gesamtstruktur und die Abstände des Upsells.

Du kannst zwischen einem einspaltigen oder zweispaltigen Layout wählen, die maximale Layoutbreite anpassen und den oberen und unteren Abstand feinjustieren, um ein sauberes, gut lesbares Erlebnis zu schaffen.

***

<div id="video">
  ## Video
</div>

Das **Video**-Widget fügt einem Angebot ein klickbares Vorschaubild hinzu, das einen gehosteten Videoplayer in einem neuen Tab öffnet, mit gestaltetem Hintergrund und einem Button zur Rückkehr zum Upsell. Das Video wird in einem neuen Tab statt inline abgespielt, sodass das Upsell-Angebot im ursprünglichen Tab geöffnet bleibt.

Das Widget unterstützt außerdem eine **Hintergrundfarbe**, um zu deiner Marke zu passen oder die Aufmerksamkeit auf den Player zu lenken, sowie **Layout-Einstellungen** für Ausrichtung (links, mittig, rechts) und oberen und unteren Abstand.

Um das Kundenerlebnis in der Vorschau zu sehen, klicke auf das Vorschaubild in der **Angebotsvorschau** im Editor. Der gehostete Videoplayer öffnet sich in einem neuen Tab genau so wie im Storefront, sodass du Vorschaubild, CTA und Schließverhalten vor der Veröffentlichung prüfen kannst.

<div id="browser-compatibility">
  ### Browser-Kompatibilität
</div>

Das Video-Widget öffnet den Player in einem neuen Tab. Auf dem Desktop funktioniert das immer, daher wird das Widget dort immer angezeigt.

Auf Mobilgeräten ist es umgekehrt: Aftersell zeigt das Widget nur in Browsern, die es als fähig erkennt, einen neuen Tab zu öffnen, ohne den Kunden aus dem Checkout zu drängen. Das umfasst native mobile Browser — Safari, Chrome, Firefox und andere bekannte — sowie die In-App-Browser von Facebook und Instagram.

**Jeder andere mobile Browser blendet das Widget aus.** Dazu gehören In-App-Browser wie die Google-App, TikTok und Pinterest, generische Webviews und alles, was Aftersell nicht erkennt. Da unbekannte Browser ausgeblendet statt angezeigt werden, ist die Menge der Umgebungen, in denen das Widget nicht erscheint, keine feste Liste — ein Browser, den Aftersell noch nie gesehen hat, blendet es ebenfalls aus.

Wo das Widget ausgeblendet wird, kannst du ein **Fallback-Bild** hochladen, das an seiner Stelle angezeigt wird — zum Beispiel ein statisches Werbebild oder eine Markengrafik. Es wird ohne Link oder Play-Button angezeigt. Wenn kein Fallback-Bild festgelegt ist, wird anstelle des Widgets nichts gerendert.

<Tip>
  Lege bei jedem veröffentlichten Video-Widget ein **Fallback-Bild** fest. Da alles Unbekannte ausgeblendet wird, verraten dir deine Traffic-Quellen allein nicht, ob manche Kund:innen das Widget verpassen — und ohne Fallback sehen diese Kund:innen gar nichts.
</Tip>

<div id="video-source">
  ### Videoquelle
</div>

Das Widget spielt ein einzelnes Video aus einer von zwei Quellen ab. Verwende den Umschalter **Upload** / **Link** in den Widget-Einstellungen, um die vom Player verwendete Quelle zu wählen:

* **Upload** — ziehe eine MP4-, WebM- oder MOV-Datei (bis zu 50 MB) per Drag-and-drop hinein oder wähle sie aus, um sie direkt in deinen Shopify Files zu hosten. Nach dem Upload verarbeitet Shopify die Datei und im Editor erscheint eine Vorschau.
* **Link** — füge eine YouTube-URL, eine Vimeo-URL oder einen direkten Link zu einer gehosteten Videodatei ein (zum Beispiel eine MP4 auf deinem eigenen CDN).

Du kannst beides ausfüllen, aber nur die im Umschalter ausgewählte Quelle wird abgespielt — die andere bleibt hinter ihrem Tab und wird **nicht** als automatischer Fallback verwendet. Wenn nur eine Quelle festgelegt ist, wird diese unabhängig vom Umschalter abgespielt.

Du musst mindestens eine Quelle festlegen — ein hochgeladenes Video oder einen Videolink —, bevor du das Widget speichern kannst.

<div id="supported-link-formats">
  #### Unterstützte Linkformate
</div>

Das Linkfeld akzeptiert Folgendes:

* **YouTube** — verwende die Standard-Video-URL (zum Beispiel `https://youtu.be/VIDEO_ID` oder `https://www.youtube.com/watch?v=VIDEO_ID`). YouTube-Shorts-URLs (`youtube.com/shorts/...`) werden nicht unterstützt — öffne das Video auf YouTube und verwende stattdessen den Teilen-Link.
* **Vimeo** — verwende die Standard-Video-URL (zum Beispiel `https://vimeo.com/VIDEO_ID`). Showcase-URLs sowie Kanal- oder Profilseiten, die nicht auf ein bestimmtes Video verweisen, werden nicht unterstützt — verwende die URL des einzelnen Videos aus der Adressleiste. Eine Kanal- oder Gruppen-URL, die die numerische Video-ID enthält, funktioniert.
* **Direkte Datei** — eine öffentlich zugängliche HTTPS-URL, die auf eine Videodatei verweist (zum Beispiel eine MP4 auf deinem CDN).

<div id="link-validation">
  #### Link-Validierung
</div>

Der Editor validiert deinen Link an zwei Stellen:

* **Beim Verlassen des Feldes** — wenn die URL-Form erkennbar falsch ist (zum Beispiel ein YouTube-Shorts-Link oder eine Vimeo-Showcase-URL), erklärt ein Inline-Fehler, was stattdessen zu verwenden ist.
* **Beim Speichern** — der Editor prüft beim Videoanbieter, ob das Video einbettbar ist. Wenn das Video privat oder gelöscht ist oder das Einbetten deaktiviert wurde, wird das Speichern blockiert und der Grund am Linkfeld angezeigt. Korrigiere den Link und speichere erneut, um fortzufahren.

Wenn die Anbieterprüfung nicht verfügbar ist (zum Beispiel aufgrund eines Netzwerkproblems), wird das Speichern ohne Blockierung fortgesetzt.

<div id="shopify-files-permission">
  #### Shopify-Files-Berechtigung
</div>

Das Hochladen eines Videos erfordert die Berechtigung `write_files`. Wenn diese Berechtigung nicht erteilt wurde, erscheint im Upload-Bereich ein Banner mit einem **Update**-Button. Klicke darauf, um die Berechtigung zu erteilen und Uploads zu ermöglichen.

<div id="upload-processing">
  #### Upload-Verarbeitung
</div>

Nachdem du eine Datei abgelegt oder ausgewählt hast, zeigt der Uploader **Uploading…** an, während die Datei übertragen wird, und dann **Processing…**, während Shopify sie transkodiert. Sobald die Verarbeitung abgeschlossen ist, erscheint eine Vorschau. Du kannst währenddessen andere Widget-Einstellungen weiter bearbeiten.

Du kannst kein Widget speichern, dessen einzige Quelle ein noch in Verarbeitung befindliches Video ist — das Speichern wird blockiert, bis das Transkodieren abgeschlossen ist oder bis du zwischenzeitlich einen Videolink als Quelle hinzufügst. Wenn du Änderungen verwirfst oder den Editor vor dem Speichern schließt, werden laufende Uploads aus den Shopify Files gelöscht.

Videolinks werden beim Speichern des Widgets validiert.

<div id="thumbnail-and-watch-video-cta">
  ### Vorschaubild und „Video ansehen“-CTA
</div>

Lade das Bild hoch, das Kund:innen im Angebot sehen, bevor sie das Video öffnen. Ein „Video ansehen“-CTA wird automatisch über das Vorschaubild gelegt, um auf die Abspielaktion aufmerksam zu machen. Du kannst den CTA-Beschriftungstext passend zu deiner Marke gestalten. Vorschaubilder werden nicht automatisch aus dem Video generiert — sie müssen hochgeladen werden.

Du kannst außerdem ein separates **Vorschaubild nur für Mobilgeräte** hochladen. Wenn festgelegt, wird das mobile Vorschaubild auf Mobilgeräten und das Standard-Vorschaubild auf dem Desktop angezeigt, sodass du das Bild für jede Bildschirmgröße anpassen kannst.

<div id="fallback-image">
  ### Fallback-Bild
</div>

Mit der Einstellung **Fallback image** kannst du ein Bild hochladen, das angezeigt wird, wenn das Video-Widget ausgeblendet ist, weil der Browser des Kunden den Player nicht öffnen kann — siehe [Browser-Kompatibilität](#browser-compatibility). Das Fallback-Bild wird ohne Link oder Play-Overlay angezeigt; es ist ein rein statisches Bild.

Wenn kein Fallback-Bild hochgeladen ist, wird anstelle des Widgets nichts gerendert.

<div id="autoplay">
  ### Autoplay
</div>

Der Umschalter **Autoplay** steuert, ob das Video automatisch startet, wenn der gehostete Player geöffnet wird.

Wenn Autoplay aktiviert ist, startet das Video **stumm**. Die meisten modernen Browser blockieren das automatische Abspielen von Videos mit Ton, bis der Kunde mit der Seite interagiert, daher ist das stumme Abspielen erforderlich, damit Autoplay zuverlässig funktioniert. Kund:innen können die Stummschaltung über die Player-Steuerung aufheben, sobald das Video gestartet ist.

Wenn du lieber Ton vom ersten Frame an möchtest, lasse Autoplay deaktiviert und überlasse es dem Kunden, das Video manuell abzuspielen.

<div id="closing-the-video">
  ### Das Video schließen
</div>

Es gibt drei Möglichkeiten für Kund:innen, den gehosteten Player zu schließen und zum Upsell-Angebot zurückzukehren:

* **Back-to-offer-Button** — ein Button unter dem Player, der den Tab schließt und zum Upsell zurückführt.
* **Doppelklick irgendwo** — ein Doppelklick irgendwo auf den Hintergrund schließt den Player.
* **Automatisches Schließen am Ende** — wenn das Video zu Ende gespielt ist, schließt sich der Player automatisch.

Da das Video in einem neuen Tab geöffnet wird, schließt das Schließen des Players diesen Tab — der Upsell bleibt im ursprünglichen Tab erhalten.

<div id="language-and-translations">
  ### Sprache und Übersetzungen
</div>

Die Texte der Videoplayer-Seite — die Beschriftung des Back-to-offer-Buttons, die Desktop- und Mobil-Hinweise sowie Titel und Nachricht bei nicht verfügbarem Video — folgen der **Language**-Einstellung des Angebots und können unter **Settings > Translations** angepasst werden.

***

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

Das **Testimonials**-Widget zeigt echte Produktbewertungen in deinem Post-Purchase-Angebot an, um Vertrauen aufzubauen und die Entscheidung des Kunden, einen Upsell anzunehmen, zu bestärken.

Die Bewertungen stammen aus deiner verbundenen Bewertungs-App. Das Widget erscheint in der Auswahl des Angebotseditors als **„Testimonials“** mit einem Sternsymbol.

Um dieses Widget zu verwenden, musst du unter **Settings > Product Reviews** eine Bewertungs-App verbunden haben. Unterstützte Apps sind Judge.me, Klaviyo, Okendo und Yotpo. Einrichtungsanleitungen findest du unter [Bewertungs-App-Integrationen](/de/aftersell/checkout_widget_types#review-app-integrations).

<div id="selection-modes">
  ### Auswahlmodi
</div>

Das Testimonials-Widget unterstützt zwei Modi:

* **Manual** — Du wählst einen kuratierten Pool von Bewertungen zur Anzeige aus. Die Bewertungen werden in der von dir gespeicherten Reihenfolge angezeigt.
* **Dynamic** — Bewertungen werden automatisch aus dem synchronisierten Cache deiner Bewertungs-App gezogen, basierend auf den Produkten im Upsell-Angebot. Die Bewertungen beziehen sich auf die Produkte des Angebots, nicht auf die ursprüngliche Bestellung des Kunden.

<div id="configuration-options">
  ### Konfigurationsoptionen
</div>

* **Review app** — Wähle, aus welcher verbundenen Bewertungs-App die Bewertungen gezogen werden.
* **Mode** — Wähle Manual oder Dynamic.
* **Minimum rating** — Lege die Mindest-Sternebewertung für anzuzeigende Bewertungen fest (zum Beispiel 4 Sterne und mehr).
* **Anzeige-Umschalter** — Zeige oder verberge einzelne Bewertungselemente:
  * Sternebewertung
  * Bewertungstitel
  * Name des Bewertenden
  * Bewertungsdatum
  * Verified-Buyer-Badge
* **Truncate review text** — Lege eine maximale Zeichenlänge für den Bewertungstext fest. Bewertungen, die dieses Limit überschreiten, werden mit Auslassungspunkten abgeschnitten.
* **Max reviews to show** — Lege fest, wie viele Bewertungen erscheinen, von 1 bis 3.
* **Layout** — Ordne Bewertungen **Horizontal** (nebeneinander) oder **Vertical** (gestapelt) an.
* **Padding** — Passe die Abstände um das Widget an.

<div id="dynamic-mode-and-review-syncing">
  ### Dynamischer Modus und Bewertungssynchronisierung
</div>

Im dynamischen Modus importiert Aftersell Bewertungen aus deiner Bewertungs-App und speichert sie, damit sie im Angebot angezeigt werden können. Der erste Import erfolgt automatisch innerhalb von 24 Stunden nach dem Verbinden deiner Bewertungs-App und danach einmal pro Woche.

Um Bewertungen sofort zu importieren, gehe zu **Settings > Product Reviews** und klicke bei deiner Bewertungs-App auf **Sync now**.

<div id="verified-buyer-badge">
  ### Verified-Buyer-Badge
</div>

Wenn das Verified-Buyer-Badge aktiviert ist, wird bei qualifizierten Bewertungen ein **„Verified buyer“**-Label angezeigt. Dieses Label wird automatisch in die für das Angebot eingestellte Sprache übersetzt und unterstützt 32 Sprachen.

***

<div id="adding-additional-widgets">
  ## Zusätzliche Widgets hinzufügen
</div>

Widgets können entweder **über oder unter dem Upsell-Product-Widget** hinzugefügt werden, sodass du den Informationsfluss vor oder nach dem Produkt selbst steuern kannst.

Zusätzliche Widgets, die hinzugefügt werden können, sind unter anderem:

* **Image** — Zeige ein unterstützendes Bild an, um das Angebot visuell zu verstärken.
* **Text** — Füge unterstützenden Text hinzu, um Kernbotschaften zu vermitteln.
* **Text & Image** — Kombiniere Text und Bilder, um den Wert hervorzuheben oder das Angebot zu erklären.
* **Extra Buy Button** — Füge einen zusätzlichen Call-to-Action hinzu, um die Annahme des Angebots zu fördern. Nicht verfügbar bei Angeboten, die mehr als ein Produkt anzeigen.
* **Trust Badge** — Zeige Vertrauenssignale wie Garantien, Sicherheit oder Glaubwürdigkeitsindikatoren an.
* **FAQs** — Beantworte häufige Kundenfragen, um Hürden abzubauen und Vertrauen zu stärken.
* **Video** — Bette ein Video ein, um das Produkt zu demonstrieren oder die Geschichte deiner Marke zu erzählen. Siehe [Video](#video).
* **Testimonials** — Zeige echte Produktbewertungen aus deiner verbundenen Bewertungs-App. Verfügbar bei V2-Angeboten. Siehe [Testimonials](#testimonials).

So fügst du ein Widget hinzu:

1. Wähle, ob das Widget **über oder unter** dem Upsell-Product-Widget erscheinen soll
2. Klicke im ausgewählten Bereich auf **Add widget**
3. Wähle und konfiguriere das gewünschte Widget

***

Um mehr darüber zu erfahren, was Post-Purchase-Angebote sind, wie sie funktionieren und wie du sie mit Aftersell einsetzt, wirf einen Blick auf [diesen Artikel mit weiteren Informationen](/de/aftersell/post_purchase_overview).

***

Das Verhalten und Aussehen der Widgets sind auf die im Editor verfügbaren Konfigurationsoptionen beschränkt.\
Weitere Anpassungen werden aufgrund von Shopify-Einschränkungen nicht unterstützt.

***

<div id="need-help">
  ## Brauchst du Hilfe?
</div>

Wenn du Fragen hast oder Unterstützung bei der Einrichtung deiner Post-Purchase-Angebote benötigst, ist unser Support-Team für dich da. Du kannst uns jederzeit über den In-App-Chat oder per E-Mail erreichen.
