Miten asentaa agentti Shopifyhin

Mihin koodi lisätään Shopify-teemaan, miten agentti lukee kaupan tuoteluettelon, mitä tehdä ostoskorin ja maksun kanssa ja miten asennus tarkistetaan.

6. syyskuuta 2026

Shopifylla on jo koneellisesti luettava tuoteluettelo, joten agentti kerää tuotteet tarkemmin kuin mistään muualta: hinnat, vaihtoehdot, saatavuus ja kuvat tulevat suoraan kaupasta.

Vaihe 1. Lisää koodi teemaan#

1. Shopifyn hallintapaneelissa avaa Online Store → Themes.
2. Aktiivisen teeman kohdalla napsauta … → Edit code.
3. Etsi tiedostoluettelosta layout/theme.liquid.
4. Lisää koodirivi käyttöliittymästä juuri ennen sulkevaa </body>-tagia.
5. Tallenna.

Vaihtoehto ilman teeman muokkausta: Online Store → Preferences → Custom code tai mikä tahansa sovellus skriptien lisäämiseen. Tulos on sama.

    <!-- Commerce Agents -->
<script src="https://comag.vibevox.pro/widget.js" data-slug="oma-tunniste" async></script>
  </body>
</html>

Tarkka koodirivi löytyy käyttöliittymästä “Kopioi koodi” -painikkeella: siinä on jo valmiina kauppasi osoite.

Vaihe 2. Kokoa tuoteluettelo#

Määritä asetuksissa kaupan osoite ja käynnistä analyysi. Shopifyn indeksoija lukee tuotteiden jäsenneltyä dataa: nimen, hinnan, valuutan, saatavuuden, kuvauksen ja valokuvat. Vaihtoehdot (koot, värit) tallentuvat tuotekortille ominaisuuksina.

Uudelleenanalysointi päivittää hinnat ja saatavuuden. Käynnistä se suurten valikoimamuutosten jälkeen: agentti ei yhdisty suoraan tietokantaasi, vaan toimii kerätyn tuoteluettelon pohjalta.

Vaihe 3. Jätä maksu kaupan hoidettavaksi#

Shopifyssa maksamista ei tarvitse ottaa käyttöön chatissa. Oikea toimintamalli on seuraava:

1. Määritä kaupan asetuksissa linkki ostoskoriin – yleensä https://sinun-verkkotunnuksesi/cart.
2. Agentti etsii tuotteen, näyttää tuotekortin ja ohjaa painikkeen kautta ostajan Shopifyn ostoskoriin.
3. Tilaaminen ja maksaminen tapahtuvat tuttuun tapaan, kaikkien toimitus- ja verosääntöjesi mukaisesti.

Jotta näet, mitkä keskustelut päättyvät ostokseen, lisää ostospikselin koodinpätkä kiitossivulle. Shopifyssa tämä löytyy kohdasta Settings → Checkout → Order status page → Additional scripts. Koodinpätkä, jossa on tilauksen numero ja summa valmiina, löytyy käyttöliittymästä, osiosta “Widget ja linkki”.

Tuote siirtyy ostoskoriin keskeyttämättä keskustelua#

Tässä Shopify näyttää parhaat puolensa muihin alustoihin verrattuna. Agentti näyttää tuotekortit valokuvan, hinnan ja painikkeen kera, mutta painike ei vain johda sivulle – se lisää tuotteen kaupan ostoskoriin.

Tämä toimii näin: Shopifyn tuotelinkissä on variantin tunniste, jonka agentti välittää ostoskoriisi Shopifyn vakiokäyttöliittymän /cart/add.js kautta. Sivu ei lataudu uudelleen, keskustelu ei keskeydy, ostaja näkee lyhyen vahvistuksen ja jatkaa valitsemista. Tuote on tällöin jo Shopifyn ostoskorissa – kaikkien alennus-, vero- ja toimitussääntöjesi mukaisesti.

Jos linkissä ei ole varianttia, agentti avaa tuotekortin, ja ostaja lisää sen itse. Mikään ei rikkoudu, se on vain yksi klikkaus enemmän.

Kun asiakas on valmis, “Siirry kassalle” -painike ohjaa /cart-sivulle, jossa kaikki on jo koottuna. Sen jälkeen on vuorossa Shopifyn tavallinen kassa.

Ja erikseen kontekstista: agentti lukee sen sivun jäsenneltyä dataa, jolla chat on avoinna. Ostaja katsoo tiettyä tuotetta ja kysyy “onko tätä L-koossa?” – agentti ymmärtää, mistä on kyse, ilman lisäkysymyksiä.

• Avaa kauppa incognito-tilassa, odota chat-painiketta.
• Kysy tuotteesta nimellä – tuotekortin hinnan kanssa pitäisi ilmestyä.
• Napsauta “Siirry kassalle” – Shopifyn ostoskorin pitäisi avautua.
• Tee testitilaus ja varmista, että ostos on merkitty “Tilauksiin”.

Chat kaupan tyyliin#

Shopifyn teema luo koko kaupan tunnelman, eikä chatin tulisi poiketa siitä. Widgetin asetuksissa on kolme vaihtoehtoa: vaalea, tumma ja “kuten kävijällä”, joka noudattaa ostajan laitteen asetuksia.

Kaupoissa, joissa on tumma teema, aseta tumma teema kiinteästi, ja vaaleissa kaupoissa vaalea. Painikkeiden korostusväri pysyy omana valintanasi molemmissa tapauksissa.

Vaihe 4. Tarkista#

Yleisiä ongelmia#

Widget katosi teeman vaihdon jälkeen. Koodi sijaitsee teematiedostossa. Teeman vaihtaminen tai päivittäminen poistaa muutoksen – lisää koodi uudelleen tai käytä Custom codea, joka ei riipu teemasta.

Tuoteluettelo ei kerääntynyt kokonaan. Indeksoija hakee tuotteet julkisilta sivuilta. Piilotetut tuotteet ja luonnokset eivät päädy luetteloon, mikä on oikein.

Tuoteluettelon hinnat ovat vanhentuneet. Käynnistä sivuston analyysi uudelleen, se päivittää hinnat ja saatavuuden olemassa olevien tuotekorttien osalta.

Widget on ristiriidassa chat-sovelluksen kanssa. Jätä käyttöön vain yksi chat: kaksi ikkunaa samassa kulmassa häiritsevät toisiaan ja hämmentävät ostajaa.

Usein kysytyt kysymykset#

Tarvitaanko sovellusta Shopify App Storesta#

Ei. Agentti yhdistetään yhdellä koodirivillä, sovelluksen asentamista ei tarvita.

Osaako agentti näyttää tuotevaihtoehtoja#

Kyllä, vaihtoehdot tallentuvat tuotekortille ominaisuuksina: koko, väri, tilavuus. Ostaja tekee tietyn vaihtoehdon valinnan Shopifyn ostoskorissa.

Miten toimitaan useiden valuuttojen kanssa#

Agentti näyttää hinnat tuoteluettelon valuutassa, jonka se määrittää indeksoinnin yhteydessä. Shopifyn monivaluuttaominaisuus toimii edelleen ostoskorin ja maksun puolella.

Tietääkö agentti varastosaldoista#

Saatavuus otetaan huomioon analyysin hetkellä. Tuotteille, jotka loppuvat usein varastosta, käynnistä analyysi useammin tai lisää ehtoihin maininta, että saatavuus tarkistetaan tilausta tehdessä.

Vaikuttaako widget kaupan nopeuteen#

Skripti latautuu asynkronisesti eikä estä renderöintiä. Tämä ei käytännössä vaikuta Core Web Vitals -mittareihin.