Buy Together: Bundle-Builder mit Live-Gesamtpreis

Ein Bundle-Builder im Stil „Häufig zusammen gekauft“ mit Live-Summen: Das aktuelle Produkt wird als Anker („This item“) neben empfohlenen Zusatzartikeln gezeigt, jeder mit einem eigenen Ein/Aus-Schalter. Jeder Schalter aktualisiert sofort die Bundle-Summe, den durchgestrichenen Originalpreis, die grüne Zeile You save und den optionalen Zähler N of M items selected — dann legt ein einziger Klick die gesamte Auswahl in den Warenkorb.

So funktioniert diese Vorlage

• Drei Layouts. Die Einstellung Layout wechselt zwischen vertical (eine gestapelte Liste mit Schaltern — die Voreinstellung), horizontal (eine Produktreihe mit Pluszeichen dazwischen, die sich in der Größe an ihre Karten anpasst) und compact (ein Mini-Streifen mit kleinen Fotos, Namen und Preisen — Social-Proof- und Infozeilen bleiben dort ausgeblendet, um Platz zu sparen, während das aktuelle Produkt sein Label „This item“ behält). Im kompakten Streifen setzt Title Position (Strip Layout) die Überschrift entweder in derselben Zeile links neben die Produkte (die Voreinstellung) oder in eine volle Zeile darüber. Auf schmalen Bildschirmen wird die horizontale Reihe automatisch zu einer sauberen gestapelten Liste.
• Style-Akzente und Look-Voreinstellungen. Ein einziges Auswahlfeld Style accent (light, gold, bold, ocean) färbt Schalter, Buttons, Summen, Ersparnis und Karten gemeinsam um. Dazu kommen Title Style Preset (plain, caps, serif, underline, boxed), Button preset (solid, pill, outline, dark, square), Font preset (system, serif, rounded, condensed) und Card Info Order (standard, price-first, info-top, name-first). Jede Farbe und Schrift lässt sich weiterhin einzeln in ihrem eigenen Stilfeld überschreiben.
• Engine für Live-Summen. Die Fußzeile zeigt die Bundle-Summe, die Originalsumme durchgestrichen, wenn Rabatte gelten, eine aus der Differenz berechnete Zeile You save und einen optionalen Zähler der ausgewählten Artikel. Die Summe kann bei jeder Änderung kurz pulsieren (Animate Total on Change, standardmäßig an).
• Wie viele Empfehlungen. Die Vorlage fordert bis zu acht Empfehlungen an (Anzuzeigende Empfehlungen in der Karte Ausgabe der Empfehlung; bis zu 12), sichtbar sind aber nur Max Items Shown (standardmäßig 2). Der Rest liegt hinter einem Link + N more; eingeblendete Artikel erscheinen ausgeschaltet, sodass die Summe immer nur Produkte enthält, die der Besucher tatsächlich gesehen und gewählt hat. Ein erneuter Klick auf den Link (Show Less Text) klappt sie wieder ein.
• Standardauswahl. Legen Sie fest, ob das Bundle mit allen Artikeln eingeschaltet startet (all), mit keiner der Empfehlungen (none) oder nur mit dem ausgewählten Anker-Produkt (anchor). Stil, Position, Farbe und Sichtbarkeit des Auswahl-Elements sind eigene Einstellungen.
• Bestätigungsstil. Nach dem Hinzufügen zum Warenkorb sieht der Käufer eine Bestätigung. Confirmation Style bietet modern (ein dunkler, abgerundeter Toast mit Häkchen — die Voreinstellung), system (die eingebaute Personyze-Benachrichtigung) oder custom (Ihr eigenes JavaScript aus den Feldern On Success und On Error unter Quick add to cart).
• Live-Demo-Modus. Beim Gestalten erscheinen automatisch Demo-Produkte mit funktionierenden Schaltern und Summen — Besucher der Website sehen sie nie.

Bundle-Preis und Rabatt

