Ein horizontal scrollendes Produktraster: Statt einer einzigen Kartenreihe zeigt das Widget zwei oder mehr Reihen, und jede Kartenspalte scrollt als Einheit seitwärts. So passen deutlich mehr Produkte auf dieselbe Bildschirmfläche — ideal für Bereiche wie „Das könnte Ihnen gefallen“ auf Kategorieseiten, Startseiten und überall dort, wo ein flacher Slider zu spärlich wirkt. Die Karten nutzen den Clean-Catalog-Look: weiße Karten mit Produktfoto, Titel, Preis, Badges und einem immer sichtbaren Button „Add to Cart“, dazu runde Pfeil-Buttons in der Titelleiste.
Schnellstart
- Fügen Sie die Aktion hinzu und wählen Sie die Vorlage Product Grid Slider.
- Richten Sie Main Product Image Column (Item Image) auf das Bildfeld Ihres Katalogs aus. Solange noch kein Katalog verbunden ist, erscheinen im Editor sechs Demoprodukte mit einem Hinweisbanner — Besucher sehen sie nie, und sie verschwinden, sobald Ihr Katalog geladen ist.
- Legen Sie die Anzahl der Reihen unter Slider & Items Per View → Rows fest (siehe unten).
- Wählen Sie, wie viele Spalten pro Gerät sichtbar sind (Items Visible — Desktop / Tablet / Mobile).
- Prüfen Sie die Vorschau auf allen Gerätegrößen und veröffentlichen Sie.
Die Einstellung Rows
Das Feld Rows nimmt ein Wort pro Reihe auf:
auto auto— zwei Reihen (Standard)auto— eine Reihe: der klassische einreihige Sliderauto auto auto— drei Reihen
auto bedeutet, dass jede Reihe so hoch ist wie ihr Inhalt. Für Fortgeschrittene: Ersetzen Sie auto durch feste Höhen, um gleichmäßige Reihen zu erzwingen — zum Beispiel ergibt 260px 260px zwei Reihen mit genau 260px. Sie können Werte mischen.
Produkte füllen jede Spalte von oben nach unten und setzen sich dann in der nächsten Spalte fort — bei 2 Reihen bilden die Produkte 1 und 2 die erste Spalte, 3 und 4 die zweite und so weiter. Das Widget fordert bis zu 24 Produkte an, damit mehrere Reihen gefüllt bleiben.
So funktioniert das Scrollen
Das Raster scrollt horizontal spaltenweise. Pfeilklicks und Punkte gehen jeweils eine ganze Ansicht weiter, und jeder Spaltenschritt bewegt eine ganze Produktspalte — bei 2 Reihen rückt ein Spaltenschritt um 2 Produkte vor. Scrollen per Touch und Ziehen, Einrasten, optionales Autoplay und die optionale Scrollleiste funktionieren genau wie bei den einreihigen Slidern. Standardmäßig zeigt diese Vorlage runde Pfeil-Buttons in der Titelleiste (neben dem Widget-Titel); klassische seitliche Pfeile lassen sich per Schalter aktivieren.
Kartenbreite und Mindestbreite
Die Spaltenbreite wird automatisch aus Items Visible pro Breakpoint berechnet, mit einer Untergrenze Minimum Card Width (Standard 200px), damit Karten auf schmalen Bildschirmen nie gequetscht werden — läge die berechnete Breite darunter, zeigt das Widget weniger Spalten und scrollt stattdessen.
Demoprodukte — der Standardsatz
Dieselbe Logik wie bei den anderen Empfehlungsvorlagen: Sechs Demoprodukte werden nur in Vorschaukontexten (im Personyze-Editor und in Vorschaulinks) angezeigt, wenn kein Katalog verbunden ist, zusammen mit einem Hinweisbanner. Echte Besucher sehen sie nie, und echte Produkte übernehmen automatisch, sobald Ihr Katalog Ergebnisse liefert. Ein Schalter steuert das: Widget Layout → Demo Products (Preview Only).
Was mit den anderen Slidern gemeinsam ist
Badges mit dem automatisch stapelnden Eckensystem, Sale-Preise mit Durchstreichung, Sternebewertungen, das Wunschlisten-Herz, Statistikzeilen und Add to Cart mit Bestätigungs-Toasts sind dieselben bewährten Abschnitte wie bei den anderen Empfehlungs-Slidern und werden identisch konfiguriert. Die vollständige Referenz steht im Hauptleitfaden zu den Slidern: Recommendations Slider — vollständiger Leitfaden. In dieser Vorlage ist der Button „Add to Cart“ auf der Karte immer sichtbar (statt erst beim Hovern), passend zum dichteren Rasterlayout.
FAQ
Das Raster zeigt nur eine Reihe. Prüfen Sie Slider & Items Per View → Rows: Das Feld muss ein Wort pro Reihe enthalten, z. B. auto auto für zwei Reihen. Wurde das Feld zuvor bearbeitet, überschreibt der gespeicherte Wert den Standard der Vorlage.
Können Reihen unterschiedlich hoch sein? Standardmäßig richtet sich jede Reihe nach ihrem Inhalt. Für gleichmäßige Reihen verwenden Sie feste Höhen im Feld Rows, z. B. 260px 260px.
Wie viele Produkte sollte mein Algorithmus liefern? Das Widget fordert bis zu 24 an. Für ein voll wirkendes zweireihiges Raster sollten Ihr Algorithmus und Ihr Fallback mindestens 8–12 Produkte liefern können.
Kann ich das als normalen einreihigen Slider nutzen? Ja — setzen Sie Rows auf auto und es verhält sich genau wie der einreihige Clean-Catalog-Slider.