Documentatie

Shopify

Installeer de Agentkit-widget in een Shopify-thema met de volledige gegenereerde code.

Voeg de Agentkit-widget toe aan je Shopify-winkel door de volledige gegenereerde insluitcode in theme.liquid te plaatsen.

Open in Agentkit Kanalen → Website-embed → Chatwidget, schakel het kanaal in en kopieer de volledige code. Die bevat twee scripttags: een inline bootstrap en een asynchrone loader. Houd beide tags bij elkaar. Shopify raadt aan je thema te dupliceren voordat je de code wijzigt.

Methode 1: theme.liquid bewerken

Voeg de widget site-breed toe door je gepubliceerde thema te bewerken:

  1. Ga in de Shopify-admin naar Online Store → Themes.
  2. Klik op de rij van je live thema op het menu ... (Actions) → Edit code.
  3. Open theme.liquid in de map Layout aan de linkerkant.
  4. Scroll naar beneden en plak je embedcode net vóór de afsluitende </body>-tag.
  5. Klik op Save.

Plak de gekopieerde code ongewijzigd. Controleer na het opslaan of beide <script>-tags in de gerenderde broncode van de winkel staan.

De widget verschijnt op elke pagina van je storefront — product, collectie, winkelwagen, homepage.

Methode 2: eerst dupliceren, dan bewerken (aanbevolen)

Wil je een veilige terugvaloptie:

  1. Online Store → Themes.
  2. Klik op je live thema op het menu ... (drie stipjes) → Duplicate. Onderaan de themalijst verschijnt een kopie.
  3. Bewerk theme.liquid van de kopie zoals hierboven.
  4. Klik op het menu ... bij de kopie → Preview om te testen.
  5. Klik, als je tevreden bent, op het menu ... → Publish om het live te zetten.

Plaatsing op één pagina

Wil je de widget op één pagina tonen, laat dan een themaontwikkelaar beide gegenereerde tags tot een paginasjabloon beperken. Controleer of ze alleen op die pagina staan. De rich-texteditor van Shopify Pages is voor deze widget geen geverifieerde installatiemethode.

Vereisten

  • Je hebt toegang tot de themacode nodig. Een betaald proef-thema kan pas na aankoop worden bewerkt. Je rol heeft de machtigingen Themes en Edit code nodig. Zie Shopify's handleiding voor themacode.
  • Laat het Agentkit-kanaal Chatwidget ingeschakeld tijdens het testen van de openbare winkel.
  • Als domeinbeperkingen actief zijn, sta dan de exacte origin van de themavoorvertoning en die van de live winkel toe. Verwijder de tijdelijke preview-origin na het testen.

Na het publiceren

Als de widget niet in de openbare winkel verschijnt:

  1. Ververs de pagina hard (⌘+Shift+R op Mac, Ctrl+F5 op Windows).
  2. Open de site in een incognitovenster.
  3. Controleer de browserconsole op foutmeldingen.

Problemen oplossen

Widget verschijnt niet.

  • Controleer of je het live thema hebt bewerkt (of de kopie hebt gepubliceerd).
  • Controleer of beide gegenereerde scripttags vóór </body> in de gerenderde winkelbroncode staan.
  • Controleer of de domeinbeperkingen van Agentkit het domein van je winkel toestaan.

Widget overlapt de chat of winkelwagenlade van Shopify.

  • Pas de widgetpositie aan in de Ontwerp-instellingen van je agent.

Widget verschijnt in de editor, maar niet in de live winkel.

  • Zorg dat je na het plakken op Save hebt geklikt — de code-editor slaat niet automatisch op.

Testen

  1. Open je storefront in een incognitovenster.
  2. Zoek naar de chatbubbel in de hoek.
  3. Klik om te openen en verstuur een testbericht.
  4. Controleer of beide gegenereerde scripttags in de broncode van de pagina staan.

Verbind een winkel voor bestelopzoekingen en productzoekopdrachten

De widget insluiten en je winkel verbinden zijn twee aparte dingen. De embedcode hierboven plaatst de chatwidget op je storefront. Een aparte Shopify-verbinding — gemaakt vanuit het tabblad Acties → Integrations van je agent — laat de agent bovendien je live catalogus doorzoeken en de status van een bestelling opzoeken tijdens het gesprek.

Je kunt elk van beide los gebruiken. Gebruik alleen de embed als de agent uitsluitend vanuit je trainingsinhoud moet antwoorden, en voeg de winkelverbinding toe wanneer je live product- en bestelgegevens wilt.

Het verbinden van de winkel levert alleen de inloggegevens, maar schakelt op zichzelf niets in: voeg daarna onder het tabblad Acties van je agent de acties Producten zoeken en Bestelstatus opvragen toe en schakel elke actie in die je de agent wilt laten gebruiken.

Stel Shopify-acties in →

Volgende stappen