Как да инсталирате агента в Shopify
Къде да поставите кода в темата на Shopify, как агентът чете каталога на магазина, какво да правите с количката и плащането и как да проверите инсталацията.
Shopify вече разполага с каталог в машинночетим вид, затова агентът събира информация за продуктите по-точно отвсякъде другаде: цени, варианти, наличност и снимки идват директно от магазина.
Стъпка 1. Поставете кода в темата#
- В административния панел на Shopify отворете Online Store → Themes.
- Към активната тема натиснете … → Edit code.
- В списъка с файлове намерете
layout/theme.liquid. - Поставете реда код от акаунта си точно преди затварящия таг
</body>. - Запазете.
Алтернатива без редакция на темата: Online Store → Preferences → Custom code или всяко приложение за вмъкване на скриптове. Резултатът е същият.
<!-- Commerce Agents -->
<script src="https://comag.vibevox.pro/widget.js" data-slug="your-slug" async></script>
</body>
</html>Вземете точния ред от акаунта си с бутона „Копирай код“: в него вече е въведен адресът на вашия магазин.
Стъпка 2. Съберете каталога#
В настройките посочете адреса на магазина и стартирайте анализ. Обхождащият робот на Shopify чете структурираните данни за продуктите: име, цена, валута, наличност, описание и снимки. Вариантите (размери, цветове) попадат в продуктовата карта като характеристики.
Повторен анализ актуализира цените и наличността. Стартирайте го след големи промени в асортимента: агентът не се свързва директно с вашата база данни, а работи със събрания каталог.
Стъпка 3. Оставете плащането на магазина#
В Shopify не е необходимо да включвате плащане в чата. Правилната схема е:
- В настройките на магазина посочете линк към количката — обикновено
https://your-domain/cart. - Агентът подбира продукт, показва продуктова карта и с бутон води купувача към количката на Shopify.
- Оформянето и плащането протичат по обичайния начин, с всички ваши правила за доставка и данъци.
За да виждате кои диалози завършват с покупка, поставете фрагмент от пиксела за покупка на страницата за благодарност. В Shopify това е Settings → Checkout → Order status page → Additional scripts. Фрагментът с автоматично попълване на номера на поръчката и сумата е наличен в акаунта, в раздела „Уиджет и връзка“.
Продуктът попада в количката, без да прекъсва разговора#
Тук Shopify се разкрива по-добре от останалите платформи. Агентът показва продуктови карти със снимка, цена и бутон, но бутонът не просто води до страницата — той добавя продукта в количката на магазина.
Това работи така: в линка на продукта в Shopify има идентификатор на вариант, агентът го предава на вашата количка чрез стандартния интерфейс /cart/add.js. Страницата не се презарежда, диалогът не се прекъсва, купувачът вижда кратко потвърждение и продължава да избира. Продуктът при това вече е в количката на Shopify — с всички ваши правила за отстъпки, данъци и доставка.
Ако няма вариант в линка, агентът отваря продуктовата карта и купувачът я добавя сам. Нищо не се разваля, просто е едно кликване повече.
Когато човекът е готов, бутонът „Към поръчка“ води към /cart, където всичко вече е събрано. Нататък — обичайната каса на Shopify.
И отделно за контекста: агентът чете структурираните данни на страницата, на която е отворен чатът. Купувачът разглежда конкретен продукт и пита „има ли го в размер L?“ — агентът разбира за какво става въпрос, без да препитва.
- Отворете магазина в инкогнито режим, изчакайте бутона за чат.
- Попитайте за продукт по име — трябва да се появи продуктова карта с цена.
- Натиснете „Към поръчка“ — трябва да се отвори количката на Shopify.
- Оформете тестова поръчка и се уверете, че покупката е отбелязана в „Заявки“.
Чат в тон с витрината#
Темата на Shopify задава настроението на целия магазин, и чатът не бива да излиза от този тон. В настройките на уиджета има три варианта: светла, тъмна и „като на посетителя“, която следва настройките на устройството на купувача.
За магазини с тъмна тема задайте тъмна твърдо, за светли — светла. Акцентният цвят на бутоните остава ваш и в двата случая.
Стъпка 4. Проверете#
Чести проблеми#
Уиджетът изчезна след смяна на темата. Кодът се намира във файла на темата. Смяната или обновяването на темата изтрива промяната — поставете кода отново или използвайте Custom code, който не зависи от темата.
Каталогът не е събран изцяло. Обхождането взима продукти от публични страници. Скритите от каталога и черновите не попадат, това е правилно.
Цените в каталога са остарели. Стартирайте анализа на сайта отново, той ще актуализира цените и наличността по съществуващите продуктови карти.
Уиджетът конфликтва с приложение за чат. Оставете само един чат: два прозореца в един ъгъл си пречат и объркват купувача.
Често задавани въпроси#
Необходимо ли е приложение от Shopify App Store#
Не. Агентът се свързва с един ред код, не е необходимо да инсталирате приложение.
Може ли агентът да показва варианти на продукта#
Да, вариантите попадат в продуктовата карта като характеристики: размер, цвят, обем. Изборът на конкретен вариант купувачът прави в количката на Shopify.
Какво се случва с няколко валути#
Агентът показва цени във валутата на каталога, която определя при обхождането. Мултивалутността на Shopify работи по-нататък, от страна на количката и плащането.
Ще знае ли агентът за наличностите#
Наличността се взима към момента на анализа. За продукти, които често свършват, стартирайте анализа по-често или добавете в условията ред, че наличността се уточнява при поръчка.
Влияе ли уиджетът на скоростта на магазина#
Скриптът се зарежда асинхронно и не блокира рендирането. На метриките Core Web Vitals това практически не влияе.