Een Shopify AI-shoppingassistent bouwen

Een Shopify AI-shoppingassistent helpt een bezoeker beschrijven wat die nodig heeft, doorzoekt je catalogus en legt een kleine set passende producten uit. In deze tutorial bouw je er een die vraagt naar rijvoorkeuren, snowboards binnen een budget vergelijkt en een gevraagde kleur of maat controleert voordat er iets over beschikbaarheid wordt gezegd.

Het voorbeeld is Quickboards, een fictieve snowboardwinkel. We hebben de agent gebouwd in een lokaal draaiende Quickchat AI App, verbonden met een echte Shopify-democatalogus en de onderstaande gesprekken opgenomen. De productkaarten bevatten echte catalogusafbeeldingen en demoprijzen. De alpine illustratie is een door AI gegenereerde redactionele afbeelding, geen ander product dat te koop is.

Je leert ook hoe je de tools achter een antwoord inspecteert, de assistent in batches test en optioneel een winkelwagen volgt tot AI-Assisted Revenue. Het attributievoorbeeld gebruikt een duidelijk gelabelde lokale demonstratiebestelling, geen echte verkoop.

De voltooide ervaring is een aparte productzoekpagina met een inline gesprek:

De lokaal draaiende demopagina gebruikt de echte Quickchat AI Embed en live Shopify-catalogus. Het is geen screenshot van een gepubliceerd Shopify-thema. Een nadere weergave van de aanbevelingen staat in de testsectie.

De belangrijke controle komt nadat de verbinding is gelukt. Onze catalogus noemde lengtes van 144–160 cm in een beschrijving, maar stelde geen selecteerbare optie Size beschikbaar. De varianttest laat zien hoe de agent met dat gat omgaat zonder een board van 156 cm te beloven.

Wat ga je bouwen, en wat heb je nodig?

Je bouwt een conversationele productzoeker die drie nuttige voorkeuren verzamelt, maximaal twee aanbevelingen toont en de shopper de keuze laat verfijnen.

Dit is een specifieke implementatie van een productaanbevelingschatbot. Het ondersteunt een briefing zoals “gemiddelde rider, geprepareerde pistes, maximaal $800” en ook een bezoeker die hulp nodig heeft om die voorkeuren te formuleren. Niet elke bezoeker hoeft dezelfde vragenlijst te doorlopen.

Voordat je begint:

1. Maak een Quickchat AI-account, of gebruik een bestaand account. Free bevat MCP-toegang en 50 maandelijkse AI-credits voor persoonlijke, niet-commerciële tests. Gesprekken en Simulation tests verbruiken credits. Kies voor een merchant-implementatie een abonnement voor commercieel gebruik.
2. Zorg dat je de root-URL van je Shopify-winkel bij de hand hebt, bijvoorbeeld https://your-store.myshopify.com. Gebruik https://quickchat-ai.myshopify.com, de demowinkel van Quickchat AI, om onze catalogusspecifieke tests te reproduceren. De demodata kan veranderen; controleer actuele resultaten voordat je prijzen vergelijkt.
3. Voor implementatie heb je toestemming nodig om je website of Shopify-thema te bewerken. Een thema met een Custom Liquid-sectie, zoals Dawn, kan de inline snippet hosten. Je kunt ook de volledige standalone paginasjabloon gebruiken.

Begin met de vergelijkingszoeker in stappen 1–7. De optionele secties voegen daarna winkelwagencreatie, bestelattributie en messagingkanalen toe. De agent neemt nooit betalingen aan en reserveert geen voorraad; een shopper rondt elke aankoop af in Shopify checkout.

Beoordeel je al verschillende Shopify-apps? Onze vergelijking van Shopify AI-chatbots behandelt die keuze. Deze gids richt zich op het bouwen en testen van de workflow voor productzoeken.

Hoe kiest de assistent producten uit Shopify?

De agent combineert de voorkeuren van de shopper met productgegevens die door Shopify worden geretourneerd, en legt daarna een shortlist uit in het gesprek.

De shopper levert de beperkingen. Shopify levert productfeiten. Het model bepaalt welke geretourneerde kandidaten passen en hoe ze worden uitgelegd.

Shopify MCP is de verbinding tussen de agent en de geadverteerde tools van de winkel. MCP staat voor Model Context Protocol. Je voert de winkel-URL in; Quickchat AI handelt het ontdekken van tools en catalogusverzoeken af. Er is geen aangepaste REST-actie, request body of Shopify Admin API key die je in dit recept moet plakken.

Die scheiding is belangrijk bij het testen:

Een zoekresultaat is een kandidaat. Het kan nog steeds de verkeerde categorie zijn of slecht passen. Ook bewijst het bestaan van een product in de catalogus niet dat elke kleur-en-maatcombinatie beschikbaar is.

Shopify documenteert de catalogustoolinterface in de Storefront Catalog MCP guide. Zie voor meer detail over de productdataproblemen achter deze integratie onze engineering notes over Shopify MCP.

Hoe maak je de shoppingassistent?

Maak de agent handmatig, geef deze een productzoektaak en laat productprijzen buiten de Knowledge Base.

Stap 1. Rond de initiële setup af

1. Meld je aan met Google of e-mail. Als je e-mail gebruikt, volg dan de verificatiemail voordat je inlogt.
2. Kies op het initiële setupscherm Set up manually.
3. Voer in Identity Quickboards Guide in bij Name your AI Agent. Voer in Describe what you want your agent to do het volgende in:

Je bent Quickboards Guide, de shoppingassistent voor Quickboards, een demonstratiewinkel voor snowboards. Help bezoekers een snowboard te vinden dat past bij hun manier van rijden en budget. Gebruik de verbonden Shopify-catalogus voor producten en prijzen. Stel nuttige vervolgvragen, leg je aanbevelingen kort uit en toon productkaarten. Wees beknopt en vriendelijk. Dit is een productzoekgesprek: vergelijk producten en controleer details, maar maak of wijzig geen winkelwagen en start geen checkout. Verzin geen productspecificaties, beschikbaarheid of beleidsregels.

