Vorlage: Overlay-Card-Empfehlungsslider

Overlay Card Recommendations Slider

Aktionstyp: Produktempfehlungen. Konfiguriert über: das Aktionsmenü — kein Code nötig.

Der Overlay-Card-Slider zeigt Produktempfehlungen als Bildkarten, auf deren Foto Produktname, Marke und Preis liegen. Auf Touchscreens scrollt er per nativem Wischen, auf dem Desktop mit Pfeilen, Punkten, Ziehen oder Autoplay, und er passt die Zahl der sichtbaren Karten an die Bildschirmgröße des Besuchers an.

Schnellstart

1. Fügen Sie die Aktion Ihrer Kampagne hinzu und wählen Sie die Vorlage Overlay Card Recommendations Slider.
2. Öffnen Sie Card Image Style und prüfen Sie, ob Main Product Image Column auf das Bildfeld Ihres Katalogs zeigt. Ist noch kein Katalog verbunden, zeigt das Widget im Editor eingebaute Demoprodukte, damit Sie weiter gestalten können (siehe Demoprodukte).
3. Legen Sie unter Slider & Items Per View fest, wie viele Karten Besucher gleichzeitig sehen — Desktop, Tablet und Mobil haben jeweils eine eigene Anzahl.
4. Wählen Sie unter Slider Arrows → Arrow Style einen Pfeilstil oder lassen Sie ihn auf none , damit das Button-Styling Ihrer Website greift.
5. Sehen Sie sich die Vorschau auf Handy, Tablet und Desktop an und veröffentlichen Sie dann.

Wie der Slider Karten bemisst

Die Kartenbreite wird nicht direkt festgelegt — sie ergibt sich daraus, wie viele Artikel sichtbar sein sollen; Layouts gehen deshalb immer exakt auf:

card width = (row width − gaps) ÷ items visible

• Items Visible — Desktop / Tablet / Mobile — die Zahl der gleichzeitig sichtbaren Karten je Bildschirmgröße. Standards: 4 / 3 / 1. Dezimalzahlen funktionieren: 1.15 auf Mobilgeräten zeigt einen Streifen der nächsten Karte als Hinweis zum Wischen.
• Tablet / Mobile Breakpoint (px) — die Bildschirmbreiten, ab denen die Anzahl für Tablet und Mobil gilt. Standards: 1024 / 640.
• Minimum Card Width — eine Untergrenze zur Sicherheit (Standard 200px). Ist die Reihe zu schmal, um die gewählte Anzahl oberhalb dieser Breite unterzubringen, behalten die Karten das Minimum, und die Reihe scrollt stattdessen. Das verhindert zusammengequetschte Karten in engen Containern.
• Space Between Cards — der Abstand zwischen den Karten. Nutzen Sie eine einfache Länge wie 24px. Dieser Wert wird beim ersten Rendern angewendet, bevor die responsive Verarbeitung läuft; daher wird sel() hier nicht unterstützt. Brauchen Sie auf Mobilgeräten einen anderen Abstand, fügen Sie in „Container Style“ eine Media Query hinzu.
• Karten-Höhe, Eckenradius und wie das Foto die Karte füllt, legen Sie unter Card Image Style → Card Box Style fest — z. B. height: sel(220px, 180px) für unterschiedliche Höhen auf Desktop und Mobil.

Navigation

Scroll Behavior — x mandatory rastet immer an einer Kartenkante ein; x proximity rastet nur ein, wenn nahe einer Kante gestoppt wird; none scrollt frei mit Schwung.

Items Scrolled Per Click — wie weit jeder Pfeilklick und jeder Autoplay-Schritt weiterrückt: 1–4 Karten oder full, was genau die sichtbare Gruppe weiterschiebt (bei 2 sichtbaren Artikeln 2, bei 4 dann 4 — es folgt automatisch dem Breakpoint).

Pfeile

Zwei unabhängige Sätze, die einzeln oder zusammen laufen können:

• Arrows on Sides (Classic) — große Pfeile, vertikal zentriert an den Rändern der Reihe. Die Option „Offset“ verschiebt sie aus der Reihe heraus (negative Werte) oder über die Karten (positive).
• Arrows in Title Bar — kompakte Buttons ‹ › am rechten Ende des Widget-Titels.

Arrow Style-Presets: circle (hell), dark, pill, outline, soft — jedes ein vollständiger Look mit eigenem Hover, auf jeder Website identisch dargestellt. Wählen Sie none , um das Styling Ihrem Website-Theme zu überlassen, damit sich die Pfeile in die eigenen Buttons der Website einfügen; beachten Sie, dass bei nonedie Editorvorschau schlichte Ersatz-Buttons zeigt, weil das Theme nur auf der Live-Website existiert. Feinabstimmen lässt sich jedes Preset in „Side Arrow Custom Style“ — ist ein Preset aktiv, ergänzen Sie !important bei jeder Eigenschaft, die Sie überschreiben.

