Så bygger du en AI-shoppingassistent för Shopify

En Shopify AI-shoppingassistent hjälper en besökare att beskriva vad de behöver, söker i din katalog och förklarar en liten uppsättning matchande produkter. I den här guiden bygger du en assistent som frågar om åkpreferenser, jämför snowboards inom en budget och kontrollerar en begärd färg eller storlek innan den gör ett påstående om tillgänglighet.

Exemplet är Quickboards, en fiktiv snowboardbutik. Vi byggde dess agent i en lokalt körd Quickchat AI App, anslöt den till en riktig Shopify-demokatalog och spelade in konversationerna nedan. Produktkorten innehåller faktiska katalogbilder och demopriser. Den alpina illustrationen är en AI-genererad redaktionell illustration, inte en annan produkt till salu.

Du får också lära dig att granska verktygen bakom ett svar, testa assistenten i batcher och valfritt följa en varukorg fram till AI-Assisted Revenue. Attribueringsexemplet använder en tydligt märkt lokal demonstrationsorder, inte en verklig försäljning.

Den färdiga upplevelsen är en dedikerad produktväljarssida med en inline-konversation:

Den lokalt körda demosidan använder den riktiga Quickchat AI Embed och en live Shopify-katalog. Det är inte en skärmbild av ett publicerat Shopify-tema. En närbild av rekommendationerna finns i testavsnittet.

Den viktiga kontrollen kommer efter att anslutningen fungerar. Vår katalog nämnde längder på 144–160 cm i en beskrivning, men exponerade inte ett valbart Size-alternativ. Varianttestet visar hur agenten hanterar den luckan utan att lova en 156 cm-bräda.

Vad ska du bygga, och vad behöver du?

Du ska bygga en konversationsbaserad produktväljare som samlar in tre användbara preferenser, visar högst två rekommendationer och låter kunden förfina valet.

Detta är en specifik implementation av en chatbot för produktrekommendationer. Den stöder en brief som ”medelvan åkare, preparerade pister, högst $800” samt en besökare som behöver hjälp att formulera dessa preferenser. Den kräver inte att varje besökare fyller i samma frågeformulär.

Innan du börjar:

1. Skapa ett Quickchat AI-konto, eller använd ett befintligt. Free inkluderar MCP-åtkomst och 50 månatliga AI-krediter för personlig, icke-kommersiell testning. Konversationer och Simulation-tester förbrukar krediter. För en handlardriftsättning väljer du en plan för kommersiell användning.
2. Ha din Shopify-butiks rot-URL redo, till exempel https://your-store.myshopify.com. För att återskapa våra katalogspecifika tester använder du https://quickchat-ai.myshopify.com, Quickchat AI:s demonstrationsbutik. Dess demodata kan ändras, kontrollera aktuella resultat innan du jämför priser.
3. För driftsättning behöver du behörighet att redigera din webbplats eller ditt Shopify-tema. Ett tema med en Custom Liquid-sektion, till exempel Dawn, kan innehålla inline-kodavsnittet. Du kan också använda den kompletta fristående sidmallen.

Börja med den jämförelsebaserade väljaren i steg 1–7. De valfria avsnitten lägger sedan till skapande av varukorg, orderattribuering och meddelandekanaler. Agenten tar aldrig betalt och reserverar inte lager, kunden slutför eventuellt köp i Shopify checkout.

Utvärderar du redan olika Shopify-appar? Vår jämförelse av Shopify AI-chatbots täcker det beslutet. Den här guiden fokuserar på att bygga och testa arbetsflödet för produktval.

Hur väljer assistenten produkter från Shopify?

Agenten kombinerar kundens preferenser med produktdata som returneras av Shopify och förklarar sedan en kortlista i konversationen.

Kunden anger begränsningarna. Shopify tillhandahåller produktfakta. Modellen avgör vilka returnerade kandidater som passar och hur de ska förklaras.

Shopify MCP är anslutningen mellan agenten och butikens annonserade verktyg. MCP står för Model Context Protocol. Du anger butikens URL, Quickchat AI hanterar verktygsupptäckt och katalogförfrågningar. Det finns ingen anpassad REST action, request body eller Shopify Admin API-nyckel att klistra in i det här receptet.

Den uppdelningen är viktig när du testar:

Ett sökresultat är en kandidat. Det kan fortfarande vara fel kategori eller en dålig matchning. På samma sätt bevisar inte en produkt i katalogen att varje färg- och storlekskombination är tillgänglig.

Shopify dokumenterar katalogverktygets gränssnitt i sin Storefront Catalog MCP guide. Mer information om produktdataproblemen bakom den här integrationen finns i våra Shopify MCP engineering notes.

Hur skapar du shoppingassistenten?

Skapa agenten manuellt, ge den ett produktväljaruppdrag och lämna produktpriser utanför dess Knowledge Base.

Steg 1. Slutför den första konfigurationen

1. Registrera dig med Google eller e-post. Om du använder e-post följer du verifieringsmejlet innan du loggar in.
2. På den första konfigurationsskärmen väljer du Set up manually.
3. I Identity anger du Quickboards Guide i Name your AI Agent. I Describe what you want your agent to do anger du:

Du är Quickboards Guide, shoppingassistenten för Quickboards, en demonstrationsbutik för snowboards. Hjälp besökare att hitta en snowboard som passar deras åkning och budget. Använd den anslutna Shopify-katalogen för produkter och priser. Ställ användbara följdfrågor, förklara dina rekommendationer kort och visa produktkort. Var kortfattad och vänlig. Detta är en produktväljar-konversation: jämför produkter och kontrollera detaljer, men skapa eller ändra inte en varukorg och starta inte checkout. Hitta inte på produktspecifikationer, tillgänglighet eller policyer.

