UI elements: productwidgets

Een productwidget toont producten uit je hub op je eigen site. Er zijn vier vormen: Past hier goed bij en Anderen kopen ook (een rij producten in de pagina), Productslide-in (één product in een hoek) en Social proof (een kaartje met een recente aankoop). Waar ze staan en hun eigen instellingen lees je op Soorten en vormen. Deze pagina gaat over welke producten erin komen, hoe ze eruitzien en wat social proof over een koper zegt.

Welke producten

Bij Inhoud kies je onder Welke producten een bron:

Bron	Wat hij toont	Waar het uit komt
Past bij het huidige product	Producten die bij het product op de pagina passen.	Eerst de gerelateerde producten die je in je eigen shop aan dit product koppelde (cross-sell, dan gerelateerd, in jouw volgorde). Daarna wat bezoekers samen kochten, samen in hun mand legden of samen bekeken, over de laatste 90 dagen.
Anderen kochten ook	Wat in dezelfde orders gekocht werd.	Echte orders. Op een productpagina: wat met dit product gekocht werd. Met iets in de winkelmand: wat met die producten gekocht werd. Anders: wat het laatst gekocht werd, over de laatste 30 dagen.
Bestsellers in deze categorie	Wat het meest verkocht werd.	Echte orders van de laatste 30 dagen, binnen de categorie van het product of de categoriepagina. Zonder categorie: de hele shop. Geannuleerde en terugbetaalde orders tellen niet.
Zelf kiezen	Een vaste selectie.	De producten die jij kiest onder Jouw producten, in deze volgorde (tot twaalf, uit je eigen catalogus).

Alleen echte gegevens. Heeft een bron voor een pagina niets te zeggen, dan verschijnt de widget daar niet. Hij wordt nooit aangevuld met willekeurige of “populaire” producten. Een lege rij op een nieuwe shop is dus normaal: hij vult zich zodra er orders en bezoeken zijn.

Verder geldt voor elke bron:

• Alleen producten die online staan, met een naam en een link. Met Alleen producten op voorraad aan (standaard, onder Instellingen) ook alleen wat op voorraad is.
• Het product op de pagina en wat al in de winkelmand ligt, stelt de widget nooit voor.
• Een variant uit een order telt als zijn hoofdproduct.
• Past bij het huidige product werkt alleen op een productpagina. Op elke andere pagina verschijnt hij niet.
• Een lege keuze bij Zelf kiezen kun je niet opslaan: kies minstens één product.

Naar de pagina gaat alleen een productkaart: naam, link, afbeelding, prijs, de oude prijs tijdens een actie, en of het op voorraad is. Nooit een order, een klant, een aantal of een tijdstip.

Instelling	Wat het doet	Standaard
Aantal	3, 4 of 6 producten (niet bij de productslide-in: die toont er één).	4
Prijs tonen	Met of zonder prijs op de kaarten.	Aan

De stijl van de kaarten

Bij Inhoud kies je in de kaart van de vorm onder Productkaarten hoe de kaarten van Past hier goed bij en Anderen kopen ook eruitzien:

Stijl	Wat het doet
Stijl van de shop	Neemt een producttegel van je eigen shop over, zodat de rij eruitziet als de rest.
Nexym stijl	Strakke kaarten in de kleuren van je shop.
Eigen template	Je eigen HTML met placeholders. Voor ontwikkelaars.

Kies je niets, dan geldt Stijl van de kaarten onder Instellingen → Productwidgets (standaard Stijl van de shop).

Stijl van de shop

Nexym zoekt op de pagina een producttegel van je eigen shop, bijvoorbeeld uit een categorielijst of een blok met gerelateerde producten, en maakt voor elk product een kopie van die tegel met de afbeelding, de naam, de prijs (in de schrijfwijze van je shop, zoals “€ 39,-”) en de link van dat product. Zo krijgt de rij je eigen lettertype, kleuren en opmaak.

• Waar het werkt. De tegel wordt vanzelf gevonden op Magento, Shopify, WooCommerce, Shopware en de meeste thema’s. Staat er op een pagina geen tegel, dan gebruikt Nexym de tegel die de bezoeker eerder in dit bezoek op je shop zag.
• Jouw producttegel. Wordt je tegel niet vanzelf gevonden (een eigen thema, een page builder), vul dan bij Jouw producttegel een CSS-selector in, zoals .product-item. Dat kan per widget bij Inhoud, of één keer voor alle widgets onder Instellingen → Productwidgets. Je webbouwer weet welke je nodig hebt.
• Alleen op je eigen site te zien. Het voorbeeld in het dashboard toont altijd de Nexym stijl, met producten uit je eigen hub. Bekijk de stijl van je shop met Testen op mijn site.
• Terugval. Is er geen producttegel te vinden, dan gebruikt de widget de Nexym stijl, in de kleuren van je shop. Mist een tegel een afbeelding, naam of link, dan neemt Nexym alleen het lettertype, de kleuren, de hoeken en de schaduw van je tegel over op een eigen kaart.

Opmerking

