Product Slider & Grid: Preise, Bewertungen, Lagerbestand und Schnellkauf

Das wichtigste Produktkarussell der Galerie: eine Vorlage, die als klassischer einzeiliger Slider oder als scrollbares Raster mit bis zu vier Zeilen läuft, mit Preisen und Rabatten, Sternebewertungen, Lagerbestands-Badges und einem schnellen Add to cart-Button auf jeder Karte. Wählen Sie einen Style accent (light, gold, bold, ocean), und jede Karte, jedes Badge, jeder Button und jeder Preis wird mit einem Klick umgefärbt.

Product Slider & Grid mit Layout — Slider or Grid auf 2: zwei Kartenreihen, jede Spalte scrollt als Einheit seitwärts — *Layout — Slider or Grid* auf 2 gesetzt: zwei Kartenreihen, und jede Spalte scrollt als Einheit seitwärts. Gezeigt mit den Demo-Produkten des Editors. Zum Vergrößern klicken.

Was enthalten ist

Slider oder Raster. Layout — Slider or Grid: 1 ist der klassische einzeilige Slider, 2 bis 4 ein Raster, das seitwärts scrollt. Pfeile an den Seiten oder in der Titelleiste, Paginierungspunkte, eine Scrollleiste, Autoplay, das beim Hover pausiert, Ziehen zum Scrollen und Einrast-Steuerung — siehe Slider-Optionen.
Dichte. Eine einzige Einstellung (Compact, Standard, Roomy) passt Bildgröße, Abstände und Button-Innenabstand gemeinsam an. Sie überschreibt die einzelnen Größeneinstellungen; stellen Sie sie wieder auf Standard, gelten diese wieder.
Badges. Eck-Badges (Rabatt / Sale-Prozent, Preissenkung, niedriger Lagerbestand), ein verschiebbarer Badge-Stapel (New, Back in Stock, Popular, Best Seller, ein zeitlich begrenztes Angebot mit Countdown, eigene Daten aus Ihrem Feed) und drei freie Badges mit eigenem Text unter More Badges.
Social Proof. Sternebewertungen mit Anzahl der Rezensionen, wöchentliche und tägliche Ansichts- und Verkaufsstatistiken in drei Looks (divided, plain, pill), ein Social-Proof-Scroller und ein Countdown-Timer.
Hover-Effekte. Kartenschatten, Bildzoom, ein zweites Bild beim Hover, ein Hover-Overlay mit Buttons, ein von unten hochgleitendes Panel und ein Aktions-Button, der beim Hover hereingleitet (auf Touchscreens immer sichtbar).
Produkttext. Titel, Marken- oder Untertitelzeile, Beschreibung, eine eigene Datenspalte, Grundpreis, Zahlungszeile, Ersparnis-Badge, Optionen-Link, Link-Button und Wunschlisten-Herz. Card Info Order (standard, brand-first, price-first) ordnet die Zeilen unter dem Bild; Title Style Preset (plain, accent-bar, underline, boxed, eyebrow) gestaltet die Überschrift des Widgets, und ein View-All-Link kann in der Titelleiste stehen.

So funktioniert diese Vorlage

Diese Vorlage und der Overlay Slider & Grid sind um vier Ideen herum gebaut:

Style-Akzente. Style accent (light, gold, bold, ocean) im ersten Abschnitt des Menüs färbt Karten, Badges, Buttons, Preise und Punkte mit einem Klick gemeinsam um. Light und ocean passen zu hellen Websites; gold und bold sind die dunklen Premium-Looks — die dunklen Karten mit goldenen Preisen und Buttons sind einfach der Akzent gold. Jede Farbe lässt sich danach weiterhin in ihrem eigenen Stilfeld ändern.
Catalog Fields an einer Stelle. Der Abschnitt Catalog Fields (an zweiter Stelle im Menü) ordnet jede Produktspalte zu, die die Vorlage nutzt — Bilder, URL, Titel, Marke, beide Preisspalten, Bewertung, Anzahl der Rezensionen, Beschreibung, Lagerbestand, Rabatt in Prozent, Kategorie, Enddatum des Angebots und eigene Felder. Eine dort gesetzte Spalte aktualisiert jedes Element, das sie verwendet, sodass ein Shop mit einem vollständig eigenen Feed das ganze Widget über diesen einen Abschnitt neu verdrahten kann.
Live-Demo-Modus. Während Sie gestalten, erscheinen sechs Demo-Produkte (Besucher sehen sie nie). Die erste Demo-Karte ist ein Live-Schaufenster: Klicken Sie auf ein beliebiges Element darin, um es zu gestalten, und jeder Schalter — Badges, der Aktions-Button, Overlays, Statistiken, Beschreibung, Grundpreis — reagiert sichtbar darauf. Siehe Demo-Produkte.
Zentrale Preiseinstellungen. Der Abschnitt Pricing hat ein einziges Auswahlfeld Price Format (standard, european, rounded, rounded-european) und ein Paar Währungssymbol-Felder, die überall gelten, wo ein Preis erscheint, auch im Overlay auf dem Bild. Ein Produkt ohne Preis zeigt nichts an — kein verwaistes Währungssymbol.

