---
title: Så här installerar du agenten på Shopify
description: Var koden ska infogas i Shopify-temat, hur agenten läser butikens katalog, hantering av kundvagn och betalning, samt hur du kontrollerar installationen.
section: platforms
keywords: Shopify, installera agent Shopify, widget Shopify, chatt Shopify, AI-agent Shopify, theme.liquid, e-handel AI, AI-säljare Shopify, produktkatalog Shopify, kundvagn Shopify, betalning Shopify, integration Shopify
updated: 2026-09-06
---
På Shopify finns redan en katalog i maskinläsbart format. Därför samlar agenten in produkter mer exakt än någon annanstans: priser, varianter, tillgänglighet och bilder hämtas direkt från butiken.

## Steg 1. Klistra in koden i temat

1.  Öppna **Online Store → Themes** i Shopify-adminpanelen.
2.  Vid det aktiva temat, klicka på **… → Edit code**.
3.  I fillistan, hitta `layout/theme.liquid`.
4.  Klistra in kodraden från kontrollpanelen precis före den avslutande taggen `</body>`.
5.  Spara.

Ett alternativ utan att redigera temat är: **Online Store → Preferences → Custom code** eller valfri app för att infoga skript. Resultatet blir detsamma.

```liquid
    <!-- Commerce Agents -->
<script src="https://comag.vibevox.pro/widget.js" data-slug="din-slug" async></script>
  </body>
</html>
```

Hämta den exakta raden i kontrollpanelen med knappen “Kopiera kod”: den innehåller redan din butiks URL.

## Steg 2. Samla in katalogen

Ange butikens adress i inställningarna och starta analysen. Shopify-crawlern läser strukturerad produktdata: namn, pris, valuta, tillgänglighet, beskrivning och bilder. Varianter (storlekar, färger) inkluderas i produktkortet som egenskaper.

En förnyad analys uppdaterar priser och tillgänglighet. Starta den efter större sortimentsändringar: agenten ansluter inte direkt till din databas utan arbetar med den insamlade katalogen.

## Steg 3. Låt butiken hantera betalningen

På Shopify behöver du inte aktivera betalning i chatten. Rätt upplägg är:

1.  I butiksinställningarna, ange länken till varukorgen – vanligtvis `https://din-domän/cart`.
2.  Agenten väljer en produkt, visar produktkortet och leder via en knapp kunden till Shopify-varukorgen.
3.  Kassan och betalningen sker på det vanliga sättet, med alla dina regler för leverans och skatter.

För att se vilka dialoger som leder till köp, klistra in köppixelns fragment på tack-sidan. I Shopify är detta **Settings → Checkout → Order status page → Additional scripts**. Fragmentet med ordernummer och summa finns i kontrollpanelen, under “Widget och länk”.

## Produkten läggs i varukorgen utan att avbryta konversationen

Här utmärker sig Shopify bättre än andra plattformar. Agenten visar produktkort med bild, pris och knapp, men knappen leder inte bara till sidan – den lägger produkten direkt i butikens varukorg.

Det fungerar så här: i Shopify-produktlänken finns en variantidentifierare, som agenten skickar till din varukorg via standardgränssnittet `/cart/add.js`. Sidan laddas inte om, dialogen avbryts inte, kunden ser en kort bekräftelse och fortsätter att välja. Produkten ligger då redan i Shopify-varukorgen – med alla dina regler för rabatter, skatter och leverans.

Om det inte finns någon variant i länken, öppnar agenten produktkortet, och kunden lägger till den själv. Inget går sönder, det blir bara ett klick extra.

När kunden är redo leder knappen “Gå till kassan” till `/cart`, där allt redan är samlat. Därefter är det den vanliga Shopify-kassan.

Och separat om kontexten: agenten läser strukturerad data från sidan där chatten är öppen. Om en kund tittar på en specifik produkt och frågar “finns den i storlek L?” – förstår agenten vad det handlar om, utan att behöva fråga igen.

-   Öppna butiken i inkognitoläge, vänta på chattknappen.
-   Fråga om en produkt med namn – ett produktkort med pris ska visas.
-   Klicka på “Gå till kassan” – Shopify-varukorgen ska öppnas.
-   Gör en testbeställning och kontrollera att köpet har markerats under “Beställningar”.

## Chatt i butikens ton

Shopify-temat sätter stämningen för hela butiken, och chatten bör inte sticka ut. I widgetinställningarna finns tre alternativ: ljus, mörk och “som hos besökaren”, som följer kundens enhetsinställningar.

För butiker med mörkt tema, ställ in mörk hårt; för ljusa, ställ in ljus. Knapparnas accentfärg förblir din i båda fallen.

## Steg 4. Kontrollera

## Vanliga problem

**Widgeten försvann efter temabyte.** Koden finns i temafilen. Ett temabyte eller en uppdatering raderar ändringen – klistra in koden igen eller använd Custom code, som är oberoende av temat.

**Katalogen samlades inte in helt.** Crawlern hämtar produkter från publika sidor. Produkter som är dolda från katalogen och utkast inkluderas inte, vilket är korrekt.

**Priserna i katalogen är inaktuella.** Starta webbplatsanalysen igen, den uppdaterar priser och tillgänglighet för befintliga produktkort.

**Widgeten krockar med chattappen.** Använd bara en chatt: två fönster i samma hörn stör varandra och förvirrar kunden.

## Vanliga frågor

### Behövs en app från Shopify App Store

Nej. Agenten ansluts med en enda kodrad, ingen appinstallation krävs.

### Kan agenten visa produktvarianter

Ja, varianter inkluderas i produktkortet som egenskaper: storlek, färg, volym. Kunden väljer den specifika varianten i Shopify-varukorgen.

### Hur hanteras flera valutor

Agenten visar priser i den katalogvaluta som den identifierar vid genomsökningen. Shopifys multivalutafunktion hanteras sedan i varukorgen och vid betalningen.

### Kommer agenten att känna till lagersaldo

Tillgängligheten hämtas vid analysen. För produkter som ofta tar slut, kör analysen oftare eller lägg till en rad i villkoren om att tillgängligheten bekräftas vid beställning.

### Påverkar widgeten butikens hastighet

Skriptet laddas asynkront och blockerar inte renderingen. Detta påverkar praktiskt taget inte Core Web Vitals-mätvärdena.
