Personyze Wiki Personyze Wiki docs
Deutsch
Open Personyze
Docs/ Vorlage: Buy Together (Bundle-Builder)

Vorlage: Buy Together (Bundle-Builder)

Ein Bundle-Builder mit Live-Summen – drei Layouts, Stilakzente, Badges, Social Proof, Schutz vor veralteten Daten und alle Einstellungen.

17 min read Updated 2 Minuten ago

Ein Bundle-Builder im Stil „Frequently Bought Together“ mit Live-Summen: Das aktuelle Produkt steht als Anker („This item“) neben empfohlenen Ergänzungen, jede mit eigenem 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 Klick die ganze Auswahl in den Warenkorb.

Vorlage Buy Together — Bundle-Builder mit Produktschaltern, Pluszeichen, Live-Bundle-Summe, durchgestrichenem Originalpreis und Zeile „You save“

So funktioniert diese Vorlage

  • Drei Layouts. Die Einstellung Layout wechselt zwischen vertical (eine gestapelte Liste mit Schaltern — der Standard), horizontal (eine Produktreihe mit Pluszeichen, die sich 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 seine Beschriftung „This item“ behält). Im kompakten Streifen setzt Title Position die Überschrift entweder links neben die Produkte (der Standard) oder in eine volle Zeile darüber. Auf schmalen Bildschirmen wird die horizontale Reihe automatisch zu einer sauberen gestapelten Liste.
  • Stilakzente und Look-Presets. Eine Auswahl Style accent (light, gold, bold, ocean) färbt Schalter, Buttons, Summen, Ersparnis und Karten gemeinsam ein. Darüber hinaus: Title Look (plain, caps, serif, underline, boxed), Buttons Look (solid, pill, outline, dark, square), Text Font (system, serif, rounded, condensed) und Item Info Order (standard, price-first, info-top, name-first). Jede Farbe und Schrift lässt sich in ihrem eigenen Stilfeld einzeln ü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, standardmäßig an).
  • Wie viele Empfehlungen. Bis zu acht Empfehlungen werden geladen, sichtbar sind aber nur Max Items Shown (Standard 2). Der Rest liegt hinter einem Link + N more; eingeblendete Artikel erscheinen ausgeschaltet, sodass die Summe 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. Wählen Sie, ob das Bundle mit all Artikeln an, mit none oder nur mit dem anchor-Produkt ausgewählt startet. Farbe und Sichtbarkeit des Auswahlelements sind eigene Einstellungen.
  • Bestätigungsstil. Nach dem Hinzufügen zum Warenkorb oder dem Speichern auf der Wunschliste sieht der Käufer eine Bestätigung. Confirmation Style bietet modern (ein dunkler abgerundeter Toast mit Häkchen — der Standard), system (die eingebaute Personyze-Benachrichtigung) oder custom (eigenes JS aus den Feldern Success und Error Action ausführen). Der Toast lässt sich über Confirmation Toast Style umgestalten.
  • Live-Demomodus. Beim Gestalten erscheinen automatisch realistische Demoprodukte mit funktionierenden Schaltern und Summen — Besucher der Website sehen sie nie.

Einstellungen im Editor ändern

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

Buy-Together-Editor: die Gruppe „How Many Recommendations“ mit „Max Items Shown“ und den Einstellungen für den Link „Show More“, in der Vorschau mit vertikalem Layout

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

Buy-Together-Editor: die geöffnete Auswahl „Layout“ mit den Optionen vertical, horizontal und compact, in der Vorschau der kompakte Streifen

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