4. Klicka på Next. I Knowledge Base lämnar du importalternativen tomma för detta katalogbaserade exempel och klickar sedan på Next.
5. I External apps väljer du Shopify och sedan Next. Detta registrerar den integration du vill ha, den faktiska anslutningen kommer i steg 2.
6. I Deployment väljer du Chat embed och sedan Next. Detta publicerar inget ännu.
7. I Choose your plan väljer du Skip for now för att fortsätta på Free. Om en erbjudandedialog visas stänger du den och väljer Skip for now igen.

För en befintlig agent går du direkt till Identity → AI Persona. Sätt Name till Quickboards Guide. Fältet Main Prompt är där du installerar de testade instruktionerna i steg 3.

På samma flik AI Persona sätter du Personality till Friendly, Profession till Shopping Assistant, Creativity till Low och Reply Length till Normal för att matcha denna demo.

Börja i Identity i vänstersidofältet. AI Persona innehåller inställningarna för detta recept, närbilden nedan visar fälten som ska redigeras.

Dashboarden kallar instruktionsfältet Main Prompt. Öppna dess Edit-kontroll för att ersätta den första beskrivningen, ändringar sparas automatiskt.

Du kan senare lägga till verifierade policyer för frakt eller returer i Knowledge Base. Vår guide för Knowledge Base-konfiguration förklarar hur du organiserar det innehållet. Detta exempel lämnar policyer utanför så att det finns en tydlig källa för produktpriser, alternativ och tillgänglighet: den anslutna katalogen. Underhåll inte en andra prislista i prompten.

Steg 2. Anslut och aktivera Shopify MCP

1. Öppna Actions & MCPs.
2. Under Custom Actions väljer du Add Action och sedan Shopify MCP.
3. I Shopify store URL anger du rot-URL:en:

https://quickchat-ai.myshopify.com

4. Välj Save. Anslutningen kontrolleras innan den sparas.
5. Slå på reglaget på kortet Shopify Storefront MCP. Att spara via den här dialogen och aktivera åtgärden är separata steg.

Hitta Shopify Storefront MCP under Custom Actions. Dess reglage styr om agenten kan använda anslutningen.

Klistra in butikens rot-URL i Shopify store URL. Lägg inte till en MCP-endpoint eller en produktsökväg.

Om din agent redan har en Shopify-åtgärd använder du Edit Action på det kortet i stället för att skapa en ny anslutning. Dokumentationen för Shopify-driftsättning beskriver också den separata installationsvägen via Shopify-appen. Att installera den appen krävs inte för den manuella MCP-anslutning som används här.

För den första anslutningskontrollen öppnar du AI Preview och frågar:

Kontrollera om snowboarden Iron i Ice är tillgänglig att beställa och vad den kostar. Lägg den inte i en varukorg.

På vårt testdatum var den returnerade varianten tillgänglig för $699.95 USD. För din egen butik ersätter du med en produkt och ett alternativ vars aktuella värde du kan verifiera. En fungerande anslutning är nödvändig, men det här enda svaret validerar inte hela väljaren.

Steg 3. Klistra in hela Main Prompt

Öppna Identity → AI Persona → Main Prompt → Edit, ersätt den första beskrivningen med följande block och stäng sedan redigeraren efter att den har sparats automatiskt. Detta är prompten som användes för de slutliga testerna. För en annan kategori ersätter du butikens identitet och preferensfrågorna tillsammans, behåll reglerna för kataloggrundning och saknade matchningar.

Du är Quickboards Guide, shoppingassistenten för Quickboards, en demonstrationsbutik för snowboards. Hjälp en besökare att begränsa katalogen till en eller två lämpliga brädor och förstå avvägningarna. Håll konversationen kortfattad, vänlig och specifik. Börja med den användbara frågan eller produktfaktan, utan beröm eller utfyllnad.

Samla endast in de preferenser som spelar roll:
- Vid en bred fråga som "hjälp mig att välja en snowboard", ställ en kort fråga i taget. Ta reda på deras åknivå, vanliga terräng och högsta budget endast för brädan med valuta. Sök inte i katalogen och visa inte produktkort förrän dessa tre fakta är kända.
- Återanvänd fakta som redan har angetts. Om besökaren ger alla tre i ett meddelande, gå direkt till sökning. Gör inte konversationen till ett fast frågeformulär.
- Fråga om en preferens som färg endast när den skulle ändra kortlistan. Fråga inte om längd eller vikt om katalogen inte innehåller en användbar storleksguide. Härled aldrig en brädlängd enbart från kroppsmått.

Hitta och förklara en liten kortlista:
- Fråga den anslutna Shopify-katalogen efter aktuella produkter och priser. Använd inte Knowledge Base, tidigare konversationer eller ditt eget minne som källa för pris, alternativ eller tillgänglighet.
- Sökresultat är kandidater, inte automatiska rekommendationer. Kontrollera produktkategori, beskrivning och aktuellt pris mot varje angivet krav. Visa aldrig en orelaterad produkt bara för att sökningen returnerade den.
- Visa högst två matchande produkter. Om bara en passar, visa en. För varje, namnge produkten, ange dess aktuella pris och valuta och förklara en relevant anledning baserad på den returnerade beskrivningen. Håll kortlistans förklaring under 90 ord. Nämn en avvägning endast om de returnerade fakta stöder den, ett lägre pris betyder inte i sig att en bräda är förlåtande eller lämplig för nybörjare.
- Använd produktkort för samma kortlista. Visa inte extra produkter som kontext och fyll inte ut svaret med en hel katalog.
- Kalla inte en produkt "bäst", lova inte prestanda och ange inte en exakt teknisk specifikation om inte de returnerade uppgifterna stöder påståendet. Upprepa inte överdriven marknadsföringstext som ett uppmätt faktum.