Slider-Optionen

Diese befinden sich im Abschnitt Slider & Navigation, außer Space Between Cards, das unter Widget Layout liegt.

Option	Was es tut	Standard
Layout — Slider or Grid	1 = der klassische einzeilige Slider. 2, 3 oder 4 = ein Raster: Produkte füllen jede Spalte von oben nach unten (bei 2 Zeilen bilden die Produkte 1 und 2 die erste Spalte), und die Spalten scrollen seitwärts.	1
Items Visible — Desktop / Tablet / Mobile	Wie viele Karten (in einem Raster: Spalten) gleichzeitig zu sehen sind. Dezimalwerte funktionieren: `1.15` auf Mobilgeräten zeigt einen Streifen der nächsten Karte als Hinweis zum Wischen.	4 / 3 / 1
Tablet Breakpoint (px) / Mobile Breakpoint (px)	Unterhalb dieser Breiten gilt die Anzahl für Tablet bzw. Mobilgeräte.	1024 / 640
Swipe Strip — Minimum Card Width	Eine Untergrenze für die Kartenbreite. Ist die Reihe zu schmal, um die gewählte Anzahl in dieser Breite unterzubringen, behalten die Karten diese Breite, und die Reihe scrollt, statt sie zu stauchen.	120px
Space Between Cards	Der Abstand zwischen den Karten. Verwenden Sie eine einfache Länge wie `24px`, nicht `sel()`: Der Abstand wird beim ersten Rendern angewendet, bevor responsive Werte berechnet werden.	24px
Swipe Strip — Scroll Behavior	`x mandatory` rastet immer an einer Kartenkante ein; `x proximity` rastet nur ein, wenn die Reihe nahe einer Kante stoppt; `none` scrollt frei.	x mandatory
Swipe Strip — Items Per Arrow Click	Wie weit jeder Pfeilklick und jeder Autoplay-Schritt weiterbewegt: 1 bis 4 Karten oder `full`, das genau die sichtbare Menge bei der aktuellen Bildschirmgröße weiterbewegt (2 auf einem Telefon, das 2 zeigt, 4 auf einem Desktop, der 4 zeigt).	1
Arrows on Sides (Classic)	Große Pfeile mittig am linken und rechten Rand der Reihe. Arrows — Side Arrow Offset verschiebt sie aus der Reihe heraus (negativ, z. B. `-10px`) oder über die Karten (positiv).	An, 6px
Swipe Strip — Title-Bar Arrows	Kompakte Buttons ‹ › rechts neben dem Widget-Titel. Die Titelleiste muss angezeigt werden.	Aus
Arrows — Arrow Style	Fertige Looks, jeweils mit eigenem Hover: `circle` (heller Kreis), `dark`, `pill`, `outline`, `soft`. `none` überlässt die Gestaltung der Pfeile dem Theme Ihrer Website. Um eine Voreinstellung anzupassen, fügen Sie in Arrows — Side Arrow Custom Style CSS hinzu, mit `!important` bei jeder Eigenschaft, die sich durchsetzen soll.	circle
Swipe Strip — Fade Arrows at Ends Hide Arrows on Touch Devices	Blendet den Zurück-Pfeil am Anfang der Reihe und den Vorwärts-Pfeil am Ende ab und deaktiviert sie. Blendet auf Telefonen und Tablets, wo Wischen natürlich ist, alle Pfeile aus.	An / An
Swipe Strip — Pagination Dots	Klickbare Punkte unter der Reihe. Sie erscheinen nur, wenn es mehr als eine Seite zum Scrollen gibt, und werden neu aufgebaut, wenn sich die Größe des Widgets ändert.	An
Swipe Strip — Scrollbar	Eine schmale Scrollleiste unter der Reihe, mit eigener Höhe sowie eigenen Farben für Griff und Spur.	Aus
Drag to Scroll with Mouse	Desktop-Besucher können die Reihe greifen und ziehen, wie auf einem Touchscreen. Ein Ziehen zählt nie als Klick auf ein Produkt.	An
Swipe Strip — Autoplay Interval (ms)	Rückt alle N Millisekunden weiter, z. B. `4000`; 0 oder leer bedeutet aus. Es pausiert, solange der Besucher mit der Maus über dem Slider ist oder ihn berührt. Swipe Strip — Autoplay Loops to Start entscheidet, was bei der letzten Karte passiert: zurück zur ersten springen (an) oder stoppen (aus).	Aus; Schleife an

