Je zoekfunctie moet aanvoelen als een deel van je webshop, niet als een plugin. Stem kleuren en lettertype af, bepaal wat elke resultaatkaart toont en voeg badges toe die klanten wijzen op aanbiedingen en nieuwe producten.
Open Merchandising → Search, open een configuratie en ga naar Configure → Design & Styling. De live zoekwidget staat naast de editor, dus je ziet elke wijziging meteen.
Huisstijl
Stel vier kleuren in en bluebarry leidt de andere tinten voor je af:
- Button and highlight color: knoppen, actieve toestanden en accenten. Meestal je merkkleur.
- Background: de achtergrond van het zoekpaneel.
- Text: de hoofdtekst en iconen.
- Button text color: tekst op knoppen en andere elementen in je accentkleur. Kies een kleur die daarop goed leesbaar is.
Voeg een Logo (PNG of SVG) toe om het in de zoekbalk te tonen. Dat is optioneel.
Vorm en typografie
- Corner radius: Sharp, Rounded of Extra rounded, voor productafbeeldingen en labels. Stem het af op de knoppen en kaarten van je thema.
- Font: zoek in de catalogus van Google Fonts of de gangbare systeemlettertypes naar het lettertype van je webshop, of laat het op System default staan.
- Currency: de valuta waarin prijzen getoond worden.
- Language: de taal van de eigen teksten van de widget, zoals de placeholder, knoppen en filterkoppen. Kies Nederlands, Engels, Duits, Frans, Spaans of Italiaans, of laat het op Shopper's browser (default) staan om elke klant de taal van zijn browser te tonen, met Engels als terugvaloptie. Productnamen en beschrijvingen blijven zoals ze in je catalogus staan.
- Image hover effect: wat er gebeurt als een klant met de muis over een productafbeelding gaat. None, Show second image, Cycle through images of Zoom in. Dit werkt alleen op desktop. Telefoons tonen de eerste afbeelding.
De resultaatkaart
Elk product in de zoekfunctie verschijnt als kaart. Deze instellingen bepalen wat erop staat. De meeste verwijzen naar een producteigenschap, dus je kiest zelf welk veld in je catalogus de prijs, de voorraad of de beoordeling bevat.
Prijs en voorraad
- Price property: de prijs op de kaart. None verbergt prijzen.
- Compare-at price property: de prijs vóór korting, doorgestreept getoond als die afwijkt van de prijs.
- Stock property: de voorraad. Bij 0 of minder wordt een product als uitverkocht getoond.
De prijs- en voorraadeigenschap sturen ook de filters voor prijs en beschikbaarheid aan. Lees Zoekresultaten en filters instellen.
Prijsweergave en btw
Verkoop je aan bedrijven, of in een markt waar prijzen zonder btw gebruikelijk zijn? Kies onder Show on cards voor Incl. VAT only, Incl. and excl. VAT of Excl. VAT only. Toon je prijzen exclusief btw, kies dan een Excl. VAT property met die prijs, of vul één VAT rate in voor de hele catalogus. Currency sign zet het €-teken of een ander valutateken aan of uit voor elke prijs in de zoekfunctie.
Afbeeldingen, reviews en varianten
- Additional images: een eigenschap met extra afbeeldings-URL's per product. De hovereffecten gebruiken deze.
- Reviews: kies een Rating property en een Review count property om op elke kaart sterbeoordelingen te tonen.
- Variants: zet Show variants aan om op elke kaart kleur- of stijlstalen te tonen.
Snel in winkelwagen
Zet Quick add buttonaan om op elke kaart een knop "In winkelwagen" te zetten, zodat klanten kunnen kopen zonder de zoekfunctie te verlaten. Producten waarbij een keuze nodig is, zoals een maat, openen in plaats daarvan de productpagina. Op Shopify, WooCommerce en CCV Shop komt het product via snel toevoegen in de eigen winkelwagen van je webshop.
Badges
Badges zijn kleine labels linksboven op een resultaatkaart. Klik op Add badge en kies een Type:
- Sale: verschijnt op afgeprijsde producten. Stel een Minimum discount % in om hem alleen bij echte aanbiedingen te tonen (bij 0 verschijnt hij bij elke korting). Zet
{discount}in het label om het percentage te tonen, dus-{discount}%wordt "-20%". - Tag: verschijnt op producten met de tags die je kiest, zoals "Nieuw" of "Bestseller".
- Sold out: verschijnt op producten met een voorraad van 0 of minder. Producten zonder voorraadwaarde tellen als op voorraad.
Kies een Background color en een Text color en bekijk de Live preview. Wil je badges die afhangen van wie er winkelt, zoals "Voor droge huid"? Dat is een gepersonaliseerde badge. Lees Zoekresultaten personaliseren.
Eigen CSS
De instellingen hierboven zijn genoeg voor de meeste webshops. Wil jij of je developer verder gaan, dan zijn er twee CSS-velden: Search box CSS voor de dropdown en Results page CSS voor de resultatenpagina. Jouw CSS laadt na de onze, dus gewone regels winnen zonder !important.
De zoekfunctie draait in een eigen, afgeschermde laag op je pagina. De CSS van je thema kan hem dus niet per ongeluk breken, en CSS in deze velden is de manier om hem op te maken. bluebarry houdt een set stabiele classnamen aan die allemaal met sb- beginnen en waar developers bij updates veilig op kunnen bouwen. Classes met sb-i- zijn intern en kunnen zonder aankondiging veranderen, dus laat die met rust.
Goed om te weten
- Wijzigingen worden automatisch opgeslagen. Controleer het resultaat in de stap Preview op desktop en mobiel, of open het in je eigen webshop zonder dat klanten het zien. Lees Zoeken instellen.
- Toont een kaart geen prijs of geen sterren, controleer dan of de eigenschap die je koos voor je producten is ingevuld onder Data → Products.