Verifiera en begärd variant:
- När besökaren frågar om en specifik färg, storlek eller annat alternativ, kontrollera det aktuella katalogsvaret för den exakta varianten. Om svaret inte inkluderar alla begärda alternativvärden och den variantens tillgänglighet, använd produktdetaljverktyget för att granska produkten och den valda kombinationen. Härled aldrig tillgänglighet enbart från produkttitel eller beskrivning.
- Värden som förekommer separat i alternativlistor bevisar inte att deras kombination är tillgänglig. Kontrollera den exakta returnerade varianten och dess tillgänglighet.
- Ett storleksintervall i en beskrivning är inte en valbar storlek. Om katalogen har Color men inget Size-alternativ, säg att du kan kontrollera färgen men inte bekräfta en specifik längd. Lova inte den begärda storleken och påstå inte att en storleksväljare finns på produktsidan.
- Lova inte att en annan produkt har det saknade alternativet om du inte har kontrollerat det. Erbjud dig att kontrollera alternativ utan att anta resultatet.
- Ange aktuellt pris och valuta för den kontrollerade varianten. Håll interna produkt-ID:n, variant-ID:n och rå verktygsdata borta från kundens svar.

Hantera ändringar och saknade matchningar:
- Om besökaren ändrar budget, terräng, nivå eller annat krav, sök om i katalogen med de uppdaterade kraven. Ersätt den tidigare kortlistan, fortsätt inte rekommendera en produkt över den nya budgeten.
- Om sökningen inte returnerar något lämpligt, försök en gång till med en enklare fråga eller synonym. Om inget av resultaten innehåller en matchning, säg "Jag kunde inte hitta en matchande produkt i den här katalogen." Påstå inte att en tom eller irrelevant sökning bevisar att butiken aldrig säljer den kategorin.
- Fråga vilket enda krav besökaren är villig att mjuka upp. Mjuka inte tyst upp budget, storlek, kategori eller tillgänglighet. Visa inga produktkort när det inte finns någon lämplig matchning.
- Om anslutningen misslyckas, säg att livekatalogen inte kunde kontrolleras och erbjud att försöka igen. Fyll aldrig luckan med en gissad produkt eller ett gissat pris.

Den här upplevelsen är en produktväljare. Jämför produkter och kontrollera endast detaljer. Skapa eller ändra inte en varukorg, starta inte checkout, ta inte betalt och påstå inte att en vara är reserverad. Svara på besökarens språk. Använd korta stycken och inga tankstreck.

Dessa regler styr modellens beteende. De är inte en hård kortgräns, en ordantalsvaliderare eller en behörighetsgräns. I våra tester varierade exakt formulering och svarslängd. Produkt- och variantkontrollerna nedan är viktigare än att återskapa en viss mening. För en separat anpassad REST action som skriver till dina system förklarar vår guide för tillförlitliga AI Actions villkor på serversidan. De anpassade åtgärdskontrollerna är inte inställningar på det inbyggda Shopify-kortet som används här.

Hur testar du produktrekommendationer innan du går live?

Testa konversationen på två sätt: interaktivt för följdfrågor och i Simulation Testing för en upprepbar uppsättning oberoende förfrågningar.

En batchpoäng hjälper till att prioritera granskning. Loopen stängs först när du kontrollerar det faktiska svaret, katalogfakta och relevanta verktygsanrop.

Steg 4. Kör hela shoppingkonversationen

I AI Preview startar du en ny konversation och skickar:

Hjälp mig att välja en snowboard.

Agenten bör ställa en användbar fråga och inte visa några produktkort. I en inspelad körning med slutprompten frågade den:

Vilken är din nuvarande åknivå: nybörjare, medelvan eller avancerad?

En fråga, utan för tidig kortlista. Upprepade nya körningar bör bevara det beteendet även om ordalydelsen ändras.

Ange de saknade preferenserna. För att testa direktvägen startar du en ny konversation med denna kompletta brief:

Jag är en avancerad åkare, mest preparerade resortpister. Jag vill ha fart och precisa svängar, med en budget endast för brädan på $800 USD.

I den inbäddade demon returnerade agenten AI’s board för $629.95 USD och Liquid för $749.95 USD, med två produktkort och förklaringar baserade på deras beskrivningar. Båda låg inom den angivna budgeten. Produktvalet kan variera när flera katalogposter passar, kontrollera skälen och begränsningarna, inte bara produktnamnen.

Bilderna och produktlänkarna kom från Shopify-katalogen. Detta är den faktiskt renderade kortkomponenten, inte en designad konversationsmockup.

Fortsätt sedan i samma konversation:

Ändra min budget till $650 USD. Behåll samma åkpreferenser.

Demon ersatte den tidigare kortlistan med AI’s board och Neo’s Board, båda $629.95 USD. Liquid, för $749.95, fanns inte längre i de nya korten. Öppna konversationen i Inbox för att granska båda turerna tillsammans. Verifiera att en ändrad budget ändrar de föreslagna produkterna utan att starta om preferensintervjun.

Budgeten ändrades i den befintliga konversationen. Den nya kortlistan utesluter det tidigare alternativet som överskred budgeten. Budgetetiketten ovanför varje kortbild är en redaktionell anteckning.

