Zoeken in Shopify: Search & Discovery goed zetten en predictive search bouwen

Iemand typt "blauwe jas" in je zoekbalk. Je hebt 47 navy coats op voorraad. Het zoekresultaat zegt: 0 producten gevonden. Klant weg, omzet weg. Dit zien we elke week bij shops die hun zoekfunctie nooit hebben aangeraakt: theme geïnstalleerd, producten geüpload, klaar.

Bij een klant hebben we de zoekdata doorgenomen: 31% van alle zoekopdrachten leverde geen resultaat op. Bijna een op de drie bezoekers die zoekt, klikt gefrustreerd weg. Terwijl het product er gewoon ligt.

Het gekke is dat de oplossing gratis in Shopify zit, in twee lagen. De eerste laag is Search & Discovery, de app van Shopify zelf, en die is puur klikwerk. De tweede laag is predictive search, de suggesties terwijl je klant typt, en daar komt wat code bij kijken. Doe ze in die volgorde.

Het probleem: je zoekfunctie spreekt geen Nederlands

Je klanten zoeken anders dan jij je producten noemt. De klant zoekt "sportbeha", jij noemt het "sports bra". De klant typt "trainingsbroek", in je catalogus heet het "jogger". De klant wil "sneakers", jij verkoopt "sportschoenen". Elke mismatch is een lege resultaatpagina.

Bij een sportwinkel waar we mee werken zochten klanten op "pre workout". De producten heetten "pre-workout", met streepje. Eén synoniemregel loste het op. Die ene streepje.

Laag 1: Search & Discovery instellen

Search & Discovery is de gratis app van Shopify voor zoeken, filters en aanbevelingen. Installeren via de App Store, direct werkend. Daarna vier dingen goed zetten.

Synoniemen. Dit maakt het verschil. Open Search & Discovery, ga naar Synoniemen en maak groepen aan. Voor fashion beginnen we meestal met deze basis:

Groep 1: jurk, dress, jurkje
Groep 2: jas, jacket, coat, jack
Groep 3: broek, pants, jeans, trousers
Groep 4: shirt, t-shirt, tee, top

Voor sportproducten:

Groep 1: sneaker, sportschoen, trainingsschoen, gympen
Groep 2: legging, tight, sportlegging
Groep 3: bidon, drinkfles, waterfles
Groep 4: whey, protein, proteïne, eiwit

Verzin ze niet: haal ze uit je zoekrapport. Elke zoekopdracht zonder resultaat is een synoniem dat je nog niet had, of een product dat je niet verkoopt. Dat rapport maandelijks nalopen is de goedkoopste conversie-optimalisatie die er is.

Aanbevelingen. De app toont automatisch gerelateerde producten op de productpagina, in de winkelwagen en op de bedankpagina. Ga naar Aanbevelingen en zet ze aan. De suggesties worden beter naarmate er meer verkoopdata is; je kunt ze per product ook handmatig vastzetten.

Filters. Saai, maar ze werken. Search & Discovery genereert ze op basis van metafields, varianten, voorraad en prijs. Het enige wat bijna niemand doet: de meest gebruikte filters bovenaan zetten. Kijk in je rapport welke filters klanten aanklikken en zet die volgorde.

Boosts. In plaats van bestsellers te boosten (die verkopen toch wel) boosten we stijgende producten. Elke maandag: analytics checken op producten die omhoog gaan, die zeven dagen een boost geven, verschil meten.

Laag 2: predictive search, suggesties terwijl je klant typt

Predictive search toont resultaten terwijl iemand typt. Bij "snea" staan je sneakers er al. Niet alleen producten, ook collecties, pagina's en artikelen. Het zit in elk Shopify-plan via de Predictive Search API, je hebt er geen app voor nodig.

Het slimme zit in de details. De API heeft typo-tolerantie: wie "addidas" typt, krijgt alsnog adidas. En hij is variantbewust: zoekt iemand "blauwe sneaker" en heb je een zwarte en een blauwe variant, dan komt de blauwe variant terug, niet zomaar het product.

Check eerst of je theme het ondersteunt. Dawn en de meeste moderne themes hebben een predictive-search-sectie en de bijbehorende JavaScript al aan boord; kijk in de theme-code naar predictive-search.liquid. Staat hij er niet, dan bouw je hem zelf. De basis is één fetch:

