De complete productcarrousel: één template voor klassieke sliders, scrollende rasters met meerdere rijen en merchandisingkaarten vol badges. Kies een Style accent (light, gold, bold, ocean) en elke kaart, badge, knop en prijs krijgt met één klik een nieuwe kleur.
Wat erin zit
- Rasters met meerdere rijen (instelling Rows), pijlen aan de zijkant of in de titelbalk, paginabolletjes, scrollbalk, autoplay met pauze bij hover, slepen om te scrollen, en controle over vastklikken.
- Hoekbadges (korting / uitverkooppercentage, prijsdaling, lage voorraad) en een verplaatsbare badgestapel (New, Popular, Best Seller, tijdelijke aanbiedingen, eigen data).
- Sterrenbeoordelingen met aantallen reviews, wekelijkse en dagelijkse statistieken van weergaven/verkopen in drie looks (divided, plain, pill), een social-proof-ticker en een afteltimer.
- Hovereffecten: kaartschaduw, inzoomen op de afbeelding, overvloeien naar een tweede afbeelding, een hoveroverlay met knoppen, een paneel dat onderaan omhoogschuift, en een geanimeerde Add to Cart.
- Producttekst: titel met stijlpresets voor de kop van de widget, regel met merk/ondertitel, beschrijving, eigen datakolom, prijs per eenheid, betalingsregel, link naar opties, linkknop, verlanglijstje.
- Card Info Order (standard / brand-first / price-first) en een link View-All in de titelbalk.
Hoe deze template werkt
Deze templatefamilie is gebouwd rond vier ideeën:
- Stijlaccenten. De eerste instelling, Style accent (light, gold, bold, ocean), geeft kaarten, badges, knoppen, prijzen, bolletjes en scrollbalken met één klik samen een nieuwe kleur. Elke kleur is daarna nog steeds afzonderlijk te overschrijven in een eigen stijlveld.
- Catalogusvelden 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, beschrijving, voorraad, kortingspercentage, datums en eigen velden. De koppelingen zijn globaal: stel je daar een kolom in, dan wordt elk element dat die gebruikt bijgewerkt. Winkels met volledig eigen feeds kunnen de hele widget vanuit deze ene sectie opnieuw bedraden.
- Live demomodus. Tijdens het ontwerpen verschijnen automatisch realistische demoproducten (bezoekers zien ze nooit). De eerste demokaart is een live etalage: klik op een element erop om het een stijl te geven, en elke schakelaar — badges, Add to Cart, overlays, statistieken, beschrijving, prijs per eenheid — reageert er zichtbaar op.
- Centrale prijzen. De sectie Pricing heeft één keuzelijst Price Format (standard / european / rounded / rounded-european) en één paar velden voor het valutasymbool die overal gelden waar prijzen verschijnen, ook in de overlay op de afbeelding. Producten zonder prijs tonen niets — geen verweesde valutasymbolen.
Goed om te weten
- Items per apparaat reageren op de container, niet alleen op het scherm. Het aantal zichtbare items (desktop / tablet / mobiel) wordt afgeleid van de eigen breedte van de widget, dus het werkt correct in het apparaatvoorbeeld van de editor, op echte telefoons en zelfs in smalle zijbalken.
- Text on Image verwijdert dubbelingen automatisch. Zolang de overlay aan staat, 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 Your templates, dan gebruiken acties die daaruit worden gemaakt de code zoals die was bij het opslaan — sla de kaart na grote updates opnieuw op.