Badges, Social Proof und Produktinfos

  • Badges mit sinnvollen Standards. Rabatt in Prozent (ausgeblendet bei 0 % Rabatt), NEW (in den letzten 14 Tagen hinzugefügte Produkte), Popular und Bestseller (Top 5 % nach Aufrufen oder Käufen) und Low Stock, das den live verbleibenden Bestand zeigt, gefolgt von bearbeitbarem Text wie „left in stock“ (greift bei 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.
  • Produktinfozeilen. Zusätzliche Katalogfelder (Marke, eigene Spalten) unter dem Produktnamen, mit derselben Bereichseinstellung.

Laden, Pop-ups und Stabilität

  • Lade-Skelett. Schimmernde Platzhalterzeilen (standardmäßig an) erscheinen, bis die Empfehlungen eintreffen; das Widget springt also nie abrupt ins Bild.
  • Smooth Reveal. Das Widget bleibt einen Moment unsichtbar, bis Größe und Position feststehen, und blendet dann ein — kein sichtbares Springen beim Laden der Seite. Standardmäßig an, mit einer Sicherheitsgrenze, die es immer innerhalb von etwa drei Sekunden einblendet.
  • Schutz vor veralteten Daten. Bei der Navigation laufen das Produktaufruf-Ereignis und die Empfehlungsanfrage um die Wette; würde das Widget mit dem Produkt der vorigen 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. Das hält das Widget auch automatisch von Nicht-Produktseiten fern — keine Zielgruppenregel nötig.
  • Popup Hugs Widget. Läuft das Widget in einem Pop-up, das viel breiter ist als es selbst, verkleinert es den Pop-up-Rahmen passend. Schalten Sie das für bewusst vollbreite Banner-Pop-ups aus.

Alle Einstellungen

Jede Einstellung liegt in der Seitenleiste des Aktionseditors, genau wie unten gruppiert. Klicken Sie auf eine Gruppe, um ihre Liste aufzuklappen. Mit (CSS) markierte Einstellungen nehmen rohes CSS; die übrigen sind Text, Zahlen oder einfache Auswahlen.

Style Accent — Farb-Preset plus die Gesamtanordnung.
  • Style accent — light = klares Blau. gold = dunkel, edel. bold = Rot. ocean = tiefes Blau. Färbt Schalter, Buttons, Summen, Links und Karten gemeinsam ein.
  • Text Font — system = klare Sans-Serif. serif = klassische Serifenschrift. rounded = freundliche runde Sans. condensed = schmale, platzsparende Sans.
  • Item Info Order — standard = Beschriftung, Name, Preis, Details. price-first = Preis über dem Namen. info-top = Produktdetails über dem Namen. name-first = Name über der kleinen Beschriftung.
  • Layout — vertical = gestapelte Liste mit Schaltern. horizontal = Produktreihe mit Pluszeichen, im Amazon-Stil. compact = einzeiliger Mini-Streifen für Warenkorbseiten.
Catalog Fields — Welche Katalogspalten das aktuelle Produkt und die Empfehlungen speisen. Einmal pro Website festlegen.

Ordnet Ihre Katalogspalten der Vorlage zu (Produkttitel, Preise, Bild, URL, Marke, Bestand und eigene Attribute).

Layout — Widget-Container, Trenner und Ladeverhalten.
  • Widget Outer Container Style (CSS) — Äußerer Widget-Container: Breite, Innenabstand, Außenabstand, Schrift und Hintergrund.
  • Separator Character — Das Symbol zwischen den Produkten im horizontalen und kompakten Layout. Meist ein Pluszeichen.
  • Separator Style (CSS) — Zusätzliches CSS für den Trenner +: Farbe, Größe usw.
  • Loading Skeleton — Graue, schimmernde Platzhalterzeilen, die kurz angezeigt werden, während die Empfehlungen laden, und dann durch die echten Karten ersetzt werden. Standardmäßig an.
  • Smooth Reveal — Das Widget einen Moment unsichtbar halten, bis Größe und Position feststehen, und dann einblenden. Verhindert sichtbares Springen beim Laden der Seite.
  • Popup Hugs Widget — Läuft das Widget in einem Pop-up, das viel breiter ist als das Widget, wird der Pop-up-Rahmen passend verkleinert. Für vollbreite Banner-Pop-ups ausschalten.
Title — Die Überschrift über den Produkten.
  • Title Look — plain = wie gestaltet. caps = Großbuchstaben mit Laufweite. serif = elegante Serifenschrift. underline = Akzent-Unterstreichung. boxed = getönte Pille hinter dem Titel.
  • Title Text — Überschrift über der Kartenliste, z. B. Bundle vervollständigen.
  • Title Position (Strip Layout) — Wo die Überschrift im kompakten Streifen sitzt: side = links neben den Produkten, der aktuelle Look. top = volle Zeile über den Produkten.
  • Title Icon — none = kein Symbol. library = ein eingebautes Symbol wählen. image = ein eigenes hochgeladenes Bild verwenden.
  • Icon (from library) — Ein Symbol aus der eingebauten Bibliothek wählen. Angezeigt, wenn Title Icon auf library steht.
  • Library Icon Style (CSS) — Größe, Farbe und Abstände des Bibliothekssymbols.
  • Icon Image — Ihr eigenes Bild, angezeigt, wenn Title Icon auf image steht.
  • Icon Image Style (CSS) — Größe und Abstände des Bildsymbols.
  • Title Style (CSS) — Schriftgröße, -stärke und -farbe des Titels.
Product Cards — Aussehen jeder Produktkarte und ihrer Teile.
  • Recommended Item Label — Kleine Beschriftung über jedem empfohlenen Produktnamen, z. B. Add to bundle.
  • Open Product Links In — Wo sich Links der Produktnamen öffnen: gleicher Tab (_self) oder neuer Tab (_blank).
  • Card Style (CSS) — Innenabstand, Außenabstand, Hintergrund und Rahmen jeder Produktkartenzeile.
  • Product Image Style (CSS) — Größe, Rahmen und Hintergrund des Produkt-Vorschaubilds in jeder Karte.
  • Product Name Style (CSS) — Schrift, Größe und Farbe des Produktnamens.
  • Item Label Style (CSS) — Stil der kleinen Beschriftung über jedem Namen (This item / Add to bundle).
  • Price Style (CSS) — Schrift, Größe und Farbe des Preises.
  • Original Price Style (strikethrough) (CSS) — Stil des durchgestrichenen Originalpreises.
How Many Recommendations — Sichtbare Empfehlungen begrenzen, der Rest hinter einem Link „Show More“.
  • Max Items Shown — Wie viele empfohlene Produkte zunächst sichtbar sind. Bis zu 8 werden geladen; der Rest verbirgt sich hinter dem Link „Show More“. Standard 2.
  • Show More Link — on = verborgene Artikel lassen sich mit einem Link wie + 3 more einblenden. off = zusätzliche Artikel werden gar nicht angezeigt.
  • Show More Text — Beschriftung des Einblendlinks. Schreiben Sie %N dort, wo die Zahl der verborgenen Artikel erscheinen soll.
  • Show Less Text — Beschriftung des Links nach dem Aufklappen, um die zusätzlichen Artikel wieder einzuklappen, z. B. Show less.
  • Show More Link Style (CSS) — Stil des Einblendlinks.
Current Product (This Item) — Das Produkt, das der Besucher ansieht, als erste Karte.
  • Current Product Label — Kleine Beschriftung über dem Namen des aktuellen Produkts, z. B. Dieser Artikel.
  • Require Current-Page View — on = das Widget erscheint nur, wenn die Karte des aktuellen Produkts auf die gerade angesehene Seite verlinkt; gehören die Daten noch zu einer vorigen Seite (oder ist der Besucher nicht auf einer Produktseite), blendet sich das ganze Widget aus, statt ein veraltetes Bundle zu zeigen. Standardmäßig an; auf off stellen, um immer zu zeigen, was die Datenquelle liefert.
  • Emphasize Current Product — Die aktuelle Karte hervorheben. off = keine Hervorhebung. tint = sanfter Akzenthintergrund. ring = Akzentrahmen mit Leuchten. bar = Akzentstreifen links. badge = kleines Akzent-Tag oben.
  • Current Product Badge Text — Text des kleinen Tags, wenn Emphasize auf badge steht, z. B. Ihr Artikel.
  • Current Product Card Style (CSS) — Zusätzliches CSS nur für die Karte des aktuellen Produkts (zusätzlich zum normalen Kartenstil).
  • Require Current-Page View — standardmäßig an: Das Widget erscheint nur, wenn die Karte des aktuellen Produkts auf die gerade angesehene Seite verlinkt; auf anderen Seiten oder wenn die Daten noch zur vorigen Seite gehören, blendet sich das ganze Widget aus, statt ein veraltetes Bundle zu zeigen. Schalten Sie es aus, um immer zu zeigen, was die Datenquelle liefert — etwa wenn Sie das lieber auf Zielgruppenebene steuern, indem Sie Besucher ansprechen, deren letzte Interaktion ein Produktaufruf ist.
Selection & Toggles — Wie Käufer Artikel ein- oder ausschließen und welche anfangs ausgewählt sind.
  • Default Selection — Welche Artikel anfangs angehakt sind. all = jeder Artikel ausgewählt (höchster Bundle-Wert). anchor = nur das aktuelle Produkt. none = Empfehlungen starten aus, nur das aktuelle Produkt ist angehakt.
  • Show Include Toggle — Das Ein-/Aus-Element anzeigen, mit dem Käufer jeden Artikel ein- oder ausschließen. Ausschalten, um immer jeden angezeigten Artikel einzuschließen.
  • Include Control Style — switch = Schiebeschalter. checkbox = klassisches Kontrollkästchen mit Häkchen.
  • Include Control Position — Wo Schalter/Kontrollkästchen auf jeder Karte sitzt: right (Standard), left, center oder outside-left (im Rand links der Karte).
  • Toggle / Checkbox Color — Farbe des Elements, wenn ein Artikel ausgewählt ist. Unverändert lassen, um automatisch dem Style accent zu folgen, oder eine bestimmte Farbe wählen, um ihn zu überschreiben.
Prices — Preisanzeige, Währungssymbole und Zahlenformat.
  • Show Prices — Preisanzeige auf jeder Karte ein- oder ausschalten.
  • Currency Symbol Before Price — Symbol vor dem Preis, z. B. € oder EUR.
  • Currency Symbol After Price — Symbol nach dem Preis, z. B. EUR.
  • Number Format Locale — BCP-47-Locale-Tag, z. B. en, de, fr, he-IL.
  • Decimal Places — Anzahl der Nachkommastellen in Preisen, z. B. 2 für 9,99 €.
  • Label for Free Items — Text statt eines Preises, wenn das Produkt kostenlos ist, z. B. FREE.
Total Price Display — Die Bundle-Summe, die Ersparniszeile und der Zähler der ausgewählten Artikel.
  • Total Label Text — Beschriftung über dem Gesamtpreis, z. B. Bundle total:
  • Total Label Style (CSS) — Schriftgröße und Farbe der Summenbeschriftung.
  • Total Amount Style (CSS) — Stil des Gesamtbetrags.
  • Original Price Style (strikethrough) (CSS) — Stil der Originalsumme, die bei einem Rabatt durchgestrichen erscheint.
  • Animate Total on Change — Dezente Pop-Animation am Gesamtbetrag, jedes Mal wenn ein Artikel ein- oder ausgeschaltet wird.
  • Show Savings Line — Eine Ersparniszeile unter der Summe anzeigen, etwa: You save 401.00, sobald das gewählte Bundle günstiger ist als die Originalpreise.
  • Savings Label — Text vor dem gesparten Betrag, z. B. You save.
  • Savings Line Style (CSS) — Schrift, Größe und Farbe der Ersparniszeile. Standardmäßig grün und fett.
  • Show Selected Counter — Eine Zeile unter der Summe anzeigen, etwa: 3 of 5 items selected. Standardmäßig aus.
  • Counter Text — Text des Zählers. Schreiben Sie %N für die Zahl der ausgewählten und %M für die Gesamtzahl der angezeigten Artikel.
  • Counter Style (CSS) — Schrift, Größe und Farbe der Zählerzeile.
Add to Cart Button — Der Haupt-Button für den Warenkorb und sein Verhalten.
  • Buttons Look — solid = gefülltes Rechteck. pill = vollständig abgerundet. outline = transparent mit Akzentrahmen. dark = fast schwarz gefüllt. square = scharfe Ecken.
  • Button Text — Beschriftung des Warenkorb-Buttons, z. B. Add bundle to cart.
  • Extra add_to_cart Argument — Optionales zusätzliches Argument für die Funktion add_to_cart_for_personyze() Ihrer Website.
  • Button Normal Style (CSS) — Standardaussehen des Buttons.
  • Button Hover Style (CSS) — Aussehen des Buttons beim Überfahren mit der Maus.
  • On Success (JS) – Advanced Override — Erweitert: den gesamten Erfolgs-Handler durch eigenes JavaScript ersetzen. Leer lassen für die Standard-Erfolgsmeldung.
  • On Error (JS) – Advanced Override — Erweitert: den gesamten Fehler-Handler durch eigenes JavaScript ersetzen. Leer lassen für die Standard-Fehlermeldung.
Cart Messages — Die Bestätigung nach dem Hinzufügen zum Warenkorb.
  • Confirmation Style — modern = dunkle abgerundete Toast-Blase mit Häkchen, passend zur Bestätigung der Wunschliste. system = die eingebaute Personyze-Benachrichtigung. custom = eigenes JS aus den Feldern Success und Error Action ausführen.
  • Success Message Text — Angezeigt, nachdem Artikel in den Warenkorb gelegt wurden. Standard: Bundle added to cart.
  • Success Message Style (CSS) — Stil des Erfolgsbanners.
  • Error Message Text — Angezeigt, wenn das Hinzufügen zum Warenkorb fehlschlägt. Standard: Cannot add to cart.
  • Error Message Style (CSS) — Stil des Fehlerbanners.
Product Info — Zusätzliche Katalogattribute (Marke oder eigene Spalten) auf den Karten.
  • Show Product Info On — Welche Karten diese Attribute zeigen. all = aktuelles Produkt und Empfehlungen. main = nur das aktuelle Produkt. recommended = nur die Empfehlungen.
  • Show Brand — Marke/Hersteller des Produkts anzeigen.
  • Brand Label — Optionaler Text vor der Marke, z. B. "Marke: ". Leer lassen für keinen.
  • Show Custom Attribute 1 — Das erste eigene Attribut anzeigen (zugeordnet in Catalog Fields).
  • Custom Attribute 1 Label — Optionaler Text vor Attribut 1, z. B. "Farbe: ".
  • Show Custom Attribute 2 — Das zweite eigene Attribut anzeigen.
  • Custom Attribute 2 Label — Optionaler Text vor Attribut 2.
  • Product Info Style (CSS) — Schriftgröße und Farbe der Produktinfozeile.
Social Proof Text — Live-Zeilen zu Aufrufen / Käufen / niedrigem Bestand unter den Produkten.
  • Show Social Proof On — Welche Karten die Social-Proof-Zeilen zeigen. all = aktuelles Produkt und Empfehlungen. main = nur das aktuelle Produkt. recommended = nur die Empfehlungen.
  • Timeframe — today = letzte 24 Stunden. week = letzte 7 Tage.
  • Show Views — Zeigen, wie viele Menschen das Produkt angesehen haben.
  • Show Purchases — Zeigen, wie viele Menschen das Produkt gekauft haben.
  • Show Low Stock — Eine Zeile zu niedrigem Bestand zeigen, wenn der Bestand den Schwellenwert erreicht oder unterschreitet (nur Empfehlungen; braucht eine Bestandsspalte).
  • Minimum Views to Show — Die Aufrufzeile nur zeigen, wenn die Zahl mindestens so hoch ist. Standard 30.
  • Minimum Purchases to Show — Die Kaufzeile nur zeigen, wenn die Zahl mindestens so hoch ist. Standard 3.
  • Low Stock Threshold — Die Zeile zu niedrigem Bestand zeigen, wenn der Bestand diesen Wert erreicht oder unterschreitet. Standard 10.
  • Views Label (today) — Text nach der Aufrufzahl, z. B. heute angesehen.
  • Views Label (week) — Text nach der Aufrufzahl, z. B. diese Woche angesehen.
  • Purchases Label (today) — Text nach der Kaufzahl, z. B. heute gekauft.
  • Purchases Label (week) — Text nach der Kaufzahl, z. B. diese Woche gekauft.
  • Low Stock Text — Text nach der Bestandszahl, z. B. left in stock.
  • Views Icon — Symbol neben der Aufrufzeile.
  • Purchases Icon — Symbol neben der Kaufzeile.
  • Low Stock Icon — Symbol neben der Zeile zu niedrigem Bestand.
  • Social Proof Text Style (CSS) — Schriftgröße und Farbe der Social-Proof-Zeilen.
  • Views Line Style (CSS) — Stil speziell für die Aufrufzeile (überschreibt den gemeinsamen Stil).
  • Purchases Line Style (CSS) — Stil speziell für die Kaufzeile.
  • Low Stock Line Style (CSS) — Stil speziell für die Zeile zu niedrigem Bestand.
  • Views Icon Style (CSS) — Größe und Farbe des Aufrufsymbols.
  • Purchases Icon Style (CSS) — Größe und Farbe des Kaufsymbols.
Popular Badge — Ein Badge „Popular“ an den meistangesehenen Produkten.
  • Show Popular Badge — Das Badge „Popular“ ein- oder ausschalten.
  • Time Frame — Beliebtheit über die letzte Woche oder nur heute messen.
  • Threshold % (top N%) — Das Badge erscheint an Produkten in den Top N % der meistangesehenen. z. B. 5 = Top 5 %.
  • Badge Text — Beschriftung auf dem Badge. Standard: Popular
  • Badge Style (CSS) — Position, Hintergrundfarbe und Form des Badges „Popular“.
  • Badge Text Style (CSS) — Schriftgröße und -stärke der Beschriftung des Badges „Popular“.
Best Seller Badge — Ein Badge „Best Seller“ an den meistgekauften Produkten.
  • Show Best Seller Badge — Das Badge „Best Seller“ ein- oder ausschalten.
  • Time Frame — Verkäufe über die letzte Woche oder nur heute messen.
  • Threshold % (top N%) — Das Badge erscheint an Produkten in den Top N % nach Anzahl der Käufe. z. B. 5 = Top 5 %.
  • Badge Text — Beschriftung auf dem Badge. Standard: Best Seller
  • Badge Style (CSS) — Position, Hintergrundfarbe und Form des Badges „Best Seller“.
  • Badge Text Style (CSS) — Schriftgröße und -stärke der Beschriftung des Badges „Best Seller“.
Discount Badge — Ein Badge mit dem Rabatt in Prozent an rabattierten Produkten.
  • Enable Discount Badge — Das Rabatt-Badge ein- oder ausschalten.
  • Min Discount % — Das Badge erscheint nur, wenn der Rabatt mindestens diesen Prozentsatz erreicht.
  • Badge Extra Label — Optionaler Text nach dem Prozentwert. z. B. ergibt OFF: 20% OFF
  • Badge Style (CSS) — Position, Hintergrund und Form des Rabatt-Badges.
  • Badge Text Style (CSS) — Schriftgröße und -stärke des Rabatttextes.
New Badge — Ein Badge „New“ an kürzlich hinzugefügten Produkten.
  • Enable New Badge — Das Badge „New“ ein- oder ausschalten.
  • New Badge Threshold — Produkte, die innerhalb dieses Zeitraums hinzugefügt wurden, erhalten das Badge.
  • Badge Text — Beschriftung auf dem Badge. Standard: NEW
  • Badge Style (CSS) — Position, Hintergrund und Form des Badges „New“.
  • Badge Text Style (CSS) — Schriftgröße und -stärke der Beschriftung des Badges „New“.
Stock Badge — Ein Warn-Badge bei niedrigem Bestand.
  • Enable Stock Badge — Das Bestands-Badge ein- oder ausschalten.
  • Stock Threshold — Das Badge erscheint, wenn der Bestand diese Zahl erreicht oder unterschreitet.
  • Stock Badge Text Suffix — Text nach der Bestandszahl. z. B. ergibt left: 3 left
  • Badge Style (CSS) — Position, Hintergrund und Form des Bestands-Badges.
  • Badge Text Style (CSS) — Schriftgröße und -stärke des Bestands-Badge-Textes.
Wishlist Button — Der optionale Button zum Merken (standardmäßig aus).
  • Show Wishlist Button — Den Button „Save Bundle for Later“ ein- oder ausschalten.
  • Button Text — Beschriftung des Wunschlisten-Buttons, z. B. Save bundle for later.
  • Confirmation Message After Adding — Nachricht, nachdem Produkte zur Wunschliste hinzugefügt wurden.
  • Confirmation Toast Style (CSS) — Zusätzliches CSS für die dunkle Bestätigungsblase nach dem Speichern auf der Wunschliste, z. B. Hintergrund oder Schriftgröße.
  • Button Normal Style (CSS) — Standardaussehen des Wunschlisten-Buttons.
  • Button Hover Style (CSS) — Aussehen des Wunschlisten-Buttons beim Überfahren mit der Maus.
Close Button — Das optionale Element zum Schließen/Wegklicken.
  • Show Close Button — Den Schließen-Button ein- oder ausschalten.
  • Close Button Content — Beschriftung oder Symbol des Schließen-Buttons.
  • Close Button Style (CSS) — Stil des Schließen-Elements.
Editor Notes — Demo-Bundle und Designhinweis nur für den Editor.
  • Demo Bundle (Preview Only) — Drei Beispielprodukte mit funktionierenden Schaltern und Summen, nur im Editor und in Vorschaulinks sichtbar, solange noch keine echten Daten gerendert werden. Besucher sehen sie nie.
  • Show Editor Note
  • Editor Note Text
  • Guide Link URL

Gut zu wissen

  • Das Widget blendet sich auf Nicht-Produktseiten und bei veralteten Daten aus. Require Current-Page View (standardmäßig an) verhindert, dass das Bundle je das Produkt der vorigen Seite zeigt oder auf der Startseite erscheint. Lieber selbst steuern? Schalten Sie es aus und fügen Sie eine Zielgruppenregel für Besucher hinzu, deren letzte Interaktion ein Produktaufruf 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 Aufruf über die Warenkorbspalten Ihres Katalogs; ein zweiter Wunschlisten-Button Save bundle for later ist standardmäßig aus und lässt sich mit einem Klick aktivieren, und beide lassen sich vollständig umgestalten.
  • Zentrale Preisdarstellung. Eine Auswahl für das Preisformat und ein Paar Felder für Währungssymbole gelten überall, wo Preise erscheinen, auch in Summen und Ersparnis.
  • Robuste Darstellung. Die Stile der Vorlage sind so gebaut, dass sie aggressives Website-CSS überstehen, während Anpassungen pro Element im Editor weiterhin Vorrang vor den Standards der Vorlage haben.
  • Gespeicherte Vorlagenkarten frieren ihren Code ein. Behalten Sie eine eigene Kopie unter Your templates, nutzen daraus erstellte Aktionen den Code vom Zeitpunkt des Speicherns — speichern Sie die Karte nach größeren Updates neu.

Verwandte Themen

Did this page answer your question?
Thank you — that goes to whoever maintains this page.