Der klassische „Bought Together“-Look: oben ein Bildstreifen mit Pluszeichen dazwischen, daneben eine Gesamtpreis-Box mit einem einzigen Call-to-Action-Button und darunter eine Liste mit Kontrollkästchen für die Artikel. Wird ein Artikel abgewählt, verschwindet sein Foto aus dem Streifen, die Pluszeichen ordnen sich neu, und Gesamtpreis, Ersparniszeile und die Zahl auf dem Button werden sofort aktualisiert.
So funktioniert diese Vorlage
- Der Streifen spiegelt die Auswahl. Nur ausgewählte Artikel erscheinen im Bildstreifen; das erste sichtbare Foto trägt nie ein Pluszeichen. Max Photos in Strip begrenzt, wie viele Fotos erscheinen (0 = alle; 3 für den streng klassischen Look), und Strip Photo Style steuert Größe und Rahmen. Der gesamte Streifen lässt sich mit Show Image Strip ausschalten.
- Der Button zählt das Bundle. Die Standardbeschriftung ist Add all %N to Cart — %N wird live durch die Anzahl der ausgewählten Artikel ersetzt. Eine eigene Beschriftung Button Text (single item) (Standard: Add to Cart) wird verwendet, wenn nur noch ein Artikel ausgewählt ist.
- Die Liste mit Kontrollkästchen. Jede Zeile zeigt ein Kontrollkästchen, ein optionales Thumbnail, den Produktnamen als Link und rechts den Preis; das aktuelle Produkt trägt das Label This item:. Show Thumbnails in List (an/aus) wechselt zwischen der bebilderten Liste und dem klassischen reinen Text-Look.
- Compact Mobile View. Auf kleinen Bildschirmen (standardmäßig an): kleinere Streifenfotos, die Gesamtpreis-Box rutscht in voller Breite unter den Streifen, Thumbnails werden kleiner, und zusätzliche Infozeilen werden ausgeblendet.
- Gemeinsame Engine. Alles aus der Vorlage Buy Together wird übernommen: vier Style-Akzente plus Look-Voreinstellungen für Title/Buttons/Font/Info-Order, Ersparniszeile und Auswahlzähler, animierter Gesamtpreis, maximale Artikelanzahl mit einem aufklappbaren Link + N more (nachgeladene Artikel kommen abgewählt), Standardauswahl, Badges mit sinnvollen Schwellenwerten, Lade-Skelett, Smooth Reveal, Popup Hugs Widget, zentrales Preisformat, die Bestätigungs-Toasts modern/system/custom und der eingebaute Schutz vor veralteten Daten (Require Current-Page View, standardmäßig an): Das Widget erscheint nur, wenn die Karte des aktuellen Produkts auf die gerade angesehene Seite verlinkt, und blendet sich auf anderen Seiten aus oder wenn die Daten noch zur vorherigen Seite gehören.
- Live-Demo-Modus. Beim Gestalten erscheinen automatisch Demo-Produkte mit funktionierendem Streifen, Summen und Schaltern — Besucher der Website sehen sie nie.
Gut zu wissen
- „This item“ ist immer das gerade angesehene Produkt. Die Karte des aktuellen Produkts ist an die letzte Produktansicht des Besuchers gebunden, unabhängig vom gewählten Empfehlungsalgorithmus — der Algorithmus entscheidet nur über die empfohlenen Zusatzartikel. In der Editor-Vorschau können Beispieldaten einen anderen Eindruck erwecken; auf der Live-Website gilt die Bindung.
- Nachgeladene Artikel kommen abgewählt. Produkte hinter dem Link + N more erhöhen den Gesamtpreis nie unbemerkt; der Streifen baut sich neu auf, sobald Artikel eingeblendet oder zugeklappt werden.
- Fotos mit defekten oder fehlenden Bildern entfernen sich automatisch aus dem Streifen, statt ein Symbol für ein defektes Bild zu zeigen.
- Preise und Ersparnis stammen aus Ihrem Katalog, der Rabatt aus Ihrem Shop. Das Widget zeigt das Bundle nur an — ein echter Bundle-Rabatt braucht eine Warenkorbregel in Ihrem Shop. Siehe Bundle-Preis und Rabatt.
- Add all %N to Cart sendet die ausgewählten Artikel in einem einzigen Aufruf an den Code für Schnell in den Warenkorb Ihres Kontos.
- Social-Proof- und Produkt-Infozeilen sind verfügbar, aber standardmäßig aus — der klassische Look ist bewusst schlicht; schalten Sie sie bei Bedarf pro Bereich ein.
- Gespeicherte Vorlagenkarten frieren ihren Code ein. Speichern Sie Ihre Kopie unter Meine Vorlagen nach größeren Updates erneut.
Verwandte Themen
- Buy Together: Bundle-Builder mit Live-Gesamtpreis — die kartenbasierte Variante mit vertikalem, horizontalem und kompaktem Layout.
- Button „Schnell in den Warenkorb“ — der Code, den der Button ausführt.
- Vorlagen — der Überblick über die gesamte Vorlagenbibliothek.