För en handlares egen katalog bör du också öppna varje rekommenderad produktsida. Bekräfta att länken går till avsedd butik, att produkten finns och att det visade priset matchar relevant marknad och variant. Vår demonstrationsbutiks publika produktsidor är lösenordsskyddade, skärmbilderna bevisar kataloganslutningen och den lokala inbäddningen, inte en obegränsad live-shoppingdestination.

Steg 5. Skapa ett upprepbart Simulation-dataset

Lägg till de sju oberoende förfrågningarna

Öppna Testing → Create Dataset. Ange Quickboards catalog checks i Dataset name, välj Paste messages och klistra in följande. Varje ----rad separerar ett oberoende test, inte en ny tur i en konversation.

Antalet sju meddelanden bekräftar att separatorerna identifierades. Använd en livekonversation, inte separata datasetrader, för uppföljningen med ändrad budget.

Hjälp mig att välja en snowboard.
---
Jag är en medelvan åkare. Jag åker i preparerade resortpister och vill förbättra min carving. Min högsta budget är $800 USD.
---
Jag behöver pjäxor i EU-storlek 42 under $300 USD.
---
Kontrollera om snowboarden Iron i Ice är tillgänglig att beställa och vad den kostar. Lägg den inte i en varukorg.
---
Kan jag få snowboarden Iron i Ice, storlek 156 cm? Lägg den inte i en varukorg.
---
Kan jag beställa snowboarden Hellium i Black med Tapered-designen? Kontrollera bara, lägg inget i en varukorg.
---
Soy un snowboarder de nivel intermedio. Suelo ir por pistas preparadas y tengo un presupuesto máximo de 800 USD. ¿Qué tabla me recomiendas?

Tala om för utvärderaren vad ett bra svar betyder

Expandera Evaluation criteria och ersätt standardrubriken med:

Bedöm endast den regel som gäller för denna besökares förfrågan. Tillämpa inte varje tests krav på varje svar.

Om besökaren bara säger "Hjälp mig att välja en snowboard", ska svaret ställa en relevant fråga och inte rekommendera produkter ännu.
Om besökaren redan anger åknivå, terräng och budget (inklusive det spanska testet), är en direkt kortlista med högst två rimliga brädor inom budget korrekt. Kräv inte ytterligare en förtydligande fråga. Utvärdera om förklaringen adresserar deras preferenser. Kräv inte Iron eller någon annan specifik produkt i en generell kortlista.
För prisfrågan Iron/Ice rapporterar demokatalogen tillgänglighet och 699.95 USD. För kontrollen Iron/Ice/156 cm måste svaret säga att längden inte kan bekräftas eftersom Iron inte har något valbart Size-alternativ.
För Hellium/Black/Tapered får svaret inte säga att kombinationen är tillgänglig.
För pjäxor ska svaret säga att det inte kunde hitta en matchande produkt, det får inte presentera orelaterade brädor eller vax som pjäxrekommendationer.
Svaret ska vara på besökarens språk och får inte påstå att det har skapat en varukorg.

Utvärdera endast synligt beteende. Du kan inte verifiera dolda Shopify-anrop, aktuell katalogfullständighet eller produktkortens innehåll från svarstexten. Dessa kräver en separat manuell kontroll mot livekatalogen.

Bedöm regeln som gäller för förfrågan. En komplett shoppingbrief ska inte straffas för att den hoppar över ytterligare en preferensfråga.

För ett explicit amerikanskt katalogsammanhang expanderar du Conversation metadata (advanced) och anger:

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

Detta är fält för katalogsammanhang. Det spanska besökartestet kontrollerar fortfarande att svaret följer besökarens språk.

Kör, granska och jämför

1. Välj Create, öppna datasetet och sedan Run.
2. I Start Test Run anger du en beskrivande etikett som Final finder, US catalog och väljer sedan Start Run.
3. Öppna den slutförda körningen under Runs. Läs AI Response, AI Score och Justification tillsammans. Håll muspekaren över ett trunkerat svar eller en trunkerad motivering för att läsa den i sin helhet.
4. Använd radens View-kontroll för att öppna den faktiska konversationen i Inbox. Kontrollera variantfakta mot Shopify och granska verktygen enligt det avancerade avsnittet nedan.
5. Korrigera antingen agentinstruktionerna eller utvärderarens rubric, beroende på vad som var fel. Kör om samma dataset med en ny etikett. Uppdatera produktspecifika förväntade värden när katalogen ändras.

Testing är fortfarande markerat i sidofältet. Brödsmulan identifierar datasetet och körningen, högersidan av varje rad leder till mänsklig feedback och konversationen.

Den slutliga testkörningen för amerikansk katalog. AI Score bedömer det synliga svaret, den verifierar inte Shopify-förfrågan, korten eller lagret oberoende.

Vad poängen missade i vår egen körning

Den första versionen av vår rubric straffade felaktigt kompletta briefer för att inte ställa ytterligare en fråga. De reviderade kriterierna skiljer uttryckligen mellan en ofullständig förfrågan och en som redan innehåller nivå, terräng och budget. Granska utvärderarens resonemang samt agentens svar.

Den slutliga körningen flaggade fortfarande svaret om den otillgängliga varianten: bedömaren blandade ihop att en variant finns med att den är tillgänglig. Den faktiska katalogen innehöll Black/Tapered-varianten och markerade den som otillgänglig, vilket agenten rapporterade korrekt. Därför kan en poäng ensam inte ersätta variantkontrollen nedan.

Motsatsen hände också. En högt poängsatt kortlista kallade Hydrogen valet för ”enklare progression”, en jämförelse som de returnerade beskrivningarna inte etablerade. Behandla det som ett fynd vid manuell granskning, inte som en verifierad produktfördel. De inspelade svaren och katalogutdragen bevarar båda fallen.

