Vorlage: Empfehlungskarten

Produktempfehlungen als klare, anklickbare Karten — dieselbe Engine wie die Buy-Together-Familie, aber ohne das Bundle-Konzept: kein Anker auf das aktuelle Produkt, keine Schalter und keine laufende Summe. Jede Karte verlinkt direkt auf ihr Produkt und hat einen eigenen Button Add to Cart, der beim Hovern erscheint (wie bei den Slidern) und mit einem modernen Toast bestätigt.

So funktioniert diese Vorlage

Drei Layouts. Horizontal (eine Kartenreihe, der Standard — sie passt ihre Größe an die Karten an), vertical (untereinander gestapelte Listenzeilen) und compact (ein Mini-Streifen mit kleinen Fotos, Namen und Preisen).
Add to Cart pro Karte. Jede Karte hat ihren eigenen Button. Show Add to Cart legt fest, wann er erscheint: hover (der Standard — wird eingeblendet, wenn der Käufer mit der Maus über die Karte fährt, auf Touchscreens immer sichtbar) oder always. Ein Klick fügt genau dieses Produkt hinzu und zeigt eine Bestätigung: modern (dunkler abgerundeter Toast mit Häkchen-Symbol), system (die integrierte Personyze-Benachrichtigung) oder custom (Ihr eigenes JS aus den Feldern Success Action und Error Action).
Karten sind anklickbar. Ein Klick irgendwo auf eine Karte (außerhalb des Buttons oder des Namenslinks) öffnet die Produktseite, entsprechend der Einstellung Open Product Links In.
Nach Artikeln oder Zeilen begrenzen. Limit By wählt zwischen einer festen Anzahl von Produkten (Max Items Shown, Standard 4) oder einer Anzahl voller rows (Max Rows Shown, Standard 1) — so viele Karten, wie bei der aktuellen Breite in eine Zeile passen. Der Rest verbirgt sich hinter einem einklappbaren Link Show N more.
Style accents und Look-Presets. Vier Akzente (light, gold, bold, ocean) plus die Presets Title Look, Buttons Look, Text Font und Item Info Order. Jede Farbe und Schrift lässt sich weiterhin einzeln in ihrem eigenen Stilfeld überschreiben.
Live-Demomodus. Beim Gestalten erscheinen sieben realistische Demoprodukte — genug, um den Link Show More und die Hover-Buttons zu zeigen; Besucher der Website sehen sie nie.

Badges, Social Proof und Produktinfos

Badges mit sinnvollen Standardwerten. Rabatt in Prozent (bei 0 ausgeblendet), NEW (in den letzten 14 Tagen hinzugefügt), Popular und Bestseller (Top 5 %) und niedriger Bestand (5 oder weniger) — jeder Schwellenwert, jeder Text und jeder Stil ist bearbeitbar.
Social-Proof-Zeilen. Zahlen „heute angesehen“ und „heute gekauft“ pro Karte, mit einstellbarem Sichtbarkeitsbereich.
Produktinfozeilen. Zusätzliche Katalogfelder (Marke, eigene Spalten) unter dem Produktnamen.

Laden, Popups und Stabilität

Lade-Skelett — schimmernde Zeilen werden angezeigt, bis die Empfehlungen eintreffen.
Smooth Reveal hält das Widget unsichtbar, bis seine Größe feststeht, und blendet es dann ein — kein Springen, während die Seite lädt.
Popup Hugs Widget verkleinert einen zu großen Popup-Rahmen auf die Größe des Widgets; schalten Sie es für Banner-Popups in voller Breite aus.
Robuste Darstellung. Die Stile der Vorlage sind so gebaut, dass sie aggressives Website-CSS überstehen, während Anpassungen einzelner Elemente im Editor weiterhin Vorrang haben.

Gut zu wissen

Die Zeilenbegrenzung misst das echte Layout. Mit Limit By: rows wird die sichtbare Menge danach berechnet, wo die Karten nach dem Rendern tatsächlich landen, und passt sich so jeder Containerbreite an; sie wird einmal pro Seitenaufruf berechnet.
Zentrale Preisangaben. Eine Auswahl für das Preisformat und ein Paar Felder für das Währungssymbol gelten überall, wo Preise erscheinen.
Gespeicherte Vorlagenkarten frieren ihren Code ein. Speichern Sie Ihre Kopie unter Your templates nach größeren Updates erneut.