De belangrijkste productcarrousel van de galerij: één template die draait als klassieke slider met één rij of als scrollend raster met maximaal vier rijen, met prijzen en kortingen, sterbeoordelingen, voorraadbadges en een snelle knop Add to cart op elke kaart. Kies een Style accent (light, gold, bold, ocean) en elke kaart, badge, knop en prijs krijgt met één klik een andere kleur.
Wat erin zit
- Slider of raster. Layout — Slider or Grid: 1 is de klassieke slider met één rij, 2 tot 4 is een raster dat opzij scrolt. Pijlen aan de zijkant of in de titelbalk, paginatiestippen, een scrollbalk, autoplay die pauzeert bij hover, slepen om te scrollen en instellingen voor het vastklikken — zie Slider-opties.
- Dichtheid. Eén instelling (Compact, Standard, Roomy) past het formaat van de afbeelding, de tussenruimtes en de opvulling van de knop samen aan. Die gaat voor de afzonderlijke formaatinstellingen; zet hem terug op Standard en die hebben weer de leiding.
- Badges. Hoekbadges (korting / actiepercentage, prijsdaling, lage voorraad), een verplaatsbare stapel badges (New, Back in Stock, Popular, Best Seller, een tijdelijke aanbieding met afteltimer, eigen data uit je feed), en drie vrije badges met je eigen tekst onder More Badges.
- Social proof. Sterbeoordelingen met aantallen reviews, wekelijkse en dagelijkse statistieken van weergaven en verkopen in drie stijlen (divided, plain, pill), een scroller met social proof, en een afteltimer.
- Hovereffecten. Schaduw op de kaart, afbeeldingszoom, een tweede afbeelding bij hover, een hover-overlay met knoppen, een paneel dat onderaan omhoog schuift, en een actieknop die bij hover inschuift (altijd zichtbaar op touchscreens).
- Producttekst. Titel, regel met merk of ondertitel, beschrijving, een kolom met eigen data, prijs per eenheid, regel met betaalmogelijkheden, besparingsbadge, link naar opties, linkknop en verlanglijsthartje. Card Info Order (standard, brand-first, price-first) bepaalt de volgorde van de regels onder de afbeelding; Title Style Preset (plain, accent-bar, underline, boxed, eyebrow) geeft de kop van de widget stijl, en in de titelbalk kan een link View-All staan.
Hoe deze template werkt
Deze template en de Overlay Slider & Grid zijn gebouwd rond vier ideeën:
- Style-accenten. Style accent (light, gold, bold, ocean), in de eerste sectie van het menu, kleurt kaarten, badges, knoppen, prijzen en stippen met één klik anders. Light en ocean passen bij lichte sites; gold en bold zijn de donkere premium looks — de donkere kaarten met gouden prijzen en knoppen zijn gewoon het accent gold. Elke kleur kun je daarna nog steeds in een eigen stijlveld aanpassen.
- Catalog Fields op één plek. De sectie Catalog Fields (tweede in het menu) koppelt elke productkolom die de template gebruikt — afbeeldingen, URL, titel, merk, beide prijskolommen, beoordeling, aantal reviews, beschrijving, voorraad, kortingspercentage, categorie, einddatum van een aanbieding en eigen velden. Stel je daar een kolom in, dan wordt elk element dat hem gebruikt bijgewerkt, dus een winkel met een volledig eigen feed kan de hele widget vanuit deze ene sectie opnieuw koppelen.
- Live demomodus. Terwijl je ontwerpt, verschijnen zes demoproducten (bezoekers zien ze nooit). De eerste demokaart is een live etalage: klik op een element om het stijl te geven, en elke schakelaar — badges, de actieknop, overlays, statistieken, beschrijving, prijs per eenheid — reageert er zichtbaar op. Zie Demoproducten.
- Centrale prijzen. De sectie Pricing heeft één keuzelijst Price Format (standard, european, rounded, rounded-european) en één paar velden voor het valutasymbool, die gelden overal waar een prijs verschijnt, ook in de overlay op de afbeelding. Een product zonder prijs toont niets — geen los valutasymbool.
Slider-opties
Deze staan in de sectie Slider & Navigation, behalve Space Between Cards, dat in Widget Layout staat.
| Optie | Wat het doet | Standaard |
|---|---|---|
| Layout — Slider or Grid | 1 = de klassieke slider met één rij. 2, 3 of 4 = een raster: producten vullen elke kolom van boven naar beneden (bij 2 rijen vormen producten 1 en 2 de eerste kolom), en de kolommen scrollen opzij. | 1 |
| Items Visible — Desktop / Tablet / Mobile | Hoeveel kaarten (in een raster: kolommen) er tegelijk zichtbaar zijn. Decimalen werken: 1.15 op mobiel toont een strookje van de volgende kaart als hint om te vegen. |
4 / 3 / 1 |
| Tablet Breakpoint (px) / Mobile Breakpoint (px) | Onder deze breedtes nemen het aantal voor tablet en voor mobiel het over. | 1024 / 640 |
| Swipe Strip — Minimum Card Width | Een ondergrens voor de kaartbreedte. Is de rij te smal om het gekozen aantal op deze breedte te tonen, dan houden de kaarten die breedte en scrolt de rij in plaats van ze samen te drukken. | 120px |
| Space Between Cards | De ruimte tussen kaarten. Gebruik een gewone lengte zoals 24px, niet sel(): de ruimte wordt bij de eerste weergave toegepast, voordat responsieve waarden zijn berekend. |
24px |
| Swipe Strip — Scroll Behavior | x mandatory komt altijd tot stilstand op de rand van een kaart; x proximity klikt alleen vast als de rij vlak bij een rand stopt; none scrolt vrij. |
x mandatory |
| Swipe Strip — Items Per Arrow Click | Hoe ver elke klik op een pijl en elke stap van autoplay beweegt: 1 tot 4 kaarten, of full, dat precies de zichtbare set verschuift bij de huidige schermgrootte (2 op een telefoon die er 2 toont, 4 op een desktop die er 4 toont). |
1 |
| Arrows on Sides (Classic) | Grote pijlen gecentreerd op de linker- en rechterrand van de rij. Arrows — Side Arrow Offset zet ze buiten de rij (negatief, bijv. -10px) of over de kaarten (positief). |
Aan, 6px |
| Swipe Strip — Title-Bar Arrows | Compacte knoppen ‹ › rechts van de titel van de widget. De titelbalk moet dan zichtbaar zijn. | Uit |
| Arrows — Arrow Style | Kant-en-klare looks, elk met een eigen hover: circle (lichte cirkel), dark, pill, outline, soft. none laat het thema van je site de pijlen opmaken. Wil je een voorinstelling aanpassen, voeg dan CSS toe in Arrows — Side Arrow Custom Style met !important op elke eigenschap die moet winnen. |
circle |
| Swipe Strip — Fade Arrows at Ends Hide Arrows on Touch Devices |
Dim en schakel de terugpijl aan het begin van de rij en de vooruitpijl aan het eind uit. Verberg alle pijlen op telefoons en tablets, waar vegen vanzelf spreekt. | Aan / Aan |
| Swipe Strip — Pagination Dots | Klikbare stippen onder de rij. Ze verschijnen alleen als er meer dan één pagina is om te scrollen, en worden opnieuw opgebouwd als de widget van formaat verandert. | Aan |
| Swipe Strip — Scrollbar | Een smalle scrollbalk onder de rij, met een eigen hoogte en eigen kleuren voor de schuifknop en de baan. | Uit |
| Drag to Scroll with Mouse | Desktopbezoekers kunnen de rij vastpakken en verslepen, zoals op een touchscreen. Slepen telt nooit als klik op een product. | Aan |
| Swipe Strip — Autoplay Interval (ms) | Schuif elke N milliseconden op, bijv. 4000; 0 of leeg is uit. Het pauzeert terwijl de bezoeker over de slider beweegt of hem aanraakt. Swipe Strip — Autoplay Loops to Start bepaalt wat er bij de laatste kaart gebeurt: terugspringen naar de eerste (aan) of stoppen (uit). |
Uit; lus aan |
Hoe kaarten hun formaat krijgen
Je stelt geen kaartbreedte in. Die wordt berekend uit hoeveel kaarten je zichtbaar wilt hebben:
card width = (row width − (items visible − 1) × gap) ÷ items visibleen ze zakt nooit onder Swipe Strip — Minimum Card Width. Hoogte, hoeken en hoe de foto de kaart vult, stel je in bij Card & Image → Card Box Style (Height, Corners, Image Fit) — de standaard height: sel(280px, 220px) geeft desktop en mobiel elk een eigen hoogte.
Hoeveel producten de widget krijgt, bepaalt de aanbeveling zelf: Te tonen aanbevelingen in de kaart Uitvoer, maximaal 12. Met 2 rijen en 12 producten heeft het raster zes kolommen om door te scrollen.
Demoproducten
Met zes voorbeeldproducten kun je ontwerpen voordat er een catalogus is gekoppeld. Ze verschijnen alleen in de editor van Personyze en op voorbeeldlinks, en alleen zolang de widget hoogstens één echte productkaart heeft; zodra je catalogus meer teruggeeft, nemen je producten het over. Bezoekers zien ze nooit. De schakelaar is Widget Layout → Demo Products (Preview Only), en die kun je gerust aan laten staan.
De knop Add to cart
In Add to Cart & View Buttons bepaalt Button Action wat de knop van de kaart doet. Add to cart (uses your cart integration), de standaard, legt het product in de winkelwagen van de bezoeker zonder de pagina te verlaten; Open the product page is een gewone link, voor een catalogus zonder winkelwagenintegratie. Add to cart voert de code voor snel toevoegen aan winkelwagen uit die voor je account is opgeslagen, en Quick Add to Cart — Cart Integration Argument wordt als tweede argument aan die code doorgegeven. On Success en On Error — Custom JavaScript vervangen de standaardmelding “Added to cart” door je eigen code.
Goed om te weten
- Items per apparaat volgen de widget, niet alleen het scherm. Op een desktop zakt een slider in een smalle zijbalk vanzelf naar het aantal voor tablet of mobiel, omdat de aantallen worden toegepast op basis van de eigen breedte van de widget.
- Text on Image verwijdert dubbelingen automatisch. Zolang Show Text on Image aanstaat, verbergen de titel, de merkregel en de prijs onder de foto zichzelf.
- Hoverstijlen zijn aparte velden. Verander je de basiskleur van een knop, neem die dan over in het bijbehorende veld Hover Style voor een consistente hover.
- Opgeslagen templatekaarten bevriezen hun code. Bewaar je een eigen kopie in Mijn sjablonen, dan gebruiken acties die daaruit worden gemaakt de code zoals die was bij het opslaan — sla de kaart na grote updates opnieuw op.
Gerelateerd
- Overlay Slider & Grid — dezelfde engine met naam en prijs op de foto.
- Vertical Product List — een gestapelde lijst voor zijbalken en smalle kolommen.
- Knop voor snel toevoegen aan winkelwagen — de code die de knop Add to cart uitvoert.
- Wizard Productaanbevelingen — kiezen wat de widget aanbeveelt.
- Templategalerij — elk kant-en-klaar ontwerp.