Hur kontrollerar du storlekar och otillgängliga varianter?

Kontrollera den exakta varianten i stället för att behandla produktbeskrivningstext som en lagerpost.

Iron-snowboardens beskrivning nämnde ett intervall på 144–160 cm. Dess returnerade köpbara alternativ var Color, inklusive Ice. Det fanns ingen valbar Size-dimension som bekräftade 156 cm.

Ett konceptdiagram över den faktiska katalogavvikelsen. Beskrivningens intervall kan inte bekräfta en specifik köpbar längd.

Skicka denna exakta förfrågan:

Kan jag få snowboarden Iron i Ice, storlek 156 cm? Lägg den inte i en varukorg.

I ett inspelat test med slutprompten bekräftade agenten Ice för $699.95 USD, men förklarade att den inte kunde bekräfta eller välja en längd på 156 cm eftersom den storleken inte exponerades som ett alternativ.

Det lyckade resultatet är ett kvalificerat svar: färgen är tillgänglig, den begärda längden förblir obekräftad.

Det separata testet Hellium / Black / Tapered kontrollerar ett annat fel. Båda alternativvärdena förekommer i produktens alternativlistor, men den exakta kombinationen var otillgänglig. Agenten ska inte erbjuda den bara för att ”Black” och ”Tapered” finns var för sig.

Skillnaden som utvärderaren missade: varianten finns, men den kan för närvarande inte beställas.

Under författartestningen spelade vi in de faktiska katalogsvaren tillsammans med konversationerna. Sökresponsen innehöll redan variantdata som användes i dessa körningar, så vi behandlade inte ett ytterligare produktdetaljanrop som ett obligatoriskt tecken på framgång. Om returnerad data är ofullständig behöver agenten en detaljuppslagning eller ett uttryckligt ”jag kan inte bekräfta”.

För din egen butik jämför du svaret med produktens variantinställningar i Shopify. Kräv att alla begärda alternativvärden tillhör samma variant och kontrollera dess tillgänglighet och pris. Tillgänglig för beställning betyder inte en känd lagerkvantitet, och en rekommendation reserverar inget.

Vad ändrades när vi justerade väljaren?

De användbara förbättringarna kom från att testa ett specifikt fel, ändra den relevanta instruktionen och upprepa samma förfrågan.

Använd denna loop:

1. Starta en ny konversation med ett sparat testmeddelande.
2. Läs svaret och granska de faktiska korten och katalogfakta.
3. Ändra ett beteende i Main Prompt, till exempel när produktsökning ska börja.
4. Upprepa testet och kör sedan resten av datasetet igen för att kontrollera regressioner.

Tre fynd formade den slutliga prompten:

Sökningen returnerade kandidater från andra kategorier. Agenten presenterade dem inte som lämpliga pjäxor.

Detta är observerade resultat från denna demonstrationskatalog, inte en noggrannhetsbenchmark. En prompt kan inte tillhandahålla saknade specifikationer. Om dina beskrivningar inte skiljer två produkter åt behöver du förbättra katalogen innan du förväntar dig att assistenten ska förklara en meningsfull skillnad. Upprepa tester efter ändringar av beskrivningar, priser, alternativ eller instruktioner.

Hur lägger du till shoppingassistenten på en Shopify-sida?

Använd Embed för en konversation inne på en sida, eller Widget för en flytande chattbubbla. Den här genomgången använder Embed och behåller den jämförelsebaserade Main Prompt från steg 3.

Steg 6. Konfigurera och kopiera webbplatsens Embed

1. Öppna Channels → Your Website → Text Content. Sätt Header text till Quickboards Guide och Welcome message till Berätta om din åkning så hjälper jag dig att hitta en bräda. Var brukar du åka?.
2. Öppna Appearance → Theme och välj Light.
3. Gå tillbaka till Install → Availability and access. Bekräfta att Widget & Embed access är aktiverat.
4. Öppna Install manually with code och kopiera Embed. Använd agentidentifieraren från ditt eget kodavsnitt.

Börja med Your Website i sidofältet och sedan Install manually with code. I dess panel kopierar du Embed för en inline-väljare, Widget skapar en flytande bubbla.

Kopiera din egen agents kodavsnitt här. Det publika fragmentet nedan använder en platshållare i stället för den lokala demonstrationsidentifieraren.

Detta minimala fragment använder den inbyggda laddaren. Ersätt 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>

Containern måste finnas före initiering, med containerId före init. Initiera Quickchat AI en gång per sida. Om ditt tema redan laddar widgeten eller Shopify app embed, be dess ansvariga att förhindra dubbel initiering på den här sidan utan att ta bort chatten på andra ställen. Guiden för webbplatskanalen förklarar åtkomstkontrollerna.

Steg 7. Ge väljaren en egen Shopify-mall

Använd ett tema med Custom Liquid, till exempel Dawn. Det finns tre små uppgifter: skapa sidan, bygga dess mall och tilldela den mallen endast till väljaren.

Skapa sidan och mallen

1. I Shopify admin öppnar du Online Store → Pages → Add page. Ange Find your snowboard, lägg till en introduktion, välj Hidden och spara.
2. Under Online Store väljer du Edit theme för det avsedda temat. Öppna Home page → Pages → Create template. Namnge den product-finder, baserad på standardmallen för sidor.

Placera konversationen i mallen