Wie die Kartengröße entsteht

Eine Kartenbreite legen Sie nicht fest. Sie wird daraus berechnet, wie viele Karten sichtbar sein sollen:

card width = (row width − (items visible − 1) × gap) ÷ items visible

und fällt nie unter Swipe Strip — Minimum Card Width. Kartenhöhe, Ecken und wie das Foto die Karte füllt, legen Sie unter Card & Image → Card Box Style (Height, Corners, Image Fit) fest — die Voreinstellung height: sel(280px, 220px) gibt Desktop und Mobilgeräten jeweils eine eigene Höhe.

Wie viele Produkte das Widget erhält, legt die Empfehlung selbst fest: Anzuzeigende Empfehlungen in ihrer Karte Ausgabe, bis zu 12. Mit 2 Zeilen und 12 Produkten hat das Raster sechs Spalten zum Durchscrollen.

Demo-Produkte

Sechs Beispielprodukte lassen Sie gestalten, bevor ein Katalog verbunden ist. Sie erscheinen nur im Personyze-Editor und in Vorschau-Links und nur, solange das Widget höchstens eine echte Produktkarte hat; sobald Ihr Katalog mehr liefert, übernehmen Ihre Produkte. Besucher sehen sie nie. Der Schalter ist Widget Layout → Demo Products (Preview Only), und er kann bedenkenlos eingeschaltet bleiben.

Der Button „Add to cart“

Unter Add to Cart & View Buttons legt Button Action fest, was der Button der Karte tut. Add to cart (uses your cart integration), die Voreinstellung, legt das Produkt in den Warenkorb des Besuchers, ohne dass er die Seite verlässt; Open the product page ist ein gewöhnlicher Link, für einen Katalog ohne Warenkorb-Integration. Add to cart führt den für Ihr Konto gespeicherten Code für Schnell in den Warenkorb aus, und Quick Add to Cart — Cart Integration Argument wird diesem Code als zweites Argument übergeben. On Success und On Error — Custom JavaScript ersetzen den Standard-Toast „Added to cart“ durch Ihren eigenen Code.

Gut zu wissen

Die Artikel pro Gerät richten sich nach dem Widget, nicht nur nach dem Bildschirm. Auf einem Desktop fällt ein Slider in einer schmalen Seitenleiste von selbst auf die Anzahl für Tablet oder Mobilgeräte zurück, weil die Anzahlen aus der eigenen Breite des Widgets abgeleitet werden.
Text on Image entfernt Doppelungen automatisch. Solange Show Text on Image eingeschaltet ist, blenden sich Titel, Markenzeile und Preis unter dem Foto von selbst aus.
Hover-Stile sind eigene Felder. Wenn Sie die Grundfarbe eines Buttons ändern, übernehmen Sie sie im passenden Feld Hover Style, damit der Hover-Effekt einheitlich bleibt.
Gespeicherte Vorlagenkarten frieren ihren Code ein. Wenn Sie eine eigene Kopie unter Meine Vorlagen behalten, verwenden die daraus erstellten Aktionen den Code im Zustand beim Speichern — speichern Sie die Karte nach größeren Updates erneut.