Recommendation Cards: Reihe, Liste oder Streifen mit Badges

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

So funktioniert diese Vorlage

Drei Layouts. Horizontal (eine Kartenreihe, die Voreinstellung — sie passt ihre Größe an ihre Karten an), vertical (gestapelte Listenzeilen) und compact (ein Mini-Streifen mit kleinen Fotos, Namen und Preisen).
Add to Cart pro Karte. Jede Karte hat einen eigenen Button. Show Add to Cart steuert, wann er erscheint: hover (die Voreinstellung — blendet sich ein, wenn der Käufer mit der Maus über die Karte fährt, auf Touchscreens immer sichtbar) oder always. Ein Klick darauf legt genau dieses Produkt über den Code für Schnell in den Warenkorb Ihres Kontos in den Warenkorb und zeigt eine Bestätigung: modern (dunkler, abgerundeter Toast mit Häkchen), system (die eingebaute Personyze-Benachrichtigung) oder custom (Ihr eigenes JavaScript aus den Feldern On Success und On Error).
Karten sind klickbar. Ein Klick irgendwo auf eine Karte (außerhalb des Buttons oder des Namenslinks) öffnet die Produktseite, gemäß der Einstellung Open Product Links In.
Nach Artikeln oder Zeilen begrenzen. Limit By wählt zwischen einer festen Anzahl von Produkten (Max Items Shown, standardmäßig 4) und einer Anzahl vollständiger rows (Max Rows Shown, standardmäßig 1) — so viele Karten, wie bei der aktuellen Breite in eine Zeile passen. Der Rest verbirgt sich hinter einem aufklappbaren Link Show N more.
Style-Akzente und Look-Voreinstellungen. Vier Akzente (light, gold, bold, ocean) plus die Voreinstellungen 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-Demo-Modus. Beim Gestalten erscheinen sieben realistische Demo-Produkte — genug, um den Show-More-Link und die Hover-Buttons vorzuführen; Besucher der Website sehen sie nie.

Badges, Social Proof und Produktinfos

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

Laden, Popups und Stabilität

Loading skeleton: Schimmernde Platzhalterzeilen erscheinen, 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.
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 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; sie passt sich also jeder Containerbreite an und wird einmal pro Seitenaufruf berechnet.
Zentrale Preiseinstellungen. Ein Auswahlfeld für das Preisformat und ein Paar Währungssymbol-Felder gelten überall, wo Preise erscheinen.
Gespeicherte Vorlagenkarten frieren ihren Code ein. Speichern Sie Ihre Kopie unter Meine Vorlagen nach größeren Updates erneut.