Jak zainstalować agenta na Shopify
Gdzie wkleić kod w motywie Shopify, jak agent odczytuje katalog sklepu, co zrobić z koszykiem i płatnością oraz jak sprawdzić instalację.
Shopify posiada już katalog w formacie odczytywalnym maszynowo, dlatego agent zbiera informacje o produktach dokładniej niż gdziekolwiek indziej: ceny, warianty, dostępność i zdjęcia pochodzą bezpośrednio ze sklepu.
Krok 1. Wklej kod do szablonu#
- W panelu administracyjnym Shopify otwórz Online Store → Themes.
- Przy aktywnym motywie kliknij … → Edit code.
- Na liście plików znajdź
layout/theme.liquid. - Wklej wiersz kodu z panelu tuż przed zamykającym tagiem
</body>. - Zapisz.
Alternatywa bez edycji motywu: Online Store → Preferences → Custom code lub dowolna aplikacja do wstawiania skryptów. Rezultat jest taki sam.
<!-- Commerce Agents -->
<script src="https://comag.vibevox.pro/widget.js" data-slug="twój-slug" async></script>
</body>
</html>Dokładny wiersz kodu znajdziesz w panelu, używając przycisku „Kopiuj kod”: jest w nim już podstawiony adres Twojej witryny.
Krok 2. Zbierz katalog#
W ustawieniach podaj adres sklepu i uruchom analizę. Crawler Shopify odczytuje ustrukturyzowane dane produktów: nazwę, cenę, walutę, dostępność, opis i zdjęcia. Warianty (rozmiary, kolory) trafiają do karty produktu jako cechy.
Ponowna analiza aktualizuje ceny i dostępność. Uruchamiaj ją po dużych zmianach w asortymencie: agent nie łączy się bezpośrednio z Twoją bazą danych, lecz pracuje ze zgromadzonym katalogiem.
Krok 3. Pozostaw obsługę płatności sklepowi#
Na Shopify nie ma potrzeby włączania płatności na czacie. Prawidłowy schemat:
- W ustawieniach sklepu podaj link do koszyka — zazwyczaj
https://[twoja-domena]/koszyk. - Agent dobiera produkt, wyświetla kartę produktu i za pomocą przycisku prowadzi kupującego do koszyka Shopify.
- Realizacja zamówienia i płatność odbywają się w zwykły sposób, zgodnie ze wszystkimi Twoimi zasadami dostawy i podatków.
Aby widzieć, które rozmowy kończą się zakupem, wklej fragment piksela zakupu na stronę podziękowania. W Shopify to Settings → Checkout → Order status page → Additional scripts. Fragment z podstawieniem numeru zamówienia i kwoty znajduje się w panelu, w sekcji „Widżet i link”.
Produkt trafia do koszyka bez przerywania rozmowy#
Tutaj Shopify ujawnia swoje przewagi nad innymi platformami. Agent wyświetla karty produktów ze zdjęciem, ceną i przyciskiem, ale przycisk nie tylko prowadzi do strony — on dodaje produkt do koszyka sklepu.
Działa to tak: w linku produktu Shopify znajduje się identyfikator wariantu, agent przekazuje go do Twojego koszyka za pośrednictwem standardowego interfejsu /cart/add.js. Strona nie odświeża się, dialog nie jest przerywany, kupujący widzi krótkie potwierdzenie i kontynuuje wybieranie. Produkt jest już w koszyku Shopify — ze wszystkimi Twoimi zasadami rabatów, podatków i dostawy.
Jeśli w linku nie ma wariantu, agent otwiera kartę produktu, a kupujący dodaje go samodzielnie. Nic się nie psuje, to po prostu jedno kliknięcie więcej.
Gdy klient jest gotowy, przycisk „Przejdź do kasy” prowadzi do /cart, gdzie wszystko jest już zebrane. Dalej — zwykła kasa Shopify.
I osobno o kontekście: agent odczytuje ustrukturyzowane dane strony, na której otwarty jest czat. Kupujący ogląda konkretny produkt i pyta „czy jest dostępny w rozmiarze L?” — agent rozumie, o co chodzi, bez dodatkowych pytań.
- Otwórz sklep w trybie incognito, poczekaj na przycisk czatu.
- Zapytaj o produkt po nazwie — powinna pojawić się karta produktu z ceną.
- Kliknij „Przejdź do kasy” — powinien otworzyć się koszyk Shopify.
- Złóż zamówienie testowe i upewnij się, że zakup został odnotowany w „Zgłoszeniach”.
Czat dopasowany do witryny#
Motyw Shopify nadaje ton całemu sklepowi, a czat nie powinien z tego tonu wypadać. W ustawieniach widżetu dostępne są trzy warianty: jasny, ciemny i „jak u odwiedzającego”, który dostosowuje się do ustawień urządzenia kupującego.
Dla sklepów z ciemnym motywem ustaw ciemny na stałe, dla jasnych — jasny. Kolor akcentujący przycisków pozostaje Twój w obu przypadkach.
Krok 4. Sprawdź#
Częste problemy#
Widżet zniknął po zmianie motywu. Kod znajduje się w pliku motywu. Zmiana lub aktualizacja motywu usuwa modyfikację — wklej kod ponownie lub użyj Custom code, który jest niezależny od motywu.
Katalog nie został zebrany w całości. Robot indeksujący pobiera produkty z publicznych stron. Produkty ukryte w katalogu i wersje robocze nie są uwzględniane, i tak powinno być.
Ceny w katalogu są nieaktualne. Uruchom analizę strony ponownie, zaktualizuje ona ceny i dostępność dla istniejących kart produktów.
Widżet koliduje z aplikacją czatu. Pozostaw jeden czat: dwa okna w jednym rogu przeszkadzają sobie nawzajem i mylą kupującego.
Często zadawane pytania#
Czy potrzebna jest aplikacja z Shopify App Store#
Nie. Agent łączy się za pomocą jednego wiersza kodu, instalacja aplikacji nie jest wymagana.
Czy agent potrafi wyświetlać warianty produktu#
Tak, warianty trafiają do karty produktu jako cechy: rozmiar, kolor, objętość. Wybór konkretnego wariantu kupujący dokonuje w koszyku Shopify.
Co z obsługą wielu walut#
Agent wyświetla ceny w walucie katalogu, którą określa podczas indeksowania. Wielowalutowość Shopify działa dalej, po stronie koszyka i płatności.
Czy agent będzie znał stany magazynowe#
Dostępność jest pobierana w momencie analizy. Dla produktów, które często się wyczerpują, uruchamiaj analizę częściej lub dodaj do warunków informację, że dostępność jest potwierdzana podczas składania zamówienia.
Czy widżet wpływa na szybkość sklepu#
Skrypt ładuje się asynchronicznie i nie blokuje renderowania. Praktycznie nie wpływa to na wskaźniki Core Web Vitals.