4. Klik op Next. Laat in Knowledge Base de importopties leeg voor dit catalogus-only voorbeeld en klik daarna op Next.
5. Selecteer in External apps Shopify en daarna Next. Dit registreert de gewenste integratie; de daadwerkelijke verbinding komt in stap 2.
6. Selecteer in Deployment Chat embed en daarna Next. Dit publiceert nog niets.
7. Kies in Choose your plan Skip for now om door te gaan met Free. Als er een aanbiedingsdialoog verschijnt, sluit die en kies opnieuw Skip for now.

Ga voor een bestaande agent direct naar Identity → AI Persona. Stel Name in op Quickboards Guide. Het veld Main Prompt is waar je de geteste instructies in stap 3 installeert.

Stel op hetzelfde tabblad AI Persona Personality in op Friendly, Profession op Shopping Assistant, Creativity op Low en Reply Length op Normal om overeen te komen met deze demo.

Begin in Identity in de linkerzijbalk. AI Persona bevat de instellingen voor dit recept; de close-up hieronder toont de velden die je moet bewerken.

Het dashboard noemt het instructieveld Main Prompt. Open de Edit-bediening om de initiële beschrijving te vervangen; wijzigingen worden automatisch opgeslagen.

Je kunt later geverifieerde verzend- of retourregels toevoegen aan de Knowledge Base. Onze gids voor Knowledge Base-configuratie legt uit hoe je die content organiseert. Dit voorbeeld laat beleid weg, zodat er één duidelijke bron is voor productprijzen, opties en beschikbaarheid: de verbonden catalogus. Onderhoud geen tweede prijslijst in de prompt.

Stap 2. Verbind en activeer Shopify MCP

1. Open Actions & MCPs.
2. Kies onder Custom Actions Add Action en daarna Shopify MCP.
3. Voer in Shopify store URL de root-URL in:

https://quickchat-ai.myshopify.com

4. Kies Save. De verbinding wordt gecontroleerd voordat deze wordt opgeslagen.
5. Zet de schakelaar op de kaart Shopify Storefront MCP aan. Opslaan via deze dialoog en het activeren van de actie zijn afzonderlijke stappen.

Zoek Shopify Storefront MCP onder Custom Actions. De schakelaar bepaalt of de agent de verbinding kan gebruiken.

Plak de root-URL van de winkel in Shopify store URL. Voeg geen MCP-endpoint of productpad toe.

Als je agent al een Shopify-actie heeft, gebruik dan Edit Action op die kaart in plaats van een andere verbinding te maken. De Shopify deployment-documentatie beschrijft ook de aparte installatieroute via de Shopify-app. Het installeren van die app is niet vereist voor de handmatige MCP-verbinding die hier wordt gebruikt.

Open voor de eerste verbindingscontrole AI Preview en vraag:

Controleer of het Iron snowboard in Ice beschikbaar is om te bestellen en wat het kost. Voeg het niet toe aan een winkelwagen.

Op onze testdatum was de geretourneerde variant beschikbaar voor $699.95 USD. Vervang dit voor je eigen winkel door een product en optie waarvan je de huidige waarde kunt verifiëren. Een geslaagde verbinding is noodzakelijk, maar dit ene antwoord valideert niet de hele zoeker.

Stap 3. Plak de volledige Main Prompt

Open Identity → AI Persona → Main Prompt → Edit, vervang de initiële beschrijving door het volgende blok en sluit de editor nadat deze automatisch is opgeslagen. Dit is de prompt die voor de definitieve tests is gebruikt. Vervang voor een andere categorie de winkelidentiteit en de voorkeursvragen samen; behoud de regels voor catalogusgrounding en ontbrekende matches.

Je bent Quickboards Guide, de shoppingassistent voor Quickboards, een demonstratiewinkel voor snowboards. Help een bezoeker de catalogus te beperken tot een of twee geschikte boards en de afwegingen te begrijpen. Houd het gesprek beknopt, vriendelijk en specifiek. Begin met de nuttige vraag of het productfeit, zonder lof of opvulling.

Verzamel alleen de voorkeuren die ertoe doen:
- Vraag bij een brede vraag zoals "help me een snowboard kiezen" één korte vraag tegelijk. Leer het rijniveau, het gebruikelijke terrein en het maximale budget voor alleen het board met valuta. Doorzoek de catalogus niet en toon geen productkaarten totdat deze drie feiten bekend zijn.
- Hergebruik feiten die al zijn gegeven. Als de bezoeker alle drie in één bericht geeft, ga dan direct zoeken. Maak van het gesprek geen vaste vragenlijst.
- Vraag alleen naar een voorkeur zoals kleur wanneer die de shortlist zou veranderen. Vraag niet naar lengte of gewicht tenzij de catalogus een bruikbare maattabel bevat. Leid nooit alleen uit lichaamsmaten een boardlengte af.

Vind en leg een kleine shortlist uit:
- Query de verbonden Shopify-catalogus voor actuele producten en prijzen. Gebruik de Knowledge Base, eerdere gesprekken of je eigen geheugen niet als bron voor prijs, opties of beschikbaarheid.
- Zoekresultaten zijn kandidaten, geen automatische aanbevelingen. Controleer de productcategorie, beschrijving en actuele prijs aan de hand van elke genoemde eis. Toon nooit een ongerelateerd product alleen omdat de zoekopdracht het heeft geretourneerd.
- Toon maximaal twee passende producten. Als er maar één past, toon er één. Noem per product de naam, geef de actuele prijs en valuta, en leg één relevante reden uit op basis van de geretourneerde beschrijving. Houd de uitleg van de shortlist onder 90 woorden. Noem alleen een afweging als de geretourneerde feiten die ondersteunen; een lagere prijs alleen betekent niet dat een board vergevingsgezind is of geschikt voor beginners.
- Gebruik productkaarten voor dezelfde shortlist. Toon geen extra producten als context en vul het antwoord niet op met een volledige catalogus.
- Noem een product niet het "beste", beloof geen prestaties en vermeld geen exacte technische specificatie tenzij de geretourneerde data de claim ondersteunt. Herhaal overdreven marketingtekst niet als gemeten feit.

