Look & feel

Onder Setup → Look & feel bepaal je hoe alles eruitziet wat jouw bezoekers van Nexym zien: de zoekbalk, de chat, popups, reviewwidgets, de productkaarten in die tools, de portalen en de mails die ze versturen. Je stelt het één keer in en elke module neemt het over. Ook een module die je later aanzet, krijgt meteen jouw uiterlijk.

Het dashboard zelf verandert niet mee: dat blijft er altijd uitzien als Nexym.

Wat je instelt

Bovenaan staat een voorbeeld: een kaart met een kop, tekst, een invulveld, knoppen, een label en een producttegel. Het verandert terwijl je iets aanpast, nog vóór je opslaat.

Groep	Wat erin zit
Kleuren	Primair en secundair (met de tekstkleur erop: automatisch wit of donker, of zelf gekozen), tekst, gedempte tekst, achtergrond, vlak, rand, gelukt / waarschuwing / fout, beoordelingssterren (standaard goud), opvallend (stickers en chips), een donker vlak met de tekst erop, en hoe donker de pagina wordt achter een popup of het zoeken.
Vorm	De afronding van kaarten en panelen, knoppen, velden en pillen/labels. Een hoog getal bij knoppen geeft helemaal ronde knoppen.
Typografie	Het lettertype (standaard dat van je eigen shop), het lettertype van koppen en de basisgrootte van tekst. Kies je een eigen lettertypenaam, dan werkt die alleen als je website dat lettertype al laadt. Daarnaast vier letterdiktes, per rol: Tekst (lopende tekst), Nadruk (labels, knoppen, chips en tabs), Vet (productnamen, prijzen en opvallende waarden) en Koppen (titels). Kies een dikte van 300 tot 900, of Zoals de shop: dan neemt elke tool de dikte over van de tekst en koppen op je eigen pagina. Laat je de standaard staan, dan houdt elk onderdeel de dikte die het al had.
Knoppen	Gevuld in de primaire kleur, donker gevuld of omlijnd, en hoeveel schaduw een popup of een zwevend venster krijgt. De chat en het zoeken houden hun eigen diepte; de schaduw van een producttegel kies je bij de tegelstijl.
Producttegel	Hoe een product eruitziet, overal waar het getoond wordt: vorm en passing van de foto, tweede foto bij hoveren, stijl en hoeken van de tegel, de kleurbolletjes (hoeken en ruimte ertussen), achtergronden, wat een tegel toont (zie Wat een tegel toont), het aantal regels voor de naam, prijs- en oude-prijskleur, de knop of het icoon voor de winkelwagen, hoe voorraad getoond wordt (zie Voorraad op de tegel), het sale-label, je voorraadlabels per taal en de woorden op de tegel per taal: de knoptekst, de tekst bij een product zonder foto en je leverbelofte (die laatste toont de zoekfunctie achter de voorraad).
Logo & badge	Je logo (in mails, op de startpagina van het zoeken en in de portalen), een avatar voor de chat, en of het kleine Nexym-merkje naast je tools staat.

Hoe het zoeken sorteert of filtert, blijft gewoon bij Site search.

Beheer → Look & feel: één keer instellen, elke module neemt het over.

Wat een tegel toont

Onder Producttegel → Wat een tegel toont staat een lijst met de velden van de tegel. Rechts zie je direct een voorbeeld; dat verandert terwijl je de lijst of je eigen CSS aanpast. Met Met actie en Weinig data wissel je tussen twee producten uit je eigen catalogus: één met een actieprijs en veel gegevens, en één met weinig gegevens. De actie en de beoordeling op het eerste product zijn een voorbeeld. Heeft je catalogus nog geen product met een foto en een prijs, dan staan er voorbeeldgegevens.

Per veld stel je in:

Kolom	Wat het doet
Pijltjes	De volgorde op de tegel.
Tonen	Aan of uit. Een veld dat uit staat, blijft op de lijst maar staat niet op de tegel.
Veld	De naam van het veld op deze lijst. Die naam staat niet op de tegel.
Uit je import	Welk veld het is: de vaste velden (naam, merk, SKU, EAN, beoordeling, prijs, normale prijs, voorraadstatus, kleuren, categorie, korte omschrijving, voorraad (aantal)) of een kenmerk uit je import, als Label · veldsleutel.
Plek op de tegel	Op de foto (labels linksboven op de foto), Boven de naam, Bij de naam of Onderaan.
</>	Stijl overnemen van en de ruimte boven en onder het veld: zie hieronder. Staat er een selector of een ruimte, dan is de knop paars. Stijl overnemen van staat niet bij kleuren, categorie, korte omschrijving en voorraad (aantal).
Prullenbak	Haalt het veld van de lijst.

