Skip to main content
Der Product add-on-Block bietet ein einzelnes, bestimmtes Produkt deiner Wahl als Add-on im Warenkorb an und bewirbt damit ein bekanntes Produkt (eine Garantie, eine Probe, einen Bestseller) als Quick-Add direkt im Warenkorb.
Anders als Upsells, das Produkte anzeigt, die von einer Strategie ausgewählt werden, zeigt das Product add-on immer genau das Produkt, das du auswählst.
Product add-on-Block, der ein zusätzliches Produkt anbietet, das der Käufer seinem Warenkorb hinzufügen kann

​
Verhalten

  • Wenn keine Live-Variante aufgelöst wird — das Produkt ist nicht gesetzt, archiviert oder ausverkauft — rendert der Block nichts statt eines toten Buttons.
  • Das Steuerelement spiegelt wider, ob die Add-on-Zeile dieses Blocks im Warenkorb ist — das Ausschalten entfernt also die Zeile, die er hinzugefügt hat (und beeinflusst nicht dasselbe Produkt, das anderswo hinzugefügt wurde).
  • Ein Vergleichspreis wird durchgestrichen, wenn es einen echten Preisnachlass gibt; das „% off“-Label wird ausgeblendet, wenn der Rabatt auf unter 1 % rundet.
  • Das Add-on-Bild fällt auf das Hauptbild des Produkts zurück, wenn die gewählte Variante keins hat.

​
Einstellungen

Title, Price label und Description unterstützen alle dieselben vier Tokens: {{product_title}}, {{price}}, {{compare_at_price}} und {{savings}}.

​
Platzierung und Limits

  • Region: Body oder unten.
  • Maximum: 3 pro Warenkorb-Zustand — der gefüllte und der leere Warenkorb erhalten jeweils ihr eigenes Kontingent.
  • Zustand: sowohl gefüllter als auch leerer Warenkorb.
  • Nicht standardmäßig hinzugefügt. Nicht gesperrt — du kannst ihn entfernen oder ausblenden.

​
Benutzerdefiniertes Template

Unterstützt ein benutzerdefiniertes Template über seinen Code-Tab, das das integrierte Markup dieses Blocks durch dein JSX ersetzt. Das sind die Props, die er erhält.

​
Inhalt

​
Zustand und Actions

format entscheidet, welcher Handler gilt: handleAdd für button, handleToggle für checkbox und toggle. Ein variantId von null bedeutet, dass es nichts hinzuzufügen gibt — sperre dein Steuerelement also darauf, statt einen Handler aufzurufen, der nicht erfolgreich sein kann.

​
Design

Style diesen Block über seinen Design-Abschnitt im Einstellungs-Panel. Das sind blockspezifische Overrides, die über deinem globalen Design liegen und darauf zurückfallen, wenn sie leer sind.

​
Text

Der Abschnitt Text in Design lässt dich die Typografie dreier Elemente steuern. Verwende den Text element-Picker, um zwischen ihnen zu wechseln. Title — der Produktname. Unterstützt zusätzlich eine benutzerdefinierte Schriftfamilie. Fett und Textfarbe werden im Rich-Text-Editor darüber (im Settings-Tab) festgelegt, nicht hier. Price — die Preiszeile. Fett und Textfarbe werden im Rich-Text-Editor darüber festgelegt. Description — der Begleittext. Fett und Textfarbe werden im Rich-Text-Editor darüber festgelegt.
Ein Klick auf ein Textelement direkt in der Warenkorb-Vorschau hebt es hervor und öffnet dessen Steuerelemente automatisch im Panel.
Was sind Design-Einstellungen? Erfahre mehr hier: Design-Einstellungen.