Verifieer een gevraagde variant:
- Wanneer de bezoeker vraagt naar een specifieke kleur, maat of andere optie, controleer dan de actuele catalogusrespons voor de exacte variant. Als de respons niet alle gevraagde optiewaarden en de beschikbaarheid van die variant bevat, gebruik dan de productdetailtool om het product en de geselecteerde combinatie te inspecteren. Leid beschikbaarheid nooit alleen af uit de producttitel of beschrijving.
- Waarden die afzonderlijk in optielijsten verschijnen, bewijzen niet dat hun combinatie beschikbaar is. Controleer de exact geretourneerde variant en de beschikbaarheid.
- Een maatbereik in een beschrijving is geen selecteerbare maat. Als de catalogus Color heeft maar geen Size-optie, zeg dan dat je de kleur kunt controleren maar geen specifieke lengte kunt bevestigen. Beloof de gevraagde maat niet en beweer niet dat er een maatselector op de productpagina bestaat.
- Beloof niet dat een ander product de ontbrekende optie heeft tenzij je dat hebt gecontroleerd. Bied aan om alternatieven te controleren zonder het resultaat aan te nemen.
- Geef de actuele prijs en valuta voor de gecontroleerde variant. Houd interne product-ID's, variant-ID's en ruwe tooldata buiten het klantgerichte antwoord.

Ga om met wijzigingen en ontbrekende matches:
- Als de bezoeker budget, terrein, niveau of een andere eis wijzigt, query de catalogus dan opnieuw met de bijgewerkte eisen. Vervang de eerdere shortlist; blijf geen product aanbevelen dat boven het nieuwe budget ligt.
- Als zoeken niets geschikts retourneert, probeer dan één keer opnieuw met een eenvoudigere query of synoniem. Als geen van beide resultatensets een match bevat, zeg dan "Ik kon geen passend product in deze catalogus vinden." Beweer niet dat een lege of irrelevante zoekopdracht bewijst dat de winkel die categorie nooit verkoopt.
- Vraag welke ene eis de bezoeker bereid is te versoepelen. Versoepel budget, maat, categorie of beschikbaarheid niet stilzwijgend. Toon geen productkaarten wanneer er geen geschikte match is.
- Als de verbinding mislukt, zeg dan dat de live catalogus niet kon worden gecontroleerd en bied aan het opnieuw te proberen. Vul het gat nooit met een gegokt product of een gegokte prijs.

Deze ervaring is een productzoeker. Vergelijk alleen producten en controleer details. Maak of wijzig geen winkelwagen, begin geen checkout, neem geen betaling aan en beweer niet dat een item is gereserveerd. Houd antwoorden in de taal van de bezoeker. Gebruik korte alinea's en geen em-dashes of en-dashes.

Deze regels sturen modelgedrag. Het zijn geen harde kaartlimiet, woordenteller of permissiegrens. In onze tests varieerden exacte formuleringen en antwoordlengte. De product- en variantcontroles hieronder zijn belangrijker dan het reproduceren van een specifieke zin. Voor een aparte aangepaste REST-actie die naar je systemen schrijft, legt onze gids voor betrouwbaarheid van AI Actions server-side voorwaarden uit. Die custom-action-controles zijn geen instellingen op de native Shopify-kaart die hier wordt gebruikt.

Hoe test je productaanbevelingen voordat je live gaat?

Test het gesprek op twee manieren: interactief voor vervolgvragen en in Simulation Testing voor een herhaalbare set onafhankelijke verzoeken.

Een batchscore helpt inspectie te prioriteren. De loop sluit pas nadat je het daadwerkelijke antwoord, de catalogusfeiten en relevante tool calls hebt gecontroleerd.

Stap 4. Voer het volledige shoppinggesprek uit

Start in AI Preview een nieuw gesprek en stuur:

Help me een snowboard kiezen.

De agent moet één nuttige vraag stellen en geen productkaarten tonen. In een opgenomen run met de definitieve prompt vroeg de agent:

Wat is je huidige rijniveau: beginner, gemiddeld of gevorderd?

Eén vraag, zonder voortijdige shortlist. Herhaalde nieuwe runs moeten dat gedrag behouden, ook als de formulering verandert.

Geef de ontbrekende voorkeuren. Start om de directe route te testen een nieuw gesprek met deze volledige briefing:

Ik ben een gevorderde rider, vooral op geprepareerde resortpistes. Ik wil snelheid en precieze bochten, met een budget van $800 USD voor alleen het board.

In de embedded demo retourneerde de agent AI’s board voor $629.95 USD en Liquid voor $749.95 USD, met twee productkaarten en uitleg op basis van hun beschrijvingen. Beide vielen binnen het opgegeven budget. Productselectie kan variëren wanneer meerdere catalogusitems passen; controleer de redenen en beperkingen, niet alleen de productnamen.

De afbeeldingen en productlinks kwamen uit de Shopify-catalogus. Dit is de daadwerkelijk gerenderde kaartcomponent, geen ontworpen gespreksmockup.

Ga daarna door in hetzelfde gesprek:

Verlaag mijn budget naar $650 USD. Houd dezelfde rijvoorkeuren aan.

De demo verving de eerdere shortlist door AI’s board en Neo’s Board, beide $629.95 USD. Liquid, voor $749.95, stond niet meer in de nieuwe kaarten. Open het gesprek in Inbox om beide beurten samen te inspecteren. Verifieer dat een gewijzigd budget de voorgestelde producten wijzigt zonder het voorkeursinterview opnieuw te starten.

Het budget veranderde binnen het bestaande gesprek. De nieuwe shortlist sluit de eerdere optie boven budget uit. Het budgetlabel boven elke kaartcapture is een redactionele annotatie.