Met + Veld toevoegen uit import zie je elk veld dat nog niet op de lijst staat, met een voorbeeldwaarde uit je eigen catalogus. Een klik zet het veld aan, bij de naam (een energieklasse op de foto). Een ander kenmerk kies je bij Uit je import van een rij.

Hoe een veld eruitziet, hangt af van het veld uit je import, niet van de naam op de lijst:

Veld	Op de tegel
Naam	De productnaam
Merk	Klein en grijs
SKU, EAN	Klein, in een vaste letterbreedte
Beoordeling	Sterren met het gemiddelde en het aantal
Prijs	De prijs
Normale prijs	Doorgestreept, alleen als die hoger is dan de prijs
Voorraadstatus	Je voorraadlabel (zie Voorraad op de tegel)
Kleuren	De kleurbolletjes onder de naam (in het zoeken)
Categorie	De naam van de hoofdcategorie van het product
Korte omschrijving	Hooguit twee regels
Voorraad (aantal)	Het aantal op voorraad, bijvoorbeeld 12 op voorraad (niet bij Alleen op voorraad / niet op voorraad)
Een energieklasse	Een groen label
Elk ander kenmerk	Kleine grijze tekst

• Heeft een product een veld niet, dan staat het er niet. Onder het voorbeeld staat welke velden daardoor wegvallen.
• Onderaan staan prijs, oude prijs en voorraad naast elkaar; elk ander veld krijgt een eigen regel.
• Het sale-label staat altijd linksboven of rechtsboven op de foto, zoals je het bij Sale-label instelt; velden op de foto staan eronder.

Waar de lijst geldt. Het zoeken toont de lijst helemaal: de volgorde, de plek, de velden uit je import en je eigen CSS, in elke weergave en op de startpagina. De chat, pop-ups, de maatchecker en de keuzehulp tonen dezelfde vaste velden aan of uit en je eigen CSS, in hun eigen compacte volgorde.

Een kenmerk uit je import staat al in de zoekindex: je hoeft niets opnieuw op te bouwen.

Heb je de lijst nooit aangepast, dan staat er wat je tegels altijd al toonden. Er verandert pas iets als je de lijst wijzigt.

Stijl overnemen van je shop

Wil je dat een veld er precies uitziet als op de producttegels van je eigen shop, klik dan op </> in de rij van dat veld. Bij Stijl overnemen van vul je in welk element op je shop hetzelfde laat zien, met een CSS-selector, bijvoorbeeld:

Veld	Voorbeeld
Naam	.product-name
Prijs	.price
Oude prijs	.old-price
Merk	.product-brand

Op je shop zoekt Nexym per veld het eerste zichtbare element dat bij de selector past en neemt daarvan over: lettertype, grootte, dikte, schuin of recht, regelhoogte, letterafstand, hoofdletters, onder- of doorstreping en kleur. Dat geldt voor elke producttegel: het zoeken (ook de compacte rijen en de startpagina), de chat, popups en de maatchecker.

• Leeg houdt de stijl van Look & feel; met niets ingevuld verandert er niets.
• Een pagina zonder producttegel (bijvoorbeeld de homepage) gebruikt wat Nexym het laatst op je shop las. Staat het element weer op een pagina, dan wordt het bijgewerkt.
• De oude prijs blijft doorgestreept, tenzij je shop hem zonder streep toont.
• Een tekstgrootte blijft tussen 9 en 40 pixels.
• Een selector met <, {, }, aanhalingstekens, een backslash of ; wordt niet opgeslagen; een selector die niets vindt, doet niets.

Het voorbeeld in het dashboard laat dit niet zien: daar is je shop niet, dus de voorbeeldtegel gebruikt Look & feel. Controleer het op je eigen shop. Met de debugger aan zie je in de console (Stijl overnemen van de shop) per veld of het element gevonden is, onthouden was of ontbrak.

Ruimte boven en onder een veld

Onder </> in de rij van een veld stel je ook in hoeveel ruimte er boven en onder dat veld op de tegel staat, in pixels (0 tot 60). Laat je een vakje leeg, dan houdt het veld zijn gewone ruimte. Het voorbeeld laat het direct zien.