Jeder Preis im Widget — jeder Artikel, die Bundle-Summe, die durchgestrichene Originalsumme und die Zeile You save — stammt aus Ihrem Produktkatalog, über die Preisspalten, die unter Catalog Fields zugeordnet sind. Personyze zeigt das Bundle lediglich; es ändert nicht, was Ihr Warenkorb berechnet.

Die Zusatzartikel selbst stammen aus dem Algorithmus der Empfehlung — zum Beispiel Cross-Sells (zusammen gekaufte Artikel, automatisch gelernt) oder Verwaltete Cross-Sells (Paare, die Sie selbst hochladen). Siehe Empfehlungsalgorithmen.

Best Practices

• Bieten Sie ein oder zwei Partner an. Eine starke Kombination schlägt meist eine Wand aus Auswahlmöglichkeiten — Max Items Shown steht bereits standardmäßig auf 2.
• Testen Sie die Rabatthöhe. Ein Bundle-Rabatt von 10 % kann mehr einbringen als 25 %, wenn er ähnlich gut konvertiert.
• Platzieren Sie es unter dem Hauptproduktbild. Auf der Produktseite, nahe an der Entscheidung für den Warenkorb.
• Messen Sie gegen eine Kontrollgruppe. Geben Sie dem Widget weniger als 100 % des Traffics, damit der Rest Ihrer Besucher die Unveränderte Website sieht, und vergleichen Sie beide im Schritt Leistung der Kampagne — siehe A/B-Tests in Personyze.

Einstellungen im Editor ändern

Jede Einstellung befindet sich in der Seitenleiste links im Aktions-Editor, nach Themen gruppiert; klicken Sie auf eine Gruppe, um sie aufzuklappen, und die Vorschau aktualisiert sich sofort. Zwei Beispiele:

(1) Die Gruppe How Many Recommendations enthält Max Items Shown (standardmäßig 2) und die Texte des Einblendlinks. (2) Show More Link wechselt zwischen dem Einblenden verborgener Artikel per Link und dem schlichten Nicht-Rendern. (3) Der resultierende Link + N more in der vertikalen Liste — ein Klick darauf funktioniert in der Vorschau genau so wie auf der Website.

(1) Das Auswahlfeld Layout schaltet das gesamte Widget mit einem Klick zwischen vertical, horizontal und compact um. (2) Hier der Streifen compact: Titel in derselben Zeile links (über Title Position über die Produkte verschiebbar), einheitliche Mini-Karten mit Pluszeichen dazwischen, der Chip + N more und die Summe mit dem Warenkorb-Button — alles in einer Zeile.

Badges, Social Proof und Produktinfos

• Badges mit sinnvollen Voreinstellungen. Rabatt in Prozent (ausgeblendet, wenn der Rabatt 0 ist), NEW (in den letzten 14 Tagen hinzugefügte Produkte), Popular und Bestseller (die obersten 5 % nach Aufrufen oder Käufen) sowie niedriger Lagerbestand, der die live verbleibende Stückzahl mit einem bearbeitbaren Text wie „left in stock“ zeigt (ab 5 oder weniger Einheiten) — jeder Schwellenwert, Text und Stil ist bearbeitbar.
• Social-Proof-Zeilen. Zahlen „heute angesehen“ und „heute gekauft“ pro Karte, mit einer Bereichseinstellung für alle Karten, nur den Anker oder nur die Empfehlungen.
• Produkt-Infozeilen. Zusätzliche Katalogfelder (Marke, eigene Spalten) unter dem Produktnamen, mit derselben Bereichseinstellung.

Laden, Popups und Stabilität

