Producten als gestapelde rijen — gemaakt voor zijbalken, smalle kolommen, winkelwagenpagina’s en blogplaatsingen waar een carrousel niet past. Elke rij toont de foto, titel en prijs, met badges, optionele sterbeoordelingen, een snelle knop Add to cart en een afteltimer bij tijdelijke aanbiedingen. Een knop Show More toont de rest, een paar tegelijk.
Hoe deze template werkt
- Twee indelingen. List Layout → Form Position wisselt tussen side — de klassieke zijbalkrij, met een miniatuur naast de tekst (Thumbnail Width en Height (Side Layout), standaard 96px) — en stacked — de afbeelding boven en de tekst eronder, als volledige kaarten. Space Between Items bepaalt de ruimte tussen de rijen.
- Show More. Items Shown Initially (standaard 3) zijn eerst zichtbaar, en elke klik op de knop toont er Items Revealed Per Click meer (standaard 3). Zodra alles zichtbaar is, wordt de knop Show Less en klapt hij de lijst weer in. Show More Button Position is center, left, right of full width; zet Show More Button uit om alle items in één keer te tonen.
- Top-10-lijsten. Numbering (Top-10 Style) → Show Item Numbers zet een genummerde badge op elk item, voor ranglijsten.
- Style-accenten. Style accent (light, gold, bold, ocean) kleurt de nummering, titel, sterren, knoppen en itemachtergronden in één keer anders; gold is de donkere premium look. Elke kleur is nog steeds afzonderlijk te overschrijven in een eigen stijlveld.
- Badges. Popular, Best Seller, New, tijdgebonden en eigen (feed-)badges delen één stapel — standaard linksboven, te verplaatsen met Badge Stack Corner. De rest heeft een eigen hoek: Discount rechtsboven, Price Drop rechtsonder, Low Stock linksonder, en het verlanglijsthartje rechtsboven. Een badge Back-in-Stock staat in de sectie New Badge.
- De aftelklok. De Time-based Offer Badge leest het Offer End Date Field (een Unix-timestamp in je catalogus), kan live aftellen (Show Countdown Timer) en verbergt zichzelf zodra de datum verstreken is.
- Catalog Fields en centrale prijzen. Catalog Fields (tweede in het menu) koppelt elke productkolom die de template gebruikt, één keer per site. De sectie Pricing heeft één keuzelijst Price Format (standard, european, rounded, rounded-european) en één paar velden voor het valutasymbool, voor elke prijs in de lijst.
- Toevoegen aan winkelwagen. In Quick add to cart kies je met Button Action tussen Add to cart (uses your cart integration) — de standaard, die de code voor snel toevoegen aan winkelwagen van je account uitvoert — en Open the product page, een gewone link. Quick Add to Cart — Cart Integration Argument wordt als tweede argument aan die code doorgegeven.
- Demoproducten. Demo Products (Preview Only) toont zes voorbeeldproducten terwijl je ontwerpt, voordat er een catalogus is gekoppeld. Ze verschijnen alleen in de editor van Personyze en op voorbeeldlinks; zodra je catalogus meer dan één product laadt, verschijnen je eigen producten. Bezoekers zien ze nooit.
Goed om te weten
- 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
- Product Slider & Grid — dezelfde producten als carrousel of scrollend raster.
- Recommendation Cards — een rij, lijst of strook met kaarten.
- Knop voor snel toevoegen aan winkelwagen — de code die de knop Add to cart uitvoert.
- Templategalerij — elk kant-en-klaar ontwerp.