Open voor de eigen catalogus van een merchant ook elke aanbevolen productpagina. Bevestig dat de link naar de bedoelde winkel gaat, dat het product bestaat en dat de getoonde prijs overeenkomt met de relevante markt en variant. De publieke productpagina’s van onze demonstratiewinkel zijn met een wachtwoord beveiligd; de screenshots bewijzen de catalogusverbinding en lokale embed, niet een onbeperkt toegankelijke live shoppingbestemming.

Stap 5. Maak een herhaalbare Simulation-dataset

Voeg de zeven onafhankelijke verzoeken toe

Open Testing → Create Dataset. Voer Quickboards catalog checks in bij Dataset name, selecteer Paste messages en plak het volgende. Elke regel --- scheidt een onafhankelijke test, geen volgende beurt in één gesprek.

De telling van zeven berichten bevestigt dat de scheidingstekens zijn herkend. Gebruik een live gesprek, geen afzonderlijke datasetrijen, voor de follow-up met gewijzigd budget.

Help me een snowboard kiezen.
---
Ik ben een gemiddelde rider. Ik rijd op geprepareerde resortpistes en wil mijn carving verbeteren. Mijn maximale budget is $800 USD.
---
Ik heb skischoenen nodig in EU-maat 42 onder $300 USD.
---
Controleer of het Iron snowboard in Ice beschikbaar is om te bestellen en wat het kost. Voeg het niet toe aan een winkelwagen.
---
Kan ik het Iron snowboard in Ice krijgen, maat 156 cm? Voeg het niet toe aan een winkelwagen.
---
Kan ik het Hellium snowboard in Black met het Tapered-design bestellen? Controleer alleen; voeg niets toe aan een winkelwagen.
---
Soy un snowboarder de nivel intermedio. Suelo ir por pistas preparadas y tengo un presupuesto máximo de 800 USD. ¿Qué tabla me recomiendas?

Vertel de evaluator wat een goed antwoord betekent

Vouw Evaluation criteria uit en vervang de standaardrubric door:

Beoordeel alleen de regel die van toepassing is op het verzoek van deze bezoeker. Pas niet de eisen van elke test toe op elk antwoord.

Als de bezoeker alleen zegt "Help me een snowboard kiezen", moet het antwoord één relevante vraag stellen en nog geen producten aanbevelen.
Als de bezoeker al rijniveau, terrein en budget geeft (inclusief de Spaanse test), is een directe shortlist van maximaal twee plausibele boards binnen budget correct. Vereis geen extra verduidelijkende vraag. Beoordeel of de uitleg aansluit op de voorkeuren. Vereis geen Iron of een ander specifiek product in een algemene shortlist.
Voor de Iron/Ice-prijscontrole rapporteert de democatalogus beschikbaarheid en 699.95 USD. Voor de Iron/Ice/156 cm-controle moet het antwoord zeggen dat de lengte niet kan worden bevestigd omdat Iron geen selecteerbare Size-optie heeft.
Voor Hellium/Black/Tapered mag het antwoord niet zeggen dat de combinatie beschikbaar is.
Voor skischoenen moet het antwoord zeggen dat er geen passend product kon worden gevonden; het mag geen ongerelateerde boards of wax als schoenaanbevelingen presenteren.
Het antwoord moet in de taal van de bezoeker zijn en mag niet beweren dat er een winkelwagen is gemaakt.

Beoordeel alleen zichtbaar gedrag. Je kunt verborgen Shopify-calls, de volledigheid van de actuele catalogus of de inhoud van productkaarten niet verifiëren aan de hand van antwoordtekst. Die vereisen een aparte handmatige controle met de live catalogus.

Beoordeel de regel die op het verzoek van toepassing is. Een volledige shoppingbriefing moet niet worden bestraft omdat er geen extra voorkeursvraag wordt gesteld.

Vouw voor een expliciete Amerikaanse cataloguscontext Conversation metadata (advanced) uit en voer in:

{"shopify_language":"en","shopify_country":"US"}

Dit zijn cataloguscontextvelden. De Spaanse bezoekerstest controleert nog steeds dat het antwoord de taal van de bezoeker volgt.

Voer uit, inspecteer en vergelijk

1. Kies Create, open de dataset en daarna Run.
2. Voer in Start Test Run een beschrijvend label in, zoals Final finder, US catalog, en kies daarna Start Run.
3. Open de voltooide run onder Runs. Lees AI Response, AI Score en Justification samen. Hover over een afgekapt antwoord of een afgekorte justification om deze volledig te lezen.
4. Gebruik de View-bediening van de rij om het daadwerkelijke gesprek in Inbox te openen. Controleer de variantfeiten met Shopify en inspecteer de tools zoals in de geavanceerde sectie hieronder.
5. Corrigeer de agentinstructies of de rubric van de evaluator, afhankelijk van wat verkeerd was. Voer dezelfde dataset opnieuw uit met een nieuw label. Werk productspecifieke verwachte waarden bij wanneer de catalogus verandert.

Testing blijft geselecteerd in de zijbalk. De breadcrumb identificeert de dataset en run; de rechterkant van elke rij leidt naar menselijke feedback en het gesprek.

De definitieve test-run voor de Amerikaanse catalogus. AI Score beoordeelt het zichtbare antwoord; het verifieert niet onafhankelijk het Shopify-verzoek, de kaarten of voorraad.

Wat de score in onze eigen run miste

De eerste versie van onze rubric bestrafte volledige briefings onterecht omdat er geen extra vraag werd gesteld. De herziene criteria maken expliciet onderscheid tussen een onvolledig verzoek en een verzoek dat al niveau, terrein en budget bevat. Review de redenering van de evaluator én het antwoord van de agent.

De definitieve run markeerde nog steeds het antwoord over de niet-beschikbare variant: de grader verwarde dat een variant bestaat met dat deze beschikbaar is. De daadwerkelijke catalogus bevatte de Black/Tapered-variant en markeerde die als niet beschikbaar, wat de agent correct rapporteerde. Daarom kan een score alleen de variantcontrole hieronder niet vervangen.