• Zo zet je bijvoorbeeld de kleurbolletjes wat verder van de naam erboven en de prijs eronder: vul de ruimte in bij de rij Kleuren. Zonder eigen ruimte staan ze er 2 pixels vanaf.
• De ruimte geldt overal waar de tegel dat veld toont: in het zoeken en, voor de vaste velden, ook in de chat, pop-ups, de maatchecker en de keuzehulp.
• Had je eerder bij Ruimte boven en onder kleurbolletjes een andere waarde gekozen, dan staat die nu bij de rij Kleuren. Op je shop verandert er niets.

Eigen CSS

Onder de lijst staat Eigen CSS: je eigen regels voor de producttegel. Klik op een klasse om hem toe te voegen:

.nx-tile (de hele tegel), .nx-photo, .nx-badge, .nx-brand, .nx-name, .nx-sku, .nx-rating, .nx-price, .nx-old-price, .nx-stock en .nx-field (een veld uit je import).

Bijvoorbeeld:

.nx-name { font-size: 16px; }
.nx-price { color: #763cf7; }

Je CSS werkt alleen binnen de producttegel. Je shop en andere modules worden nooit geraakt:

• elke regel krijgt de tegel ervoor: .nx-name wordt .nx-tile .nx-name;
• elke regel krijgt !important, zodat hij altijd voorgaat op de standaardstijl;
• op je shop staat de tegel in een eigen afgeschermd blok, dus de CSS van je shop kan er niet in en je eigen CSS er niet uit.

Wat niet mag, wordt overgeslagen. Onder het tekstvak zie je per regel een waarschuwing met de reden:

Wat	Waarom
Regels voor html, body, :root, :host of *	Die raken je hele shop
@import, @media en andere @-regels	Geen externe bestanden of regels buiten de tegel
Een externe url()	Geen afbeeldingen van een andere website
position: fixed of sticky	Dat kan over je shop heen vallen
expression(), javascript: en behavior	Code is niet toegestaan

Wat je typt, blijft staan zoals je het schreef, zodat je de waarschuwing terugziet. Op je shop komt alleen het deel dat wel mag.

Voorraad op de tegel

Wat een producttegel over voorraad zegt, stel je in onder Producttegel. Het geldt voor elke producttegel: de zoekresultaten (raster en lijst), de chat, popups, de maatchecker en de keuzehulp. Per store kun je iets anders kiezen.

Wat er staat: de voorraadlabels

De tabel Voorraadlabels is leidend. Per status kies je een kleur en, als je wilt, eigen woorden per taal. Leeg gebruikt de standaardwoorden.

Status	Wanneer	Standaard
Op voorraad	Op voorraad zonder bekend aantal	Op voorraad
Op voorraad (aantal)	Op voorraad met een bekend aantal	Zonder eigen woorden hetzelfde als Op voorraad (woorden én kleur)
Bijna op	Op of onder Bijna op onder	Nog 2
Nabestelling	Te bestellen zonder voorraad	Nabestelbaar
Uitverkocht	Niet te bestellen	Niet op voorraad

• {qty} is het aantal op voorraad: {qty} op voorraad, Nog maar {qty}!. Is er geen aantal, dan staan de standaardwoorden er.
• {{ veldcode }} is een productveld, bijvoorbeeld Leverweek: {{ leverweek }}. Heeft een product het veld niet, dan staan de standaardwoorden er.
• De kleur Verborgen toont voor die status niets. Zet je Op voorraad op Verborgen, dan zie je alleen iets als het bijna op of uitverkocht is.

Een paar voorbeelden:

Je wilt	Zo stel je het in
Het precieze aantal	Op voorraad (aantal) en Bijna op: {qty} op voorraad
Wanneer het binnen is	Op voorraad: Morgen in huis; Uitverkocht: Levertijd 2–3 weken
Alleen bij schaarste	Op voorraad op Verborgen; Bijna op: Nog maar {qty}!

Alleen op voorraad / niet op voorraad (een schakelaar onder de tabel) maakt er twee standen van: Bijna op en Op voorraad (aantal) staan er als Op voorraad, zonder aantal. Nabestelling blijft een eigen status: het product is te bestellen maar ligt niet op voorraad, dus het zou niet eerlijk zijn om “op voorraad” te zeggen. Geef het een kleur en woorden, of zet het op Verborgen. Uitverkocht blijft uitverkocht.

Hoe het eruitziet: Stijl

Bij Stijl kies je een kaart. Elke kaart toont je voorraadlabels (op voorraad met een aantal, bijna op en uitverkocht) in jouw woorden en kleuren, ook met de schakelaar aan; het voorbeeld verandert mee terwijl je de tabel aanpast.

Stijl	Zo ziet het eruit
Stip met tekst	● Op voorraad
Label	Op voorraad (een gekleurd label)
Alleen stip	● (de tekst in de tooltip)
Icoon met tekst	✓ Op voorraad · ⚠ Nog 2 · ✕ Niet op voorraad
Voorraadbalk	▰▰▰ Op voorraad · ▰▱▱ Nog 2 · ▱▱▱ Niet op voorraad
Badge op de foto	een label op de productfoto
Gewone tekst	Op voorraad (alleen de tekst, in de kleur van de status)

• Alleen stip toont alleen de stip. De tekst staat in de tooltip en wordt voorgelezen. De vorm van de stip zegt ook de status (vol, half, een ring), zodat kleur nooit het enige signaal is.
• Badge op de foto zet een klein label linksboven op de productfoto; onder de foto staat dan geen voorraad. Heeft het product een sale-label linksboven, dan gaat de badge naar rechtsboven (naast het winkelwagenicoon als dat er staat), en delen de twee de breedte van de foto zodat ze elkaar nooit raken. Op een kleine foto, zoals de lijstweergave van het zoeken of een compacte rij, staat het label achter de prijs.

Wat je eerder koos

De oude keuze Voorraad als bestaat niet meer; wat je koos, staat nu in de tabel, de schakelaar en de stijl, zodat je tegels er hetzelfde uitzien:

Je koos	Nu
Label / Stip	de stijl Label / Stip met tekst
Precies aantal	lege woorden bij Op voorraad (aantal) en Bijna op: {qty} op voorraad
Op of niet op voorraad	de schakelaar aan
Levertijd	lege woorden bij Op voorraad: je leverbelofte; bij Bijna op: … · nog {qty}
Alleen bij schaarste	Op voorraad op Verborgen; lege woorden bij Bijna op: Nog maar {qty}!

Woorden die je zelf had geschreven, blijven staan.

Producten tonen

Onder de producttegel staat Producten tonen: welke producten een bezoeker te zien krijgt, in elke module die producten toont — Zoeken, de keuzehulp, productwidgets in popups, de chat en de configurator. Eén keer ingesteld, overal hetzelfde.

Instelling	Wat het doet	Standaard
Alleen producten op voorraad	Een product dat nu niet te bestellen is, wordt weggelaten.	Uit (de chat, de popups en de keuzehulp houden hun eigen “aan” tot je dit wijzigt)
Producten zonder voorraaddata	Een product waarvan Nexym nooit een voorraadstand kreeg. Tonen telt het als leverbaar, Verbergen laat het weg overal waar Alleen producten op voorraad aan staat.	Tonen
Producten zonder afbeelding verbergen	Een product zonder echte foto wordt weggelaten.	Uit
Alleen online producten	Laat weg wat je shop offline of uitgeschakeld heeft staan. Geldt voor alle stores: Zoeken bouwt één index voor het hele project.	Aan

Naast elke regel staat wat een wijziging voor Zoeken betekent: werkt direct of eerst opnieuw opbouwen (de nachtelijke herbouw, of Index opnieuw opbouwen op Overzicht van Zoeken).

Afwijken voor één module. Op het scherm van elke module staat in plaats van de oude schakelaar één regel: welke producten die module toont, met een link hierheen. Moet een module echt anders, open dan Afwijken voor … en kies daar een eigen waarde. Zo’n module krijgt het label Wijkt af van het project; met Project-instelling gebruiken volgt hij weer dit blok. Een keuzehulp kiest per keuzehulp: Zoals het project, of een eigen keuze.

Niet hetzelfde als de import. Alleen importeren wat op voorraad is onder Setup → Sync bepaalt welke producten Nexym überhaupt binnenkrijgt. Producten tonen bepaalt welke daarvan een bezoeker ziet.

Werkte je al met Nexym voor oktober 2026, dan staat hier wat je modules al deden: de waarde die de meeste modules hadden. Een module die anders stond, kreeg die waarde als eigen afwijking mee, zodat je website precies hetzelfde toont.

Prijs verbergen

Onder Producten tonen staat Prijs verbergen: voor producten die je op offertebasis verkoopt, of prijzen die alleen sommige klanten mogen zien. Op de plek van de prijs staat dan jouw eigen tekst, bijvoorbeeld Vraag een offerte aan.

Dit geldt alleen voor Site search, de websitechat en UI-elementen (productwidgets, cross-sells en shoppable looks tussen de zoekresultaten). Het retourportaal en andere modules tonen de prijs gewoon — daar gaat het om wat een klant betaald heeft.

Instelling	Wat het doet	Standaard
Prijzen verbergen	Zet het blok aan. Uit: elke prijs wordt getoond, zoals altijd.	Uit
Voor welke producten en bezoekers	Voorwaarden met alle of één van: elk productveld (ook je attributen), de eigen velden van de klant (bijvoorbeeld het btw-nummer) en wat er over de bezoeker bekend is (herkende klant, terugkerende bezoeker, een segment). Geen voorwaarden: elke prijs, voor iedereen.	Geen voorwaarden
Tekst op de plek van de prijs	Per taal van je websites. Leeg laat de standaardtekst zien (Vraag een offerte aan, Request a quote, Angebot anfordern).	Standaardtekst

Niet alleen verborgen, ook niet verstuurd. Een verborgen prijs gaat niet naar de browser van de bezoeker: geen prijs, geen oude prijs en dus geen sale-label, en geen winkelwagenknop op de tegel. De chat krijgt de prijs ook zelf niet te zien en noemt hem dus nooit. De tekst staat op de producttegel, die naar de productpagina linkt.

Een bezoeker die Nexym niet kent voldoet nooit aan een voorwaarde over de klant of de bezoeker. Wil je prijzen alleen tonen aan klanten die je herkent, kies dan Herkende klant is nee: iedereen die niet herkend wordt, ziet je tekst.

Prijsfilter en sorteren. Verberg je élke prijs (geen productvoorwaarden), dan laat Site search ook het prijsfilter en sorteren op prijs weg.

Per store en per taal kan dit blok ook anders, net als de rest van Look & feel.

Look & feel gaat verder over het uiterlijk.

Per store een eigen uiterlijk

Heb je meer dan één store (zie Meerdere stores), kies dan bovenin een store. Elk veld krijgt dan Standaard gebruiken:

• aangevinkt volgt de store het uiterlijk van het hele project;
• uitgevinkt geef je de store een eigen waarde — bijvoorbeeld een andere primaire kleur of een eigen logo. Met Eigen waarde · terugzetten volgt hij weer de standaard.

Zo kan elke store een andere kleur, een ander lettertype of een ander logo hebben, en per taal van een store kan het ook nog verschillen. Dat geldt ook voor Producten tonen (behalve Alleen online producten). Een bezoeker ziet altijd het uiterlijk van de store en de taal waarop hij is, in de widgets én in de mails die daarover gaan.

Met één store verandert er niets: je ziet geen storekeuze en geen Standaard gebruiken.

Wanneer je het op je site ziet

Opslaan geldt meteen voor nieuwe mails. Op je website zie je het zodra de browser het script opnieuw ophaalt — binnen vijf minuten, of meteen met Wijzigingen meteen toepassen (zie Nieuwe versies zonder opnieuw plakken).

Heb je nooit iets ingesteld, dan ziet alles eruit zoals altijd: de standaardkleuren violet en teal en het lettertype van je eigen shop.

Voor ontwikkelaars

Het embed-script zet de waarden één keer op de pagina als CSS-variabelen (--nx-look-primary, --nx-look-radius, --nx-look-tile-ratio …) en stelt ze beschikbaar als Nexym.look. Wil je een eigen element op je shop in dezelfde stijl, gebruik dan die variabelen, bijvoorbeeld color: var(--nx-look-primary).

De overgenomen shopstijl staat ernaast als --nx-adopt-<veld>-<eigenschap>, met als veld brand, name, sku, ean, price, was (oude prijs), stock of rating (een kenmerk uit je import: f- en de veldsleutel, bijvoorbeeld f-breedte), en als eigenschap font, size, weight, style, line, spacing, transform, decoration of color (bijvoorbeeld --nx-adopt-name-size). Wat per veld gevonden is, staat in Nexym.look.adopted.

Wat een module nog zelf kiest

Geen enkele module heeft nog een eigen kleur, afronding of lettertype: dat staat allemaal hier. Wat een module zelf houdt, is indeling en gedrag (waar een knop staat, hoe breed een paneel is) en een keuze voor één element: de accentkleur van één popup, de kleuren en het lettertype van één offertesjabloon (voor de PDF), de kleur van één plaatsing van de maatwijzer en een eigen kleur voor de winkelwagenknop van een configurator. Laat je die leeg, dan volgt het element Look & feel.