De kopie is bewust alleen een plaatje met een link. Knoppen en functies van je thema die JavaScript nodig hebben, werken er niet in: een quick-view, kleur- of maatbolletjes (swatches), een verlanglijst en de knop In winkelwagen van je tegel worden weggehaald. Die knop zou namelijk het product van de oorspronkelijke tegel toevoegen, niet het voorgestelde. Beoordelingssterren, badges en voorraadlabels van je tegel vallen ook weg.

Nexym stijl

De producttegel uit Setup → Look & feel → Producttegel: dezelfde fotoverhouding, achtergrond, hoeken, prijs, oude prijs en voorraadlabels als in Site search en de chat, in de kleuren uit Look & feel. Staat Prijs tonen uit, dan laat de tegel de prijs weg. Dit is ook wat je in het voorbeeld in het dashboard ziet.

Eigen template

Met Eigen template schrijf je onder Kaarttemplate zelf de HTML van één kaart. Nexym vult per product deze placeholders in:

Placeholder	Wordt
{{image}}	De link naar de productafbeelding
{{name}}	De productnaam
{{price}}	De prijs
{{old_price}}	De oude prijs, tijdens een actie
{{url}}	De link naar de productpagina

Bijvoorbeeld:

<a href="{{url}}" class="card"><img src="{{image}}" alt=""><h3>{{name}}</h3><span class="price">{{price}}</span></a>

Een template zonder {{url}} of {{name}} kun je niet opslaan: dan is het geen productkaart. Scripts en styles mogen er niet in, en ook geen formulieren of eigen gedrag. Wat er toch in staat, haalt Nexym bij het opslaan weg; een link of afbeelding mag alleen een placeholder of een gewone, veilige URL zijn. Je opmaak komt uit de stylesheet van je eigen site, via de klassen die je in de template zet.

De carrousel

Past hier goed bij en Anderen kopen ook zijn een horizontale rij die je kunt doorbladeren:

• Vegen op een telefoon of touchpad; de rij klikt op een kaart vast.
• Pijlen links en rechts. Aan het begin en eind is de pijl aan die kant uit.
• Staat er op de pagina een bekende slider met eigen pijlen (van je thema), dan gebruikt de rij de pijlen van je eigen slider, zodat ze er hetzelfde uitzien. Anders tekent hij eenvoudige eigen pijlen.
• Met het toetsenbord bladeren de pijltjestoetsen door de rij. Een schermlezer hoort dat het een carrousel is, en per kaart “1 van 6”.

Social proof en privacy

Een social-proof-kaartje zegt dat iemand net iets kocht. Bij Inhoud kies je onder Wat er over de koper staat:

Keuze	Op je site	Over de koper
Anoniem, met de plaats (standaard)	“Iemand uit Utrecht kocht net …”	Alleen de plaats, geen naam
Alleen het product	“… is net gekocht”	Niets
Voornaam en plaats	“Anna uit Utrecht kocht net …”	De voornaam en de plaats van een echte klant

Voornaam en plaats kun je alleen opslaan als je bevestigt: Onze privacyverklaring vertelt kopers dit, en ze kunnen bezwaar maken. Een voornaam met een plaats en een aankoop is een persoonsgegeven van een echte klant, getoond aan onbekenden. Gebruik het dus alleen als je privacyverklaring je kopers vertelt dat hun voornaam en woonplaats zo getoond kunnen worden, en ze daartegen bezwaar kunnen maken.

Bij elke keuze geldt:

• Nexym stuurt alleen wat de keuze toelaat naar de pagina: hooguit een voornaam en een plaats, nooit een achternaam, adres of bedrag.
• Alleen echte orders uit het venster onder Instellingen (Orders van de laatste … uur, van minstens €, standaard 48 uur). Geannuleerde en terugbetaalde orders tellen niet. Zijn er geen passende orders, dan verschijnt er niets.
• Nexym bewaart niets extra: het kaartje wordt uit je bestaande orders gemaakt, en die volgen de bewaartermijnen onder Data & bewaren.

Opgepast

Een social-proof-element van vóór UI elements toonde altijd een voornaam en een plaats. Het blijft dat doen, zodat er op je site niets verandert. De eerste keer dat je het opslaat, vraagt de wizard om de bevestiging hierboven. Wil je dat niet bevestigen, kies dan Anoniem, met de plaats of Alleen het product.

Wat een productwidget meet

• Weergave: pas als de rij echt in beeld komt, niet als de pagina laadt.
• Klik: een klik op een product. Die telt bij het element, als aanbeveling op de pagina Impact en in de klantcontext, en gaat als select_item naar je GA4 (als dat aan staat). Zie Meten en privacy.

Waarom zie ik geen productwidget?

• Geen gegevens voor die pagina. De bron heeft hier niets te zeggen: geen gekoppelde of samen gekochte producten, geen orders in de categorie, of alles is uitverkocht. Dan verschijnt er bewust niets.
• Geen plek op de pagina. De gekozen Positie (bijvoorbeeld Na productbeschrijving) bestaat op deze pagina niet, of je CSS-selector vindt niets.
• Niet op een productpagina. Past bij het huidige product werkt alleen op een productpagina.
• De gewone controles: staat het element Live, klopt Voor wie, en staat de module aan? Zie Vragen en begrippen.