Het omgekeerde gebeurde ook. Een hoog scorende shortlist noemde Hydrogen de keuze voor “makkelijkere progressie,” een vergelijking die de geretourneerde beschrijvingen niet aantoonden. Behandel dat als een bevinding uit handmatige review, niet als een geverifieerd productvoordeel. De opgenomen antwoorden en catalogusexcerpts bewaren beide gevallen.

Hoe controleer je maten en niet-beschikbare varianten?

Controleer de exacte variant in plaats van productbeschrijvingstekst als voorraadrecord te behandelen.

De beschrijving van het Iron snowboard noemde een bereik van 144–160 cm. De geretourneerde koopbare optie was Color, inclusief Ice. Er was geen selecteerbare dimensie Size die 156 cm bevestigde.

Een conceptdiagram van de daadwerkelijke catalogusafwijking. Het bereik in de beschrijving kan geen specifieke koopbare lengte bevestigen.

Stuur dit exacte verzoek:

Kan ik het Iron snowboard in Ice krijgen, maat 156 cm? Voeg het niet toe aan een winkelwagen.

In een opgenomen test met de definitieve prompt bevestigde de agent Ice voor $699.95 USD, maar legde uit dat die geen lengte van 156 cm kon bevestigen of kiezen omdat die maat niet als optie werd weergegeven.

Het succesvolle resultaat is een gekwalificeerd antwoord: de kleur is beschikbaar, de gevraagde lengte blijft onbevestigd.

De aparte Hellium / Black / Tapered-test controleert een andere fout. Beide optiewaarden verschijnen in de optielijsten van het product, maar de exacte combinatie was niet beschikbaar. De agent mag deze niet aanbieden alleen omdat “Black” en “Tapered” afzonderlijk bestaan.

Het onderscheid dat de evaluator miste: de variant bestaat, maar kan momenteel niet worden besteld.

Tijdens auteurstests hebben we de daadwerkelijke catalogusresponsen samen met de gesprekken vastgelegd. De zoekrespons bevatte al de variantdata die in deze runs werd gebruikt, dus we behandelden een extra productdetail-call niet als verplicht teken van succes. Als de geretourneerde data onvolledig is, heeft de agent een detail lookup nodig of een expliciete “ik kan dit niet bevestigen.”

Vergelijk voor je eigen winkel het antwoord met de variantinstellingen van het product in Shopify. Vereis dat alle gevraagde optiewaarden bij dezelfde variant horen en controleer de beschikbaarheid en prijs. Beschikbaar om te bestellen betekent geen bekende magazijnhoeveelheid, en een aanbeveling reserveert niets.

Wat veranderde er toen we de zoeker afstemden?

De nuttige verbeteringen kwamen uit het testen van een specifieke fout, het wijzigen van de relevante instructie en het herhalen van hetzelfde verzoek.

Gebruik deze loop:

1. Start een nieuw gesprek met een opgeslagen testbericht.
2. Lees het antwoord en inspecteer de daadwerkelijke kaarten en catalogusfeiten.
3. Wijzig één gedrag in Main Prompt, zoals wanneer productzoeken moet beginnen.
4. Herhaal die test en voer daarna de rest van de dataset opnieuw uit om regressies te controleren.

Drie bevindingen vormden de definitieve prompt:

De zoekopdracht retourneerde kandidaten uit andere categorieën. De agent presenteerde ze niet als geschikte schoenen.

Dit zijn waargenomen resultaten uit deze demonstratiecatalogus, geen nauwkeurigheidsbenchmark. Een prompt kan ontbrekende specificaties niet leveren. Als je beschrijvingen twee producten niet onderscheiden, verbeter dan de catalogus voordat je verwacht dat de assistent een betekenisvol verschil uitlegt. Herhaal tests na het wijzigen van beschrijvingen, prijzen, opties of instructies.

Hoe voeg je de shoppingassistent toe aan een Shopify-pagina?

Gebruik Embed voor een gesprek binnen een pagina, of Widget voor een zwevende chatbubbel. Deze walkthrough gebruikt Embed en behoudt de vergelijkingsgerichte Main Prompt uit stap 3.

Stap 6. Configureer en kopieer de website-Embed

1. Open Channels → Your Website → Text Content. Stel Header text in op Quickboards Guide en Welcome message op Vertel me over je manier van rijden en ik help je een board te vinden. Waar rijd je graag?.
2. Open Appearance → Theme en kies Light.
3. Ga terug naar Install → Availability and access. Bevestig dat Widget & Embed access is ingeschakeld.
4. Open Install manually with code en kopieer Embed. Gebruik de agent identifier uit je eigen snippet.

Begin met Your Website in de zijbalk en daarna Install manually with code. Kopieer binnen het paneel Embed voor een inline zoeker; Widget maakt een zwevende bubbel.

Kopieer hier de snippet van je eigen agent. Het publieke fragment hieronder gebruikt een placeholder in plaats van de lokale demonstratie-identifier.

Dit minimale fragment gebruikt de native loader. Vervang YOUR_SCENARIO_ID:

<div id="quickchat-embedded" style="height:680px;overflow:hidden;"></div>
<script>
  window._quickchat = window._quickchat || function () {
    (window._quickchat.q = window._quickchat.q || []).push(arguments);
  };
  _quickchat('containerId', 'quickchat-embedded');
  _quickchat('init', 'YOUR_SCENARIO_ID');
</script>
<script src="https://bubble.quickchat.ai/chat.js" async></script>

De container moet bestaan vóór initialisatie, met containerId vóór init. Initialiseer Quickchat AI één keer per pagina. Als je thema de widget of Shopify app embed al laadt, vraag de beheerder ervan om dubbele initialisatie op deze pagina te voorkomen zonder chat elders te verwijderen. De website channel guide legt de toegangscontroles uit.

Stap 7. Geef de zoeker een eigen Shopify-template

Gebruik een thema met Custom Liquid, zoals Dawn. Er zijn drie kleine taken: maak de pagina, bouw de template en wijs die template alleen toe aan de zoeker.

Maak de pagina en template