Zwei Verhaltensweisen gelten für alle Pfeile: Fade Arrows at Row Ends dimmt den Zurück-Pfeil am Anfang und den Vorwärts-Pfeil am Ende, und Hide Arrows on Touch Devices entfernt sie dort, wo Wischen natürlich ist. Beide sind standardmäßig an.

Weitere Steuerelemente

• Pagination Dots — anklickbare Punkte unter der Reihe, die die Scrollposition zeigen. Sie erscheinen nur, wenn es mehr als eine Seite zum Scrollen gibt, und bauen sich bei Größenänderungen automatisch neu auf. Container-, Punkt- und Aktiv-Punkt-Stil sind jeweils bearbeitbar.
• Scrollbar — eine optionale schmale Bildlaufleiste unter den Karten, standardmäßig aus. Farben für Schieber und Leiste gelten in allen Browsern; die Höheneinstellung gilt in Safari (Chrome und Firefox nutzen ihre feste schmale Größe).
• Drag to Scroll with Mouse — lässt Desktop-Besucher die Reihe greifen und ziehen wie auf einem Touchscreen. Ein Ziehen wird nie mit einem Produktklick verwechselt. Standardmäßig an.
• Autoplay — legen Sie ein Intervall in Millisekunden fest (z. B. 4000), um automatisch weiterzurücken. Es pausiert, solange der Besucher über dem Slider schwebt oder ihn berührt, und Autoplay: Loop to Start steuert, was an der letzten Karte passiert: zurück zur ersten springen (an) oder anhalten (aus).

Badges

Badges liegen in einem System aus Eckplätzen, damit sie sich nie überlappen:

• Der Badge Stack enthält die Badges Popular, Best Seller, New, zeitbasiert und Custom (DB). Jede Kombination stapelt sich sauber in einer Ecke, in der Reihenfolge der Vorlage. Badge Stack Corner verschiebt den ganzen Stapel mit einer Auswahl in eine der vier Ecken; „Stack Custom Style“ fügt Abstände hinzu oder wechselt zu einer waagerechten Reihe.
• Drei Badges haben eigene feste Ecken: Discount (oben rechts), Price Drop (unten rechts) und Low Stock (unten links). Das Herz der Wishlist sitzt oben rechts. Verschieben Sie den Stapel in eine dieser Ecken, gestalten Sie das betreffende Badge um oder schalten Sie es aus.

Jedes Badge hat eigene Schwellenwerte (z. B. Mindestrabatt in Prozent, Lagerbestand, Beliebtheit in den Top-N %) sowie Text- und Stiloptionen in seinem Menüabschnitt.

Karteninhalt

Die Karte selbst ist das Produktfoto mit einer abdunkelnden Gradient Overlay und dem Text Overlay unten: Produktname (auf zwei Zeilen begrenzt), ein Untertitelfeld (standardmäßig die Marke) und der Preis, bei einem Rabatt automatisch mit durchgestrichenem Originalpreis. Ein Klick irgendwo auf die Karte öffnet die Produktseite (Product Click Target legt die URL-Spalte und gleiches/neues Tab fest).

Unter dem Bild lassen sich optionale Blöcke aktivieren: Produkttitel, vollständiger Preisblock, Sternebewertungen, Beschreibung, eigene Katalogspalte, Optionslink, Link-Button, In den Warenkorb (mit animierter Einblendung beim Hover), Text zur Ratenzahlung, Live-Statistiken zu Aufrufen/Käufen und der Social-Proof-Ticker. Alle sind standardmäßig aus, damit die Karte aufgeräumt bleibt, bis Sie sich dafür entscheiden.

Demoprodukte — so funktioniert der Standardsatz

Das Widget bringt sechs eingebaute Beispielprodukte mit, damit ein Konto das Widget gestalten und in der Vorschau ansehen kann, bevor ein Produktkatalog verbunden ist.

Die Logik, genau:

1. Demokarten werden nur in Vorschaukontexten gerendert. Das Widget erkennt den Personyze-Editor (einschließlich seines Vorschau-Frames) und Vorschaulinks mit dem Parameter _S_T= . Gewöhnliche Besucher einer Live-Website passen nie; Demoprodukte — und ihre Beispielpreise — können echten Käufern also nie erscheinen. Eine Live-Website ohne Katalog zeigt einfach ein leeres Widget.
2. In einem Vorschaukontext ersetzen Demos den Platzhalter des Editors. Ist kein Katalog verbunden, rendert der Editor eine einzige Platzhalterkarte „Image from Catalog“. Das Widget zählt die echten Karten, die die Produktschleife erzeugt: eine oder weniger bedeutet Platzhalter; er wird also ausgeblendet, und an seiner Stelle erscheinen die sechs Demokarten.
3. Echte Produkte gewinnen immer. Sobald die Schleife mehr als ein echtes Produkt liefert — also ein echter Katalog verbunden ist —, bleiben die Demokarten verborgen, und echte Produkte werden gerendert, im Editor und überall sonst.
4. Das ganze Verhalten ist ein Schalter: Widget Layout → Demo Products (Preview Only). Sie können ihn bedenkenlos dauerhaft anlassen; ausgeschaltet betrifft er nur Vorschauen.

