Productaanbevelingen als strakke, klikbare kaarten — dezelfde engine als de Buy Together-familie, zonder het bundelconcept: geen anker met het huidige product, geen schakelaars en geen lopend totaal. Elke kaart linkt rechtstreeks naar zijn product en heeft een eigen knop Add to Cart die bij hover verschijnt (zoals bij de sliders) en bevestigt met een moderne melding.
Hoe deze template werkt
- Drie indelingen. Horizontal (een rij kaarten, de standaard — past zich aan de kaarten aan), vertical (gestapelde lijstrijen) en compact (een ministrook met kleine foto’s, namen en prijzen).
- Add to Cart per kaart. Elke kaart heeft een eigen knop. Show Add to Cart bepaalt wanneer die verschijnt: hover (de standaard — vloeit in als de shopper over de kaart beweegt, altijd zichtbaar op touchscreens) of always. Een klik erop voegt dat ene product toe via de code voor snel toevoegen aan winkelwagen van je account en toont een bevestiging: modern (donkere, afgeronde melding met een vinkje), system (de ingebouwde melding van Personyze) of custom (je eigen JavaScript uit de velden On Success en On Error).
- Kaarten zijn klikbaar. Een klik ergens op een kaart (buiten de knop of de link op de naam) opent de productpagina, volgens de instelling Open Product Links In.
- Beperken op items of rijen. Limit By kiest tussen een vast aantal producten (Max Items Shown, standaard 4) of een aantal volledige rows (Max Rows Shown, standaard 1) — hoeveel kaarten er bij de huidige breedte ook in een rij passen. De rest verbergt zich achter een inklapbare link Show N more.
- Stijlaccenten en look-voorinstellingen. Vier accenten (light, gold, bold, ocean) plus de voorinstellingen Title Look, Buttons Look, Text Font en Item Info Order. Elke kleur en elk lettertype blijft afzonderlijk te overschrijven in een eigen stijlveld.
- Live demomodus. Tijdens het ontwerpen verschijnen zeven realistische demoproducten — genoeg om de link Show More en de hoverknoppen te laten zien; sitebezoekers zien ze nooit.
Badges, social proof en productinformatie
- Badges met verstandige standaardwaarden. Kortingspercentage (verborgen bij 0), NEW (toegevoegd in de afgelopen 14 dagen), Popular en Bestseller (top 5%), en lage voorraad (5 of minder) — elke drempel, tekst en stijl is aan te passen.
- Regels voor social proof. Aantallen “viewed today” en “bought today” per kaart, met een instelbare zichtbaarheid.
- Regels met productinformatie. Extra catalogusvelden (merk, eigen kolommen) onder de productnaam.
Laden, pop-ups en stabiliteit
- Glinsterende rijen van het Loading skeleton staan er tot de aanbevelingen binnen zijn.
- Smooth Reveal houdt de widget onzichtbaar tot zijn formaat vaststaat en laat hem dan invloeien — geen verspringen terwijl de pagina laadt.
- Popup Hugs Widget verkleint een te groot pop-upkader tot het formaat van de widget; zet het uit voor bannerpop-ups over de volle breedte.
- Bestand tegen site-CSS. De stijlen van de template zijn zo gebouwd dat ze agressieve CSS van de site overleven, terwijl aanpassingen per element die je in de editor maakt nog steeds voorgaan.
Goed om te weten
- Beperken op rijen meet de echte opmaak. Met Limit By: rows wordt de zichtbare set berekend uit waar de kaarten na het weergeven echt terechtkomen, zodat het zich aanpast aan elke containerbreedte; het wordt één keer per paginalading berekend.
- Centrale prijzen. Eén keuzelijst voor de prijsopmaak en één paar velden voor het valutasymbool gelden overal waar prijzen verschijnen.
- Opgeslagen templatekaarten bevriezen hun code. Sla je kopie in Mijn sjablonen na grote updates opnieuw op.
Gerelateerd
- Buy Together — bundelbouwer met live totaal — dezelfde kaarten met het volledige bundelconcept: ankerproduct, schakelaars en live totalen.
- Bought Together — klassieke strook — fotostrook, totaalvak en een lijst met selectievakjes.
- Knop voor snel toevoegen aan winkelwagen — de code die de knop Add to Cart uitvoert.
- Templates — het overzicht van de volledige templatebibliotheek.