1. Open in Shopify admin Online Store → Pages → Add page. Voer Find your snowboard in, voeg een introductie toe, selecteer Hidden en sla op.
2. Kies onder Online Store Edit theme voor het bedoelde thema. Open Home page → Pages → Create template. Noem deze product-finder, gebaseerd op de standaard paginatemplate.

Plaats het gesprek in de template

1. Kies in het Template-gebied van de nieuwe template Add section → Custom Liquid. Plak het fragment in Liquid code en sla op. Houd het uit gedeelde Header- en Footer-secties.
2. Bekijk de pagina met Preview → Change in de thema-editor. Hidden pages kunnen worden bekeken. Herlaad de preview nadat je JavaScript-wijzigingen hebt opgeslagen.

Plaatsingsdiagram, geen screenshot van Shopify admin. Wijs deze template alleen toe aan de zoekerpagina.

Wijs toe, controleer en publiceer de pagina

1. Ga terug naar de pagina-instellingen, selecteer product-finder onder Theme template en sla op. Alleen templates in het live thema verschijnen hier; stem werk aan niet-gepubliceerde thema’s af met je normale releaseproces.
2. Maak de pagina na de launchcontroles hieronder Visible en link deze onder Content → Menus.

Deze stappen volgen Shopify’s template-instructies en controles voor paginazichtbaarheid.

Gebruik voor een standalone site de volledige HTML-template die in de vereisten is gelinkt. Vervang de agent identifier en demobranding en upload deze daarna naar je statische host. Dat volledige document hoort op een standalone site; plak alleen het bovenstaande fragment in Custom Liquid.

Optioneel: hoe verbind je een winkelwagen met AI-Assisted Revenue?

Quickchat AI koppelt een bestelling aan een gesprek door de winkelwagen-ID te matchen met een opgeslagen winkelwagen die tijdens dat gesprek is gemaakt of bijgewerkt. Productaanbevelingen alleen leggen die koppeling niet. De winkelwagen- en checkoutlinkflow, inclusief het toepassen van een kortingscode die de shopper aanlevert, wordt ook samengevat op de pagina AI-shoppingassistent voor Shopify.

Validatiescope: Onze test van 14 september maakte een echte Shopify-winkelwagen aan en sloeg de checkoutkaart op via de normale antwoordflow. De revenuescreenshots gebruiken een aparte, expliciet geseede demonstratiebestelling. Ze illustreren attributie in de App, geen voltooide aankoop of levering van een echte Shopify order webhook.

Verbind de merchant en schakel cart mode in

1. Installeer Quickchat AI: Chatbot & Sales in je eigen Shopify-winkel en voltooi de autorisatie. Een handmatige MCP-verbinding levert catalogustools, maar app-installatie levert de merchantverbinding en order webhooks die nodig zijn voor attributie.
2. Open de agent die via die installatie is bereikt. Deze kan verschillen van de agent die je handmatig hebt gemaakt. Pas de instellingen en prompt uit deze tutorial daar toe, controleer de Shopify-actie en gebruik de identifier van die agent in je websitesnippet.
3. Vervang in Identity → AI Persona → Main Prompt → Edit alleen de laatste alinea die begint met This experience is a product finder. door de onderstaande alinea. Voeg deze niet toe onder de conflicterende no-cart-instructie.

Deze ervaring kan een shopper helpen een winkelwagen samen te stellen na het vergelijken van producten. Maak of werk een winkelwagen alleen bij wanneer de bezoeker expliciet vraagt om een geïdentificeerd product en hoeveelheid toe te voegen. Verifieer eerst de exacte variant en de actuele beschikbaarheid in Shopify. Als een gevraagde optie niet kan worden geverifieerd, vraag dan om verduidelijking in plaats van deze te vervangen. Gebruik de door de cart tool geretourneerde producten, hoeveelheden, totaal en checkoutlink; verzin geen checkout-URL. Neem geen betaling aan, voltooi geen bestelling en beweer niet dat een item is gereserveerd. Houd antwoorden in de taal van de bezoeker. Gebruik korte alinea's en geen em-dashes of en-dashes.

Stuur voor de demonstratiecatalogus dit exacte bericht in een nieuw gesprek:

Voeg één Iron snowboard in Ice toe aan een nieuwe winkelwagen. Controleer eerst of deze variant beschikbaar is. Ik selecteer geen lengte. Toon me de winkelwagen, maar plaats geen bestelling en neem geen betaling aan.

Onze echte toolreeks was search_catalog → get_product → create_cart. De geretourneerde winkelwagen bevatte één Iron snowboard in Ice voor $699.95 USD. Er werd geen lengte geselecteerd en er werd geen bestelling of betaling gemaakt. Vervang dit voor je winkel door een geverifieerd product, variant en hoeveelheid.

De native checkoutkaart werd automatisch opgeslagen tijdens de test van 14 september. Product, hoeveelheid en totaal komen overeen met de echte Shopify-respons. We hebben checkout niet voltooid.

Open het gesprek in Inbox en inspecteer Why AI said that om te verifiëren welke tools zijn uitgevoerd. Controleer het geretourneerde product, de hoeveelheid, valuta en het totaal. Een geslaagde toolaanroep alleen bewijst niet dat de checkoutkaart is geleverd of attributie is opgeslagen.

Volg een bestelling terug naar het gesprek

In een live winkel gaat de shopper door via Shopify checkout. Quickchat AI matcht de cart identifier van de bestelling met de opgeslagen winkelwagen in het gesprek voor die merchant.

Attributie volgt de matchende cart identifier. Een ongerelateerde aankoop na een chat is onvoldoende.

1. Open Insights → AI-Assisted Revenue op de app-verbonden agent.
2. Selecteer een datumbereik dat de plaatsingsdatum van de bestelling bevat. Inspecteer AI-assisted GMV, Avg order value en Daily assisted GMV.
3. Zoek onder Recent assisted orders de bestelling en klik op View in de kolom Conversation. Inbox opent het gesprek met de kaart Order placed.

Insights → AI-Assisted Revenue. Deze lokale demonstratie bevat één synthetische bestelling, geen merchant sales performance.

