Hoe installeer je een agent op Shopify
Waar je de code in het Shopify-thema plakt, hoe de agent de winkelcatalogus leest, wat te doen met de winkelwagen en betaling, en hoe de installatie te controleren.
Shopify heeft al een machineleesbare catalogus. Daardoor verzamelt de agent productinformatie nauwkeuriger dan waar dan ook: prijzen, varianten, voorraad en foto's komen rechtstreeks uit de winkel.
Stap 1. Voeg de code toe aan het thema#
- Open in de Shopify-admin Online Store → Themes.
- Klik bij het actieve thema op … → Code bewerken.
- Zoek in de lijst met bestanden
layout/theme.liquid. - Plak de coderegel uit het dashboard direct vóór de sluitende tag
</body>. - Opslaan.
Alternatief zonder het thema aan te passen: Online Store → Voorkeuren → Aangepaste code of een willekeurige app voor het invoegen van scripts. Het resultaat is hetzelfde.
<!-- Commerce Agents -->
`<script src="https://comag.vibevox.pro/widget.js" data-slug="uw-slug" async></script>`
</body>
</html>De exacte regel haalt u uit het dashboard via de knop “Code kopiëren”: hierin is het adres van uw webshop al ingevuld.
Stap 2. Verzamel de catalogus#
Geef in de instellingen het adres van de winkel op en start de analyse. De Shopify-crawler leest gestructureerde productgegevens: naam, prijs, valuta, voorraad, beschrijving en foto's. Varianten (maten, kleuren) verschijnen als kenmerken op de productkaart.
Een herhaalde analyse werkt prijzen en voorraad bij. Start deze na grote wijzigingen in het assortiment: de agent maakt geen rechtstreekse verbinding met uw database, maar werkt met de verzamelde catalogus.
Stap 3. Laat de betaling over aan de winkel#
Op Shopify hoeft u de betaling in de chat niet in te schakelen. Het juiste proces:
- Geef in de winkelinstellingen de link naar de winkelwagen op — meestal
https://uw-domein/cart. - De agent selecteert een product, toont de productkaart en leidt de koper via een knop naar de Shopify-winkelwagen.
- Afrekenen en betalen verlopen op de gebruikelijke manier, met al uw leverings- en belastingregels.
Om te zien welke gesprekken tot een aankoop leiden, voegt u het aankoop-pixelfragment toe aan de bedankpagina. In Shopify is dit Instellingen → Afrekenen → Pagina met bestelstatus → Aanvullende scripts. Het fragment met de invulling van het ordernummer en het bedrag vindt u in het dashboard, onder “Widget en link”.
Product komt in de winkelwagen, zonder het gesprek te onderbreken#
Hier blinkt Shopify uit ten opzichte van andere platforms. De agent toont productkaarten met foto, prijs en een knop, maar de knop leidt niet alleen naar de pagina — deze plaatst het product direct in de winkelwagen.
Dit werkt als volgt: de productlink in Shopify bevat een variant-ID, de agent stuurt dit via de standaardinterface /cart/add.js naar uw winkelwagen. De pagina wordt niet opnieuw geladen, het gesprek wordt niet onderbroken, de koper ziet een korte bevestiging en blijft kiezen. Het product bevindt zich dan al in de Shopify-winkelwagen — met al uw regels voor kortingen, belastingen en verzending.
Als er geen variant in de link staat, opent de agent de productkaart en voegt de koper het zelf toe. Er gaat niets mis, het is slechts één klik extra.
Wanneer de klant klaar is, leidt de knop “Doorgaan naar afrekenen” naar /cart, waar alles al is verzameld. Daarna volgt de gebruikelijke Shopify-kassa.
En apart over de context: de agent leest de gestructureerde gegevens van de pagina waarop de chat is geopend. De koper bekijkt een specifiek product en vraagt “is dit verkrijgbaar in maat L?” — de agent begrijpt waar het over gaat, zonder door te vragen.
- Open de winkel in incognitomodus, wacht op de chatknop.
- Vraag naar een product op naam — er zou een productkaart met prijs moeten verschijnen.
- Klik op “Doorgaan naar afrekenen” — de Shopify-winkelwagen zou moeten openen.
- Plaats een testbestelling en controleer of de aankoop is geregistreerd onder “Aanvragen”.
Chat in de stijl van de webshop#
Het Shopify-thema bepaalt de sfeer van de hele winkel, en de chat mag hier niet van afwijken. In de widgetinstellingen zijn er drie opties: licht, donker en “zoals bij de bezoeker”, die de apparaatinstellingen van de koper volgt.
Voor winkels met een donker thema stelt u de donkere optie vast in, voor lichte thema's de lichte. De accentkleur van de knoppen blijft in beide gevallen die van u.
Stap 4. Controleren#
Veelvoorkomende problemen#
Widget verdwenen na themawijziging. De code bevindt zich in het themabestand. Een themawijziging of -update wist de aanpassing — voeg de code opnieuw in of gebruik Aangepaste code, die onafhankelijk is van het thema.
Catalogus niet volledig verzameld. De crawler haalt producten van openbare pagina's. Producten die verborgen zijn voor de catalogus en concepten worden niet meegenomen, dit is correct.
Prijzen in de catalogus zijn verouderd. Start de website-analyse opnieuw; deze werkt de prijzen en voorraad van bestaande productkaarten bij.
Widget conflicteert met chat-app. Houd één chat: twee vensters in dezelfde hoek hinderen elkaar en verwarren de koper.
Veelgestelde vragen#
Is een app uit de Shopify App Store nodig#
Nee. De agent wordt aangesloten met één coderegel, het is niet nodig om een app te installeren.
Kan de agent productvarianten tonen#
Ja, varianten verschijnen als kenmerken op de productkaart: maat, kleur, volume. De koper maakt de keuze voor een specifieke variant in de Shopify-winkelwagen.
Hoe om te gaan met meerdere valuta's#
De agent toont prijzen in de catalogusvaluta, die wordt bepaald tijdens het crawlen. De multi-valuta functionaliteit van Shopify werkt verder, aan de kant van de winkelwagen en betaling.
Weet de agent over de voorraad#
De voorraad wordt vastgelegd op het moment van analyse. Voor producten die vaak uitverkocht zijn, start u de analyse vaker of voegt u een regel toe aan de voorwaarden dat de voorraad wordt bevestigd bij het afrekenen.
Beïnvloedt de widget de snelheid van de winkel#
Het script wordt asynchroon geladen en blokkeert de weergave niet. Dit heeft vrijwel geen invloed op de Core Web Vitals-scores.