1. I den nya mallens Template-område väljer du Add section → Custom Liquid. Klistra in fragmentet i Liquid code och spara. Håll det borta från delade Header- och Footer-sektioner.
2. Förhandsgranska sidan med Preview → Change i temaredigeraren. Dolda sidor kan förhandsgranskas. Ladda om förhandsgranskningen efter att JavaScript-ändringar sparats.

Placeringsdiagram, inte en skärmbild från Shopify admin. Tilldela denna mall endast till väljarsidan.

Tilldela, kontrollera och publicera sidan

1. Gå tillbaka till sidinställningarna, välj product-finder under Theme template och spara. Endast mallar i live-temat visas här, samordna arbete med opublicerat tema med din normala releaseprocess.
2. Efter lanseringskontrollerna nedan gör du sidan Visible och länkar den under Content → Menus.

Dessa steg följer Shopifys mallinstruktioner och kontroller för sidans synlighet.

För en fristående webbplats använder du den kompletta HTML-mallen som länkades i förutsättningarna. Ersätt dess agentidentifierare och demovarumärke och ladda sedan upp den till din statiska host. Det fullständiga dokumentet hör hemma på en fristående webbplats, klistra endast in fragmentet ovan i Custom Liquid.

Valfritt: hur kopplar du en varukorg till AI-Assisted Revenue?

Quickchat AI kopplar en order till en konversation genom att matcha dess varukorgsidentifierare med en sparad varukorg som skapats eller uppdaterats under den konversationen. Enbart produktrekommendationer etablerar inte den länken. Flödet för varukorg och checkout-länk, inklusive att tillämpa en rabattkod som kunden anger, sammanfattas också på sidan AI shopping assistant for Shopify.

Valideringsomfång: Vårt test den 14 september skapade en riktig Shopify-varukorg och sparade dess kassakort genom det normala svarsflödet. Intäktsskärmbilderna använder en separat, uttryckligen seedad demonstrationsorder. De illustrerar attribuering i Appen, inte ett slutfört köp eller leverans av en äkta Shopify-orderwebhook.

Anslut handlaren och aktivera varukorgsläge

1. Installera Quickchat AI: Chatbot & Sales i din egen Shopify-butik och slutför dess auktorisering. En manuell MCP-anslutning tillhandahåller katalogverktyg, men appinstallationen tillhandahåller handlarkopplingen och orderwebhooks som behövs för attribuering.
2. Öppna agenten som nås via den installationen. Den kan skilja sig från agenten du skapade manuellt. Tillämpa den här guidens inställningar och prompt där, kontrollera dess Shopify-åtgärd och använd den agentens identifierare i ditt webbplatskodavsnitt.
3. I Identity → AI Persona → Main Prompt → Edit ersätter du endast det sista stycket som börjar med This experience is a product finder. med stycket nedan. Lägg inte till det under den motstridiga instruktionen om ingen varukorg.

Den här upplevelsen kan hjälpa en kund att bygga en varukorg efter att ha jämfört produkter. Skapa eller uppdatera en varukorg endast när besökaren uttryckligen ber dig att lägga till en identifierad produkt och kvantitet. Verifiera först den exakta varianten och dess aktuella tillgänglighet i Shopify. Om ett begärt alternativ inte kan verifieras, be om förtydligande i stället för att ersätta det. Använd varukorgsverktygets returnerade produkter, kvantiteter, total och checkout-länk, hitta inte på en checkout-URL. Ta inte betalt, slutför inte en order och påstå inte att en vara är reserverad. Svara på besökarens språk. Använd korta stycken och inga tankstreck.

För demonstrationskatalogen skickar du detta exakta meddelande i en ny konversation:

Lägg till en Iron snowboard i Ice i en ny varukorg. Kontrollera först att den här varianten är tillgänglig. Jag väljer ingen längd. Visa mig varukorgen, men lägg ingen order och ta inte betalt.

Vår verkliga verktygssekvens var search_catalog → get_product → create_cart. Den returnerade varukorgen innehöll en Iron snowboard i Ice för $699.95 USD. Ingen längd valdes, och ingen order eller betalning skapades. För din butik ersätter du med en verifierad produkt, variant och kvantitet.

Det inbyggda checkout-kortet sparades automatiskt under testet den 14 september. Dess produkt, kvantitet och total matchar det verkliga Shopify-svaret. Vi slutförde inte checkout.

Öppna konversationen i Inbox och granska Why AI said that för att verifiera vilka verktyg som kördes. Kontrollera returnerad produkt, kvantitet, valuta och total. Ett lyckat verktygsanrop i sig bevisar inte att checkout-kortet levererades eller att attribuering sparades.

Följ en order tillbaka till dess konversation

I en livebutik fortsätter kunden genom Shopify checkout. Quickchat AI matchar orderns varukorgsidentifierare med den sparade varukorgen i konversationen för den handlaren.

Attribuering följer den matchande varukorgsidentifieraren. Ett orelaterat köp efter en chatt räcker inte.

1. Öppna Insights → AI-Assisted Revenue på den appanslutna agenten.
2. Välj ett datumintervall som innehåller orderns placeringsdatum. Granska AI-assisted GMV, Avg order value och Daily assisted GMV.
3. Under Recent assisted orders hittar du ordern och klickar på View i kolumnen Conversation. Inbox öppnar konversationen med dess Order placed-kort.

Insights → AI-Assisted Revenue. Den här lokala demonstrationen innehåller en syntetisk order, inte handlarens försäljningsprestanda.

Totalen är attribuerat ordervärde. En demonstrationsorder gör också att genomsnittet blir lika med totalen.

Använd View i kolumnen Conversation, inte ordernummerlänken, för att återgå till chatten.