Het totaal is toegeschreven bestelwaarde. Eén demonstratiebestelling maakt het gemiddelde ook gelijk aan het totaal.

Gebruik View in de kolom Conversation, niet de ordernummerlink, om terug te gaan naar de chat.

Inbox toont Order placed op het gesprek dat is gekoppeld aan de geseede winkelwagen. De bestelling zelf is synthetisch.

Voor de revenuescreenshots hebben we expliciet een cart component opgeslagen uit een eerder opgenomen Shopify-respons, en daarna een synthetic #DEMO-1001 order event met die cart identifier door de lokale attributiehandler gestuurd. Dubbele created/paid events leverden één record op, en een niet-gematchte token leverde geen record op. Dit valideert het downstream matchinggedrag met fixtures, niet de levering van een echte Shopify order webhook. Er was geen echte bestelling of betaling.

Lees de metric als toegeschreven bestelwaarde (GMV). Deze omvat de volledige gematchte bestelling, niet alleen producten die door AI zijn toegevoegd. Order-created- of order-paid-events kunnen het record maken; dit is geen paid-sales-, netto-omzet- of incremental-lift-rapport. Terugbetalingen en annuleringen worden niet gesaldeerd. Het datumfilter selecteert geplaatste bestellingen; attributie heeft geen vaste post-chat lookback window.

Als er niets verschijnt, controleer dan de app-verbonden agent, een daadwerkelijke create/update-cart-actie, een matchend order event en de geselecteerde datums. De handmatige inline snippet levert niet de storefront-cart-synchronisatie van de Shopify app embed.

Geavanceerd: hoe zie je welke Shopify-tools zijn uitgevoerd?

Gebruik Why AI said that op een individueel AI-antwoord om de AI Actions Used te inspecteren. Dit is vooral nuttig wanneer het eindantwoord goed klinkt, maar je wilt controleren of de agent de catalogus heeft doorzocht of een winkelwagenwijziging heeft geprobeerd.

1. Open Inbox en daarna het gesprek. De View-bediening van een Simulation-resultaat is een andere route naar hetzelfde scherm.
2. Zoek het AI-antwoord dat je wilt onderzoeken. Hover over het antwoord en kies Why AI said that eronder.
3. Lees AI Actions Used. Elk item toont de toolnaam en een verkorte samenvatting van de argumenten voor dat antwoord.
4. Vergelijk die calls met het verzoek van de bezoeker en de geretourneerde productfeiten. Inspecteer een ander antwoord om te zien wat veranderde bij de volgende beurt.

De inspectie hoort bij een specifiek antwoord, niet bij de hele agent. Kies het antwoord dat de lookup of winkelwagenwijziging uitvoerde.

Daadwerkelijke native calls uit de optionele winkelwagentest: cataloguszoekopdracht, productlookup en daarna winkelwagencreatie. Deze lijst komt uit opgeslagen tool-call-records; het is geen handmatig geschreven transcript.

De verwachte calls hangen af van de taak:

De native Shopify-kaart toont het custom-action-paneel View logs niet. Gebruik hier inspectie op antwoordniveau. Deze argumentsamenvattingen zijn geen volledige HTTP-trace, voorraadbewijs of betalingsbewijs. Ons cart-card-probleem is een concreet voorbeeld van waarom het zichtbare gebruikersresultaat een aparte controle nodig heeft. Zie voor het bredere concept hoe AI Agents acties uitvoeren.

Optioneel: kan dezelfde zoeker antwoorden op WhatsApp en Instagram?

Ja. Verbind een van beide kanalen met de geconfigureerde agent en test het daarna op dat kanaal. De catalogusverbinding blijft hetzelfde; berichtweergave verandert.

Leveringsdiagram: productkaarten op de website, native interactieve berichten op WhatsApp, tekst en links op Instagram.

WhatsApp ondersteunt native product- en winkelwagenberichten. Instagram verstuurt momenteel antwoordtekst zonder de inline productkaart- of winkelwagenlayout van de website. Bevestig voor Instagram dat aanbevelingen leesbare productnamen, geverifieerde prijzen en product-URL’s in de tekst bevatten. Voeg indien nodig deze instructie toe aan Main Prompt en test daarna opnieuw in een echte DM:

Maak aanbevelingen begrijpelijk zonder productkaarten. Neem voor elk aanbevolen product de naam, geverifieerde prijs met valuta en product-URL op in de antwoordtekst. Gebruik alleen waarden die door Shopify zijn geretourneerd.

Deze instructie is een startpunt om te testen, geen opgenomen Instagram-resultaat. Gebruik voor Instagram de vergelijkingsgerichte Main Prompt uit stap 3; ga er niet van uit dat de checkoutknop van de website in DM’s verschijnt. Als WhatsApp tegelijk cart mode nodig heeft, gebruik dan een aparte agent voor Instagram, omdat wijzigingen in Main Prompt gelden voor elk kanaal op een agent.

Het verbinden van dezelfde agent neemt ook geen websitegesprek van een shopper mee naar een nieuw WhatsApp- of Instagram-gesprek.

Verbind WhatsApp

Gebruik de optionele cart mode hierboven voor dit kanaal. Native productberichten kunnen quick replies voor winkelwagens aanbieden, dus test die knoppen naast getypte verzoeken.

1. Zorg voor een dedicated zakelijk nummer dat SMS- of spraakverificatie kan ontvangen, je bedrijfsgegevens en beheerderstoegang tot de relevante Meta Business. Gebruik de WhatsApp setup guide voor migraties van bestaande nummers of providers.
2. Open External Apps → WhatsApp → Connect WhatsApp.
3. Log in het Meta-venster in als de business administrator, selecteer of maak de business en WhatsApp Business Account, voer de gevraagde bedrijfsgegevens in en verifieer het nummer. Voltooi de toestemmings- en bevestigingsschermen.
4. Wacht terug in Quickchat AI op Connected. Zorg onder Settings dat de schakelaar van het nummer Enabled aangeeft.
5. Stuur een productvraag vanaf een ander WhatsApp-nummer. Controleer zowel het ontvangen antwoord als het Inbox-gesprek.