Um die Demoprodukte selbst zu ändern (Bilder, Namen, Preise), bearbeiten Sie den Block der Demokarten im Quelltext der Vorlage — die sechs Karten sind einfaches HTML, das das echte Kartendesign nachbildet, markiert mit der Klasse pz-demo .

Styling-Architektur und Zusammenspiel mit dem Website-Theme

Drei Ebenen gestalten das Widget, in der Reihenfolge, in der sie greifen:

1. Das kritische Layout steht inline an Slider und Karten und wird vom Browser angewendet, sobald das HTML rendert — deshalb blitzt der Slider beim ersten kalten Laden nie als Stapel vollbreiter Karten auf.
2. Responsive und dekorative Regeln (Breakpoint-Überschreibungen, Punkte, Pfeil-Presets, Hover) liegen im Stylesheet der Vorlage.
3. Das CSS Ihrer Website erreicht alles, was nicht ausdrücklich gesperrt ist. Das ist gewollt: Mit Arrow Style nonegestaltet das Website-Theme die Pfeile vollständig; mit einem gewählten Preset sperrt das Preset Geometrie und Farben mit !important , damit es auf jeder Website identisch dargestellt wird.

Die praktische Regel beim Anpassen: Greift Ihre Änderung nicht, ist die Eigenschaft durch ein Preset gesperrt oder gegen Theme-Konflikte geschützt — ergänzen Sie !important in Ihrer Deklaration im passenden Feld „Custom Style“, dann hat sie Vorrang.

Datenquelle

Die Produkte kommen über die Produktabfrage der Vorlage aus dem Katalog — standardmäßig die neuesten Produkte, gemischt mit den kürzlich angesehenen Artikeln des Besuchers, begrenzt auf 12. Die Empfehlungslogik (Bestseller, zusammen angesehen, warenkorbbasiert und so weiter) wird wie bei jeder Personyze-Empfehlung in der Zielgruppen- und Datenquellenkonfiguration der Aktion festgelegt, unabhängig von den Designoptionen dieses Widgets.

Siehe Den Produkt-Feed einrichten und Algorithmen für Produktempfehlungen.

FAQ

Die Pfeile sehen auf meiner Website anders aus als im Editor.
Mit Arrow Style noneist das so gewollt — das Website-Theme gestaltet sie, und der Editor hat kein Theme. Wählen Sie ein beliebiges Preset für einen pixelgenau identischen Look an beiden Orten.

Die Punkte werden nicht angezeigt.
Punkte erscheinen nur, wenn es mehr als eine Seite zum Scrollen gibt. Mit wenigen Produkten oder einer hohen Minimum Card Width auf einem breiten Bildschirm passt alles auf eine Seite, und die Punkte werden ausgeblendet.

Der Zurück-Pfeil wirkt deaktiviert.
Am Anfang der Reihe gibt es nichts, wohin man zurückscrollen könnte; daher dimmt ihn Fade Arrows at Row Ends. Er wird aktiv, sobald sich die Reihe bewegt. Schalten Sie das Ausblenden ab, wenn Sie immer volle Pfeile bevorzugen.

Ich habe die Vorlage aktualisiert, und einige Einstellungen sehen falsch aus.
Felder, die Sie früher gespeichert haben, behalten ihre gespeicherten Werte und überschreiben neue Standardwerte der Vorlage. Setzen Sie ein Feld zurück, um den aktuellen Standard zu übernehmen.

Autoplay hält von selbst an.
Autoplay: Loop to Start ist aus; es hält also wie konfiguriert an der letzten Karte an. Schalten Sie es ein, um fortlaufend zu wechseln. Autoplay pausiert außerdem, solange der Besucher über dem Slider schwebt oder ihn berührt — das ist beabsichtigt.

Können Desktop-Besucher die Reihe mit der Maus ziehen?
Ja — Drag to Scroll ist standardmäßig an. Sie können auch Pfeile, Punkte, Trackpad oder Umschalt + Mausrad benutzen.

Warum kann ich sel() nicht in Space Between Cards verwenden?
Der Abstand wird beim ersten Rendern angewendet, bevor die responsive Verarbeitung läuft, um vom ersten Frame an ein stabiles Layout zu garantieren. Nutzen Sie eine einfache Länge; einen anderen mobilen Abstand lösen Sie bei Bedarf mit einer Media Query in „Container Style“.

Werden die Demoprodukte jemals echten Besuchern gezeigt?
Nein. Sie werden nur im Personyze-Editor und auf Vorschaulinks mit _S_T= gerendert, und nur solange der Katalog höchstens ein Produkt liefert.