Inbox visar Order placed i konversationen som är kopplad till den seedade varukorgen. Själva ordern är syntetisk.

För intäktsskärmbilderna sparade vi uttryckligen en varukorgskomponent från ett tidigare inspelat Shopify-svar och skickade sedan en synthetic #DEMO-1001 order event med den varukorgsidentifieraren genom den lokala attribueringshanteraren. Dubbletter av created/paid-events gav en post, och en omatchad token gav ingen. Detta validerar downstream-matchningsbeteendet med fixtures, inte leverans av en äkta Shopify-orderwebhook. Det fanns ingen verklig order eller betalning.

Läs mätvärdet som attribuerat ordervärde (GMV). Det inkluderar hela den matchade ordern, inte bara produkter som lagts till av AI. Order-created- eller order-paid-events kan etablera posten, detta är inte en rapport över betald försäljning, nettointäkt eller inkrementell lyft. Återbetalningar och avbokningar nettas inte bort. Datumfiltret väljer placerade ordrar, attribuering har inget fast post-chat lookback window.

Om inget visas, kontrollera den appanslutna agenten, en faktisk create/update-cart-åtgärd, en matchande orderhändelse och de valda datumen. Det manuella inline-kodavsnittet tillhandahåller inte Shopify app embed:s storefront-cart-synkronisering.

Avancerat: hur ser du vilka Shopify-verktyg som kördes?

Använd Why AI said that på ett enskilt AI-svar för att granska dess AI Actions Used. Detta är särskilt användbart när slutsvaret låter rätt men du vill kontrollera om agenten sökte i katalogen eller försökte ändra en varukorg.

1. Öppna Inbox och sedan konversationen. En Simulation-resultats View-kontroll är en annan väg till samma skärm.
2. Hitta AI-svaret du vill undersöka. Håll muspekaren över svaret och välj Why AI said that under det.
3. Läs AI Actions Used. Varje post visar verktygsnamnet och en förkortad argumentsammanfattning för det svaret.
4. Jämför anropen med besökarens förfrågan och de returnerade produktfakta. Granska ett annat svar för att se vad som ändrades vid nästa tur.

Granskningen hör till ett specifikt svar, inte hela agenten. Välj svaret som utförde uppslagningen eller varukorgsändringen.

Faktiska inbyggda anrop från det valfria varukorgstestet: katalogsökning, produktuppslagning och sedan varukorgsskapande. Den här listan kommer från beständiga verktygsanropsposter, den är inte en manuellt skriven transkription.

Förväntade anrop beror på uppgiften:

Det inbyggda Shopify-kortet exponerar inte panelen View logs för anpassade åtgärder. Använd svarsbaserad granskning här. Dessa argumentsammanfattningar är inte en fullständig HTTP-spårning, lagerbevis eller betalningsbevis. Vårt problem med varukorgskort är ett konkret exempel på varför det användarsynliga resultatet behöver en separat kontroll. För det bredare konceptet, se hur AI Agents utför åtgärder.

Valfritt: kan samma väljare svara på WhatsApp och Instagram?

Ja. Anslut valfri kanal till den konfigurerade agenten och testa den sedan i den kanalen. Kataloganslutningen förblir densamma, meddelanderenderingen ändras.

Leveransdiagram: produktkort på webbplatsen, inbyggda interaktiva meddelanden i WhatsApp, text och länkar i Instagram.

WhatsApp stöder inbyggda produkt- och varukorgsmeddelanden. Instagram skickar för närvarande svarstext utan webbplatsens inline-produktkorts- eller varukorgslayout. För Instagram, bekräfta att rekommendationerna innehåller läsbara produktnamn, verifierade priser och produkt-URL:er i texten. Lägg vid behov till denna instruktion i Main Prompt och testa sedan igen i ett faktiskt DM:

Gör rekommendationer begripliga utan produktkort. Inkludera varje rekommenderad produkts namn, verifierade pris med valuta och produkt-URL i svarstexten. Använd endast värden som returneras av Shopify.

Denna instruktion är en startpunkt att testa, inte ett inspelat Instagram-resultat. För Instagram använder du den jämförelsebaserade Main Prompt från steg 3, anta inte att webbplatsens checkout-knapp visas i DM. Om WhatsApp behöver varukorgsläge samtidigt använder du en separat agent för Instagram, eftersom ändringar i Main Prompt gäller varje kanal på en agent.

Att ansluta samma agent flyttar inte heller en kunds webbplatskonversation till en ny WhatsApp- eller Instagram-konversation.

Anslut WhatsApp

Använd det valfria varukorgsläget ovan för den här kanalen. Inbyggda produktmeddelanden kan erbjuda snabbsvar för varukorg, så testa de knapparna samt skrivna förfrågningar.

1. Ha ett dedikerat företagsnummer som kan ta emot SMS- eller röstverifiering, dina företagsuppgifter och administratörsåtkomst till relevant Meta Business. Använd installationsguiden för WhatsApp för befintliga nummer eller providermigreringar.
2. Öppna External Apps → WhatsApp → Connect WhatsApp.
3. I Metas fönster loggar du in som företagsadministratör, väljer eller skapar företaget och WhatsApp Business Account, anger begärda företagsuppgifter och verifierar numret. Slutför behörighets- och bekräftelseskärmarna.
4. Tillbaka i Quickchat AI väntar du på Connected. Under Settings säkerställer du att numrets reglage visar Enabled.
5. Skicka en produktfråga från ett annat WhatsApp-nummer. Kontrollera både mottaget svar och dess Inbox-konversation.

Starta Metas anslutningsflöde här. Den här skärmbilden visar inte en slutförd WhatsApp-anslutning.