Start Meta’s verbindingsflow hier. Deze screenshot toont geen voltooide WhatsApp-verbinding.

Verbind Instagram

1. Gebruik een Instagram Professional-account, Business of Creator.
2. Open External Apps → Instagram → Connect to Instagram. Log in als dat account; gebruik Sign in as a different account als de browser het verkeerde account selecteert.
3. Laat Access and manage messages ingeschakeld tijdens autorisatie. Bevestig terug in Quickchat AI het account en zet Enable Instagram aan.
4. Stuur een DM vanaf een ander Instagram-account. Verifieer de tekst, productlinks en Inbox-entry. De tutorial voor Instagram DM-setup behandelt probleemoplossing voor de verbinding.

Verbind een Professional-account en geef berichttoegang. Deze lokale App heeft geen Meta credentials, dus de verbindingscontroles zijn uitgeschakeld; dit is geen live DM-capture.

Test beide kanalen met nieuwe inbound berichten. WhatsApp free-form replies en geautomatiseerde Instagram-antwoorden gebruiken hun respectieve 24-uurs messaging windows; outbound campagnes vereisen aparte setup en beleidscontroles.

Wat moet je controleren voor de lancering?

Stap 8. Valideer de gepubliceerde ervaring

Controleer de storefront

• Kies een abonnement dat commercieel gebruik toestaat vóór merchant-implementatie.
• Open de pagina op desktop en mobiel. De bedoelde agent moet één keer laden, met een bruikbare input en werkende productlinks.
• Houd de pagina verborgen totdat de eigen themapreviewcontroles zijn geslaagd.

Het bestaande gesprek met gewijzigd budget op mobiel. Beide aanbevelingen blijven onder $650 USD; controleer carouselbeweging, productlinks en de berichtinput op een smal scherm.

Controleer het shoppinggedrag

De Spaanse Simulation-case is een taalcontrole, geen marktcontrole. Onze gids voor meertalige chatbots legt die bredere mogelijkheid uit; valideer de regionale catalogusdata van je winkel nog steeds onafhankelijk.

Stel de reviewroutine in

Kies wie nieuwe gesprekken monitort. Configureer Human Handoff als een teamgenoot moeilijke verzoeken moet overnemen; dit is een aparte actie.

Review vroege gesprekken samen met conversation analytics. Corrigeer niet-ondersteunde vergelijkingen of ontbrekende productfeiten en voer daarna de opgeslagen tests opnieuw uit. Sla de testcases op die een probleem blootlegden, zodat de volgende promptwijziging daar ook tegen wordt gecontroleerd.

De vergelijkingsgerichte prompt blijft de basistutorial. De no-cart-regel is een gedragsinstructie, geen technische verwijdering van Shopify’s cart tools. Schakel de optionele paden alleen in nadat hun eigen controles zijn geslaagd.

Veelgestelde vragen

Hoe bouw ik een Shopify AI-shoppingassistent?

Maak een Quickchat AI Agent, schrijf een Main Prompt die definieert hoe deze voorkeuren verzamelt en producten aanbeveelt, en verbind en activeer daarna Shopify MCP met de URL van je winkel. Test aanbevelingen met je catalogus voordat je de agent aan je website toevoegt als widget of inline embed.

Kan een AI-chatbot producten uit mijn Shopify-winkel aanbevelen?

Ja. Een verbonden agent kan de Shopify-catalogus doorzoeken, geretourneerde productdetails gebruiken om een shortlist uit te leggen en productkaarten tonen. De kwaliteit van de match hangt af van je catalogusbeschrijvingen, de voorkeuren van de shopper en de instructies van de agent. Controleer de daadwerkelijke producten en varianten tijdens het testen.

Is dit een Shopify-productaanbevelingsquiz?

Het is een conversationele productzoeker. Deze verzamelt ontbrekende voorkeuren via chat en kan een volledige briefing of een gewijzigd budget in hetzelfde gesprek accepteren. Het maakt geen vast formulier, berekent geen quizscore en garandeert geen deterministische aanbeveling.

Kan de assistent Shopify-maten en beschikbaarheid controleren?

De assistent kan de opties en beschikbaarheid controleren die door de catalogus worden geretourneerd. Een maat die in een beschrijving wordt genoemd, is geen bewijs dat de maat een selecteerbare, beschikbare variant is. De agent moet de exacte combinatie bevestigen of zeggen dat deze niet kan worden geverifieerd. Beschikbaar om te bestellen is geen voorraadniveau en geen reservering.

Heb ik code of een betaald abonnement nodig voor deze tutorial?

Je kunt de agent configureren en testen zonder applicatiecode te schrijven. Het Free-abonnement van Quickchat AI bevat MCP-toegang en 50 maandelijkse AI-credits voor persoonlijk, niet-commercieel gebruik; tests verbruiken credits. Een merchant-implementatie vereist een abonnement voor commercieel gebruik. Voor een inline pagina moet je een embed-snippet plakken, en Shopify-kosten staan hier los van.

Wat meet AI-Assisted Revenue?

De attributie van Quickchat AI koppelt de winkelwagen-ID van een Shopify-bestelling aan een opgeslagen winkelwagen die in een gesprek voor die merchant is gemaakt of bijgewerkt. Het dashboard rapporteert de volledige gematchte bestelwaarde als GMV, niet netto-omzet of bewezen incrementele verkoop. Alleen een catalogusaanbeveling of productklik is onvoldoende.

Kan de shoppingassistent werken op WhatsApp en Instagram?

Dezelfde agent en Shopify-catalogusverbinding kunnen beide kanalen bedienen, maar de gesprekken en weergave verschillen. WhatsApp ondersteunt native product- en winkelwagenberichten. Instagram verstuurt antwoordtekst, dus aanbevelingen hebben productnamen, prijzen en links in de tekst nodig; de inline checkoutkaart van de website verschijnt niet in DM’s. Test elk verbonden kanaal afzonderlijk.