fetch('/search/suggest.json?q=' + searchQuery + '&resources[type]=product')
  .then(response => response.json())
  .then(suggestions => {
    // Toon de suggesties
  });

Meestal gaan we verder dan dat, want de parameters bepalen de kwaliteit. Voor een fashionshop beperken we tot producten en collecties, vijf resultaten, en verbergen we wat uitverkocht is:

// Focus op producten en collecties
'&resources[type]=product,collection' +
'&resources[limit]=5' +
'&resources[options][unavailable_products]=hide'

Voor een techshop wil je ook op SKU en barcode zoeken, omdat klanten daar met artikelnummers komen:

// Zoek ook op SKU en barcode
'&resources[options][fields]=title,variants.sku,variants.barcode'

Voor een shop met veel content neem je blogartikelen en pagina's mee:

// Include blog posts en pages
'&resources[type]=product,article,page'

Drie dingen die bijna niemand gebruikt

Sectie-rendering. In plaats van JSON ophalen en zelf HTML bouwen, laat je Shopify de sectie renderen. Je krijgt complete HTML terug die je direct in de pagina zet. Scheelt een hoop JavaScript:

fetch('/search/suggest?q=' + query + '&section_id=predictive-search')

Limiet per type. De meeste shops tonen tien producten en verder niets. Met limit_scope verdeel je het: vier producten, vier collecties, vier pagina's. Een veel rijkere suggestielijst.

'&resources[limit]=4&resources[limit_scope]=each'

Uitverkocht onderaan in plaats van weg. De klant ziet dat je het product voert, maar dat het nu niet op voorraad is. Beter voor terugkomers dan doen alsof het niet bestaat.

'&resources[options][unavailable_products]=last'

De implementatie die we meestal neerzetten

Niet bij elke letter een aanroep doen. Wacht 300 milliseconden na de laatste toetsaanslag en begin pas vanaf drie tekens. Dat scheelt serverload en voelt rustiger:

// Debounce voor performance
let searchTimeout;
searchInput.addEventListener('input', (e) => {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(() => {
    if (e.target.value.length > 2) {
      fetchPredictions(e.target.value);
    }
  }, 300);
});

function fetchPredictions(query) {
  fetch(`/search/suggest.json?q=${query}&resources[type]=product,collection&resources[limit]=8&resources[options][unavailable_products]=last`)
    .then(res => res.json())
    .then(data => {
      renderSuggestions(data.resources.results);
    });
}

Cache wat al gezocht is. Wie "jas" typt, backspace doet en opnieuw "jas" typt, hoeft niet nog een keer naar de server:

const searchCache = new Map();
if (searchCache.has(query)) {
  renderSuggestions(searchCache.get(query));
  return;
}

En laad de code pas als iemand de zoekbalk aanklikt. De meeste bezoekers zoeken nooit; die hoeven het script niet te downloaden:

searchInput.addEventListener('focus', () => {
  import('./predictive-search.js');
}, { once: true });

Wat vaak misgaat

Te veel resultaten. Tien suggesties is een muur. We houden het op vijf of zes. Geen laadstatus: toon iets tijdens het ophalen, anders denkt de klant dat het kapot is. Mobiel vergeten: op een telefoon werkt een schermvullend zoekscherm beter dan een klein dropdownmenu onder de balk.

En de grootste: niet meten. Registreer wat mensen zoeken en niet vinden. Dat zijn je ontbrekende synoniemen, of producten die je zou moeten voeren. Zonder die lijst optimaliseer je op gevoel.

Wat je eerst doet

Instellingen vóór code. Open Search & Discovery, kijk hoeveel procent van je zoekopdrachten geen resultaat geeft, en zet minimaal tien synoniemen uit dat rapport. Dat is een kwartier en het raakt elke bezoeker die zoekt. Predictive search bouw je daarna, als de basis klopt: het heeft geen zin om suggesties te tonen uit een index die je klanten niet begrijpt.

“Te veel shops willen alleen nieuwe bezoekers. Terwijl een deel van de huidige bezoekers niks kan vinden. Daar begin je.”

Heb je honderden collecties en twijfel je of filteren zonder app nog gaat? Daar schrijven we apart over, met een shop van 650 collecties als voorbeeld.