Anslut Instagram

1. Använd ett Instagram Professional-konto, antingen Business eller Creator.
2. Öppna External Apps → Instagram → Connect to Instagram. Logga in som det kontot, använd Sign in as a different account om webbläsaren väljer fel.
3. Lämna Access and manage messages aktiverat under auktoriseringen. Tillbaka i Quickchat AI bekräftar du kontot och slår på Enable Instagram.
4. Skicka ett DM från ett annat Instagram-konto. Verifiera dess text, produktlänkar och Inbox-post. Guiden för Instagram DM-installation täcker felsökning av anslutning.

Anslut ett Professional-konto och ge meddelandeåtkomst. Den här lokala Appen har inga Meta-autentiseringsuppgifter, så dess anslutningskontroller är inaktiverade, detta är inte en live-DM-fångst.

Testa båda kanalerna med nya inkommande meddelanden. WhatsApp-friformssvar och automatiserade Instagram-svar använder respektive 24-timmars meddelandefönster, utgående kampanjer kräver separat konfiguration och policykontroller.

Vad bör du kontrollera före lansering?

Steg 8. Validera den publicerade upplevelsen

Kontrollera skyltfönstret

• Välj en plan som tillåter kommersiell användning före handlardriftsättning.
• Öppna sidan på dator och mobil. Avsedd agent ska laddas en gång, med ett användbart inmatningsfält och fungerande produktlänkar.
• Håll sidan dold tills dess egna temaförhandsgranskningar är godkända.

Den befintliga konversationen med ändrad budget på mobil. Båda rekommendationerna ligger kvar under $650 USD, kontrollera karusellrörelse, produktlänkar och meddelandeinmatningen på en smal skärm.

Kontrollera shoppingbeteendet

Det spanska Simulation-fallet är en språkkontroll, inte en marknadskontroll. Vår guide för flerspråkiga chatbots förklarar den bredare funktionen, men validera ändå din butiks regionala katalogdata separat.

Sätt upp granskningsrutinen

Välj vem som övervakar nya konversationer. Konfigurera Human Handoff om en teammedlem ska ta över svåra förfrågningar, det är en separat åtgärd.

Granska tidiga konversationer tillsammans med konversationsanalys. Åtgärda jämförelser som saknar stöd eller saknade produktfakta och kör sedan de sparade testerna igen. Spara testfallen som visade ett problem så att nästa promptändring också kontrolleras mot dem.

Den jämförelsebaserade prompten förblir basguiden. Dess regel om ingen varukorg är en beteendeinstruktion, inte en teknisk borttagning av Shopifys varukorgsverktyg. Aktivera de valfria vägarna först efter att deras egna kontroller är godkända.

Vanliga frågor

Hur bygger jag en Shopify AI-shoppingassistent?

Skapa en Quickchat AI Agent, skriv en Main Prompt som definierar hur den samlar in preferenser och rekommenderar produkter, anslut sedan och aktivera Shopify MCP med din butiks URL. Testa rekommendationerna mot din katalog innan du lägger till agenten på din webbplats som en widget eller inline embed.

Kan en AI-chatbot rekommendera produkter från min Shopify-butik?

Ja. En ansluten agent kan söka i Shopify-katalogen, använda returnerade produktuppgifter för att förklara en kortlista och visa produktkort. Matchningens kvalitet beror på dina katalogbeskrivningar, kundens preferenser och agentens instruktioner. Kontrollera de faktiska produkterna och varianterna vid testning.

Är detta ett Shopify-quiz för produktrekommendationer?

Det är en konversationsbaserad produktväljare. Den samlar in saknade preferenser via chatt och kan ta emot en komplett brief eller en ändrad budget i samma konversation. Den skapar inte ett fast formulär, beräknar inte ett quizresultat och garanterar inte en deterministisk rekommendation.

Kan assistenten kontrollera Shopify-storlekar och tillgänglighet?

Den kan kontrollera de alternativ och den tillgänglighet som returneras av katalogen. En storlek som nämns i en beskrivning är inte bevis för att storleken är en valbar, tillgänglig variant. Agenten bör bekräfta den exakta kombinationen eller säga att den inte kan verifiera den. Tillgänglig för beställning är inte ett lagersaldo eller en reservation.

Behöver jag kod eller en betald plan för den här guiden?

Du kan konfigurera och testa agenten utan att skriva applikationskod. Quickchat AI:s Free-plan inkluderar MCP-åtkomst och 50 månatliga AI-krediter för personlig, icke-kommersiell användning, tester förbrukar krediter. En handlardriftsättning kräver en plan för kommersiell användning. En inline-sida kräver att du klistrar in ett embed-kodavsnitt, och Shopify-avgifter tillkommer separat.

Vad mäter AI-Assisted Revenue?

Quickchat AI:s attribuering matchar en Shopify-orders varukorgsidentifierare med en sparad varukorg som skapats eller uppdaterats i en konversation för den handlaren. Dashboarden rapporterar hela det matchade ordervärdet som GMV, inte nettointäkt eller bevisad inkrementell försäljning. En katalogrekommendation eller ett produktklick räcker inte.

Kan shoppingassistenten fungera på WhatsApp och Instagram?

Samma agent och Shopify-kataloganslutning kan användas i båda kanalerna, men konversationerna och renderingen skiljer sig åt. WhatsApp stöder inbyggda produkt- och varukorgsmeddelanden. Instagram skickar svarstext, så rekommendationer behöver produktnamn, priser och länkar i texten, webbplatsens inline-kassakort visas inte i DM. Testa varje ansluten kanal separat.