Een horizontaal scrollend productraster: in plaats van één rij kaarten toont de widget twee of meer rijen, en elke kolom kaarten scrolt als één geheel opzij. Zo passen er veel meer producten in dezelfde schermruimte — ideaal voor secties “Misschien vind je dit ook leuk” op categoriepagina’s, homepages en overal waar een platte slider te leeg aanvoelt. Kaarten gebruiken de look van Clean Catalog: witte kaarten met de productfoto, titel, prijs, badges en een altijd zichtbare knop Add to Cart, met ronde pijlknoppen in de titelbalk.
Snel aan de slag
- Voeg de actie toe en kies de template Product Grid Slider.
- Wijs de Main Product Image Column (Item Image) naar het afbeeldingsveld van je catalogus. Is er nog geen catalogus gekoppeld, dan verschijnen in de editor zes demoproducten met een melding — bezoekers zien ze nooit, en ze verdwijnen zodra je catalogus laadt.
- Stel het aantal rijen in bij Slider & Items Per View → Rows (zie hieronder).
- Kies hoeveel kolommen per apparaat zichtbaar zijn (Items Visible — Desktop / Tablet / Mobile).
- Bekijk een voorbeeld op alle apparaatformaten en publiceer.
De instelling Rows
Het veld Rows neemt één woord per rij:
auto auto— twee rijen (de standaard)auto— één rij: de klassieke slider met één rijauto auto auto— drie rijen
auto betekent dat elke rij zo hoog is als de inhoud. Gevorderd: vervang auto door vaste hoogtes om gelijke rijen af te dwingen — bijvoorbeeld 260px 260px geeft twee rijen van precies 260px. Je kunt waarden mengen.
Producten vullen elke kolom van boven naar beneden en gaan dan verder in de volgende kolom — dus met 2 rijen vormen product 1 en 2 de eerste kolom, 3 en 4 de tweede, enzovoort. De widget vraagt tot 24 producten op om meerdere rijen gevuld te houden.
Hoe scrollen werkt
Het raster scrolt horizontaal per kolom. Klikken op pijlen en bolletjes gaan telkens een volledige weergave verder, en elke kolomstap schuift een hele kolom producten voorbij — met 2 rijen gaat één kolomstap 2 producten verder. Scrollen met aanraken en slepen, vastklikken, optionele autoplay en de optionele scrollbalk werken precies zoals in de sliders met één rij. Standaard toont deze template ronde pijlknoppen in de titelbalk (naast de titel van de widget); klassieke pijlen aan de zijkant zijn beschikbaar met een schakelaar.
Kaartbreedte en de minimumgrens
De kolombreedte wordt automatisch berekend uit Items Visible per breakpoint, met een ondergrens Minimum Card Width (standaard 200px) zodat kaarten op smalle schermen nooit worden samengeperst — zou de berekende breedte onder die grens zakken, dan toont de widget minder kolommen en scrolt hij in plaats daarvan.
Demoproducten — de standaardset
Dezelfde logica als bij de andere aanbevelingstemplates: zes demoproducten worden alleen in voorbeeldcontexten weergegeven (de Personyze-editor en voorbeeldlinks) als er geen catalogus is gekoppeld, samen met een melding. Echte bezoekers zien ze nooit, en echte producten nemen het automatisch over zodra je catalogus resultaten teruggeeft. Eén schakelaar regelt het: Widget Layout → Demo Products (Preview Only).
Wat met de andere sliders wordt gedeeld
Badges met het systeem van automatisch stapelende hoeken, uitverkoopprijzen met doorhaling, sterrenbeoordelingen, het hartje van het verlanglijstje, statistiekrijen en Add to Cart met toastbevestigingen zijn dezelfde beproefde secties als in de andere aanbevelingssliders, en worden precies zo ingesteld. De volledige referentie staat in de hoofdhandleiding voor de slider: Aanbevelingsslider — volledige handleiding. In deze template is de knop Add to Cart altijd zichtbaar op de kaart (in plaats van bij hover), passend bij de dichtere rasterindeling.
Veelgestelde vragen
Het raster toont maar één rij. Controleer Slider & Items Per View → Rows: dat moet één woord per rij bevatten, bijv. auto auto voor twee rijen. Is het veld eerder bewerkt, dan overschrijft de opgeslagen waarde de standaardwaarde van de template.
Kunnen rijen verschillende hoogtes hebben? Standaard past elke rij zich aan de inhoud aan. Gebruik voor gelijke rijen vaste hoogtes in het veld Rows, bijv. 260px 260px.
Hoeveel producten moet mijn algoritme teruggeven? De widget vraagt er tot 24 op. Zorg voor een vol ogend raster met 2 rijen dat je algoritme en fallback minstens 8–12 producten kunnen leveren.
Kan ik dit als gewone slider met één rij gebruiken? Ja — zet Rows op auto en hij gedraagt zich precies als de Clean Catalog-slider met één rij.