> ## 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.
# Upsells-Block
> Der Upsells-Block des Aftersell Cart — per Strategie ausgewählte Produktangebote, die im Drawer angezeigt werden.
> Der **Upsells**-Block zeigt Produktangebote im Cart Drawer, ausgewählt durch eine **Strategy**, die du festlegst. Wenn Käufer den Warenkorb öffnen, zeigt der Block die Produkte an, die deine Strategy auf Basis des aktuellen Warenkorbinhalts und deiner konfigurierten Targeting-Regeln zurückgibt.
Steigere den durchschnittlichen Bestellwert, indem du relevante Produktangebote genau in dem Moment präsentierst, in dem Käufer ihren Warenkorb öffnen — mit einer Strategy, die anhand des Warenkorbinhalts und deiner Targeting-Regeln auswählt, was angezeigt wird.
Anders als der [**Product add-on**](/de/aftersell/cart/product-add-on-block)-Block, der immer ein von dir gewähltes Produkt zeigt, wird Upsells von einer Strategy gesteuert, die entscheidet, was angezeigt wird.
## Verhalten
* Produkte werden live auf Basis des aktuellen Warenkorbs des Käufers abgerufen, sodass die Angebote widerspiegeln, was tatsächlich im Warenkorb liegt.
* **Der gesamte Abschnitt wird ausgeblendet, wenn keine Produkte aufgelöst werden** — keine Strategy angehängt, die Strategy gibt nichts zurück oder keines der zurückgegebenen Produkte ist kaufbar. Käufer sehen nie einen leeren Upsells-Abschnitt.
* Wenn ein zurückgegebenes Angebot einen Rabatt trägt, sehen Käufer einen ehrlichen durchgestrichenen Preis und ein Rabatt-Badge, und der Rabatt wird im Checkout angewendet.
## Einstellungen
| Einstellung | Was sie steuert | Standard |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| **Title** | Rich-Text-Überschrift über den Angeboten. Unterstützt Fett, Kursiv, Ausrichtung und Farbe. | `You may also like` |
| **Add button text** | Die Beschriftung des Hinzufügen-Buttons jedes Produkts. | `Add` |
| **Strategy** | Die Strategy, die auswählt, welche Produkte angezeigt werden. | Eine Shopify-AI-Strategie, automatisch zugewiesen |
| **Layout** | **Carousel** oder **List**. | Carousel |
| **Maximum products** | Wie viele Produkte höchstens angezeigt werden. Akzeptiert `1`–`12`. | `4` |
| **Show compare-at price** | Ob ein durchgestrichener Vergleichspreis angezeigt wird. | An |
| **Show product reviews** | Ob Sternebewertungen und Bewertungsanzahlen auf jeder Upsell-Karte angezeigt werden. Bewertungen stammen aus den Produkt-Metafields deiner Bewertungs-App und erscheinen nur, wenn gültige Bewertungsdaten vorliegen. | Aus |
### Unterstützte Bewertungs-Apps
Die folgenden metafield-basierten Bewertungs-Apps werden unterstützt: Shopify Product Reviews, Junip, Okendo, Growave, Fera, Stamped, Loox, REVIEWS.io, Automizely Reviews, Judge.me, Ali Reviews, Trustoo, Rivo, Rivyo und Vitals. Yotpo wird nicht unterstützt, da es eine separate API statt Produkt-Metafields verwendet.
## Design
Der Upsells-Block hat Design-Überschreibungen pro Block in seinem **Design**-Panel. Diese überschreiben die globalen Design-Einstellungen des Warenkorbs nur für diesen Block. Ein leer gelassener Wert erbt die globale Einstellung.
### Textgestaltung
Der Upsells-Block enthält in seinen Design-Einstellungen einen Abschnitt **Text**. Damit steuerst du die Typografie einzelner Textelemente auf jeder Upsell-Karte. Wähle ein Textelement im Picker aus, um seine Einstellungen anzupassen:
| Einstellung | Was sie steuert |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text color** | Farbe des ausgewählten Textelements. |
| **Font** | **Theme font** (übernimmt die Schrift deines Themes) oder **Custom font** (Namen einer Schrift eingeben, die dein Theme bereits lädt). Nur für **Heading** verfügbar. |
| **Size** | Schriftgröße in Pixeln. |
| **Weight** | Schriftstärke: Light, Regular, Medium, Semibold oder Bold. |
| **Line height** | Zeilenhöhe als Multiplikator der Schriftgröße (zum Beispiel `1.4`). |
| **Letter spacing** | Buchstabenabstand in Pixeln. Negative Werte engen den Text. |
Die gestaltbaren Textelemente sind nach Kategorie gruppiert:
**Heading**
* **Heading** — die Abschnittsüberschrift über den Upsell-Karten (zum Beispiel *You may also like*). Unterstützt außerdem eine benutzerdefinierte Schriftfamilie. Fettschrift und Farbe werden im Rich Text Editor oberhalb festgelegt.
**Product**
* **Product title** — der Produktname auf jeder Upsell-Karte.
* **Review count** — die Bewertungsanzahl, die angezeigt wird, wenn **Show product reviews** aktiviert ist.
**Pricing**
* **Price** — der aktuelle Preis auf jeder Karte.
* **Compare-at price** — der durchgestrichene ursprüngliche Preis.
* **Discount** — die Rabattbeschriftung (zum Beispiel *20% off*).
Wenn du ein Feld leer lässt, behält das Element seinen Standardwert.
Klickst du ein Textelement direkt in der Cart-Vorschau an, wird es hervorgehoben und seine Steuerungen öffnen sich automatisch im Panel.
### Kachelfarben
| Einstellung | Was sie steuert | Standard |
| ------------------------- | ------------------------------------------------- | ----------- |
| **Tile background color** | Die Hintergrundfüllung jeder Upsell-Produktkarte. | Transparent |
| **Tile border color** | Die Rahmenfarbe jeder Upsell-Produktkarte. | `#F6F6F7` |
### Bewertungen
Wenn **Show product reviews** aktiviert ist, kannst du die Sternfarben im Abschnitt **Reviews** des Design-Panels anpassen.
| Einstellung | Was sie steuert | Standard |
| -------------------- | --------------------------------- | --------- |
| **Star color** | Der gefüllte Teil jedes Sterns. | `#FDCC0D` |
| **Empty star color** | Der ungefüllte Teil jedes Sterns. | `#D1D5DB` |
## Platzierung und Limits
* **Bereich:** Body oder unten.
* **Maximum:** 1 pro Warenkorbzustand — der gefüllte und der leere Warenkorb erhalten jeweils einen eigenen.
* **Zustand:** sowohl gefüllter als auch leerer Warenkorb.
* Nicht standardmäßig hinzugefügt. Nicht gesperrt — du kannst ihn entfernen oder ausblenden.
## Eine Strategy auswählen
Ein Upsells-Block kommt nicht leer an: Wenn keine Strategy festgelegt ist, löst Aftersell die Shopify-AI-Strategie deines Stores auf — und erstellt sie, falls du noch keine hast — und trägt sie ein, sodass der Block sofort funktioniert. Öffne die **Strategy**-Auswahl, um sie zu ändern. Die Auswahl hat zwei Gruppen:
**Quick start**
* **Create strategy from selected products** — wähle direkt bestimmte Produkte aus, und eine Strategy wird automatisch für dich erstellt.
* **Create strategy from scratch** — öffnet den Strategy-Editor, damit du Regeln erstellen kannst, ohne den Cart-Editor zu verlassen.
**Strategies**
* **Shopify AI recommendations** — erstellt eine Strategy auf Basis von Shopifys eigenen Empfehlungen, die danach überall als **Shopify AI recommended products** erscheint. Dieser Eintrag verschwindet, sobald du eine hast, da ein Store immer nur eine einzige Shopify-AI-Strategie braucht.
* Deine bestehenden Strategies, nach Namen aufgelistet. Tippe in das Suchfeld, um sie zu filtern.
Sobald eine Strategy ausgewählt ist, erscheint ihr Name in der Strategy-Zeile innerhalb des Blocks.
## Eine ausgewählte Strategy verwalten
Nachdem eine Strategy angehängt wurde, erscheint ein **•••**-Button (Ellipse) in der Strategy-Zeile. Klicke darauf, um das Aktionsmenü zu öffnen:
* **Edit strategy** — öffnet den Strategy-Editor in einem neuen Tab, sodass deine Cart-Editor-Sitzung und alle ungespeicherten Änderungen erhalten bleiben. Diese Option ist für die Shopify-AI-Empfehlungsstrategie nicht verfügbar, da sie automatisch verwaltet wird und keine bearbeitbaren Regeln hat.
* **Remove from upsell** — löst die Strategy von diesem Block. Die Strategy selbst wird nicht gelöscht; sie bleibt in deiner Strategies-Liste verfügbar.
Das Bearbeiten einer Strategy in einem neuen Tab beeinflusst die Cart-Editor-Sitzung nicht — du kannst zum Cart-Editor-Tab zurückkehren und weiter konfigurieren, ohne deine Arbeit zu verlieren.
## Custom Template
Unterstützt ein [Custom Template](/de/aftersell/cart/custom-templates) über seinen Code-Tab, das das integrierte Markup dieses Blocks durch dein JSX ersetzt. Diese Props erhält es.
### Blockinhalt
| Prop | Typ | Wofür sie ist |
| --------------- | ---------------------- | --------------------------------------------------------------------------------- |
| `title` | `string` | Abschnittsüberschrift. |
| `addButtonText` | `string` | Beschriftung des Add-to-Cart-Buttons. |
| `layout` | `'carousel' \| 'list'` | Horizontales Scrollen oder Umbruch. Verzweige dein Markup danach. |
| `upsells` | `UpsellCard[]` | Die anzeigefertigen Produkte. Siehe [die Kartenstruktur](#the-upsell-card) unten. |
| `isLoading` | `boolean` | `true`, während die Upsell-Produkte noch abgerufen werden. |
### Zum Warenkorb hinzufügen
| Prop | Typ | Wofür sie ist |
| ----------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| `selectVariant` | `(productId: string, variantId: number) => void` | Wählt eine Variante für ein Produkt aus. |
| `handleAdd` | `(productId: string) => void` | Fügt die ausgewählte Variante dieses Produkts zum Warenkorb hinzu. |
| `addingProductId` | `string \| null` | Das Produkt, das gerade hinzugefügt wird, damit du nur dessen Button deaktivieren kannst. `null` im Leerlauf. |
### Carousel-Steuerelemente
Nur relevant, wenn `layout` `'carousel'` ist.
| Prop | Typ | Wofür sie ist |
| -------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------- |
| `trackRef` | `{ current: HTMLDivElement \| null }` | Hänge sie mit `ref={props.trackRef}` an deinen Scroller, damit die Pfeile ihn scrollen können. |
| `atStart` | `boolean` | `true`, wenn die Spur an ihrem Anfangsrand ist. Deaktiviere den linken Pfeil. |
| `atEnd` | `boolean` | `true`, wenn die Spur an ihrem Endrand ist. Deaktiviere den rechten Pfeil. |
| `scrollByCard` | `(direction: 1 \| -1) => void` | Scrollt die Spur eine Karte nach links (`-1`) oder rechts (`1`). |
### Die Upsell-Karte
Jeder Eintrag in `upsells`:
| Feld | Typ | Wofür es ist |
| ------------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `productId` | `string` | Produkt-GID. Verwende sie als React-Key und als Add-to-Cart-Ziel. |
| `title` | `string` | Produkttitel. |
| `description` | `string` | Beschreibung als reiner Text. `''`, wenn das Produkt keine hat. |
| `url` | `string \| null` | URL der Produktseite. `null`, wenn nicht verfügbar. |
| `imageUrl` | `string \| null` | Hauptbild. `null`, wenn das Produkt keines hat. |
| `selectedVariantImageUrl` | `string \| null` | Das eigene Bild der ausgewählten Variante. `null`, wenn keines vorhanden — greife auf `imageUrl` zurück. |
| `variantTitle` | `string \| null` | Die Optionswerte der ausgewählten Variante (z. B. `Medium / Blue`), bereits aufgelöst. `null`, wenn die Variante keinen echten Titel hat — leer oder Shopifys `Default Title`-Platzhalter. Ein Produkt mit nur einer benannten Variante gibt diesen Namen weiterhin zurück, also sichere mit `{upsell.variantTitle && …}` ab, statt dich auf `hasMultipleVariants` zu verlassen. |
| `priceLabel` | `string` | Anzuzeigender Preis, bereits formatiert. Der Aktionspreis bei Rabatt, sonst der Variantenpreis. |
| `compareAtLabel` | `string \| null` | Durchgestrichener Originalpreis, bereits formatiert. `null`, wenn nichts durchzustreichen ist. |
| `discountLabel` | `string \| null` | Inline-Rabattlabel wie `(20% off)`. `null`, wenn nicht rabattiert. |
| `review` | `object \| null` | `{ rating, count, stars }`, wobei `stars` 5 vorgerenderte Bild-URLs mit eingebauter Teilfüllung sind. Rendere jede als Bildelement. `null`, wenn Bewertungen aus sind oder das Produkt keine hat. |
| `options` | `Array<{ name, values }>` | Optionsgruppen, zum Bauen von Auswahlfeldern oder Swatches. |
| `variants` | `array` | Die Variantenkombinationen. Siehe unten. |
| `selectedVariantId` | `number` | Die aktuell ausgewählte Variante. Übergib sie an `selectVariant`. |
| `hasMultipleVariants` | `boolean` | Ob überhaupt eine Variantenauswahl gerendert werden soll. |
| `vendor` | `string` | Der Anbieter des Produkts. |
Jeder Eintrag in `variants` trägt `id`, `title`, `price` und `compareAtPrice` (roh, unformatiert, in der Haupteinheit der Währung als Strings), `availableForSale`, `imageUrl`, `sku` und `selectedOptions` (`[{ name, value }]`).
**Verfügbarkeit gilt pro Kombination, nicht pro Option.** `options` liefert dir die zu rendernden Gruppen, aber ob eine bestimmte Auswahl kaufbar ist, steht am passenden Eintrag in `variants`. Löse die vom Käufer gewählte Kombination gegen `variants` auf und prüfe das `availableForSale` dieses Eintrags, statt anzunehmen, dass jeder Wert in `options` bestellbar ist.
`priceLabel` und `compareAtLabel` sind bereits für die Anzeige formatiert, während `variants[].price` und `variants[].compareAtPrice` rohe Strings in der Haupteinheit der Währung sind. Vermische die beiden nicht: Zeige die Labels an und nutze die Rohwerte nur für Vergleiche.
## Design
Gestalte diesen Block über seinen **Design**-Abschnitt im Einstellungs-Panel. Das sind Überschreibungen pro Block, die auf deinem globalen Design aufsetzen und auf dieses zurückfallen, wenn sie leer sind.
Was sind Design settings? Erfahre hier mehr: [Design settings](/de/aftersell/cart/design-settings).