• Loading skeleton. Schimmernde Platzhalterzeilen (standardmäßig an) erscheinen, bis die Empfehlungen eintreffen, sodass das Widget nie abrupt auftaucht.
• Smooth Reveal. Das Widget bleibt einen Moment unsichtbar, bis Größe und Position feststehen, und blendet sich dann ein — kein sichtbares Springen, während die Seite lädt. Standardmäßig an, mit einer Sicherheitsreserve, die es spätestens nach etwa drei Sekunden immer einblendet.
• Schutz vor veralteten Daten. Bei der Navigation laufen das Produktansichts-Ereignis und die Empfehlungsanfrage um die Wette; würde das Widget mit dem Produkt der vorherigen Seite als „This item“ gerendert, blendet es sich für diesen Seitenaufruf stattdessen aus. Die Prüfung ist eingebaut (Require Current-Page View, standardmäßig an): Die Karte des aktuellen Produkts muss auf die gerade angesehene Seite verlinken. So bleibt das Widget auch automatisch von Seiten fern, die keine Produktseiten sind — ganz ohne Zielgruppenregel.
• Popup Hugs Widget. Läuft das Widget in einem Popup, das viel breiter ist als es selbst, verkleinert es den Popup-Rahmen passend. Schalten Sie das für bewusst vollbreite Banner-Popups aus.

Alle Einstellungen

Jede Einstellung befindet sich in der Seitenleiste des Aktions-Editors, genau wie unten gruppiert. Klicken Sie auf eine Gruppe, um ihre Liste aufzuklappen. Einstellungen mit (CSS) nehmen reines CSS entgegen; die übrigen sind Text, Zahlen oder einfache Auswahlfelder.

Gut zu wissen

• Das Widget blendet sich außerhalb von Produktseiten und bei veralteten Daten aus. Require Current-Page View (standardmäßig an) verhindert, dass das Bundle jemals das Produkt der vorherigen Seite zeigt oder auf der Startseite erscheint. Möchten Sie das lieber selbst steuern? Schalten Sie es aus und fügen Sie eine Zielgruppenregel hinzu, die Besucher anspricht, deren letzte Interaktion eine Produktansicht ist.
• Die Ersparniszeile erscheint nur, wenn es etwas zu sparen gibt. Hat kein ausgewählter Artikel einen Rabatt, blenden sich die durchgestrichene Summe und die Zeile You save aus.
• Add bundle to cart sendet alle ausgewählten Artikel in einem einzigen Aufruf an den Code für Schnell in den Warenkorb Ihres Kontos, zusammen mit allen Katalogfeldern, die Sie dort hinzugefügt haben; solange dieser Code nicht gespeichert ist, zeigt der Button seine Fehlermeldung. Ein zweiter Button Save bundle for later ist standardmäßig aus und lässt sich mit einem Klick aktivieren; beide sind vollständig neu gestaltbar.
• Zentrale Preiseinstellungen. Ein einziges Auswahlfeld Price Format und ein Paar Währungssymbol-Felder gelten überall, wo Preise erscheinen, auch bei Summen und Ersparnis.
• Robustes Rendering. Die Stile der Vorlage sind so gebaut, dass sie aggressives CSS der Website überstehen, während Anpassungen einzelner Elemente im Editor weiterhin Vorrang vor den Standardwerten der Vorlage haben.
• Gespeicherte Vorlagenkarten frieren ihren Code ein. Wenn Sie eine eigene Kopie unter Meine Vorlagen behalten, verwenden die daraus erstellten Aktionen den Code im Zustand beim Speichern — speichern Sie die Karte nach größeren Updates erneut.

Verwandte Themen

• Bought Together: klassischer Streifen — dieselbe Engine im klassischen Look: Bildstreifen oben, Gesamtpreis-Box, Liste mit Kontrollkästchen darunter.
• Button „Schnell in den Warenkorb“ — der Code, den der Button „Add bundle to cart“ ausführt.
• Gutscheincode beim Checkout automatisch anwenden — den Gutschein des Bundles bis zum Checkout mitnehmen.
• Vertical Product List — ein Empfehlungslayout im Listenstil ohne Bundle-Logik.
• Vorlagen — der Überblick über die gesamte Vorlagenbibliothek.