Як встановити агента на Shopify
Куди вставити код у тему Shopify, як агент читає каталог магазину, що робити з кошиком та оплатою та як перевірити встановлення.
Shopify вже має каталог у машиночитному вигляді, тому агент збирає товари точніше, ніж будь-де інде: ціни, варіанти, наявність та фотографії надходять безпосередньо з магазину.
Крок 1. Вставте код у тему#
- В адмінці Shopify відкрийте «Онлайн-магазин» → «Теми».
- Біля активної теми натисніть … → «Редагувати код».
- У списку файлів знайдіть
layout/theme.liquid. - Вставте рядок коду з кабінету безпосередньо перед закриваючим тегом
</body>. - Збережіть.
Альтернатива без редагування теми: «Онлайн-магазин» → «Налаштування» → «Власний код» або будь-який застосунок для вставки скриптів. Результат той самий.
<!-- 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 це «Налаштування» → «Оформлення замовлення» → «Сторінка статусу замовлення» → «Додаткові скрипти». Фрагмент з підстановкою номера замовлення та суми лежить у кабінеті, у розділі «Віджет і посилання».
Товар потрапляє до кошика, не перериваючи розмову#
Тут Shopify розкривається краще за інші платформи. Агент показує картки товарів з фотографією, ціною та кнопкою, але кнопка не просто веде на сторінку — вона кладе товар до кошика магазину.
Працює це так: у посиланні товару Shopify є ідентифікатор варіанта, агент передає його вашому ж кошику через штатний інтерфейс /cart/add.js. Сторінка не перезавантажується, діалог не переривається, покупець бачить коротке підтвердження і продовжує вибирати. Товар при цьому вже в кошику Shopify — з усіма вашими правилами знижок, податків та доставки.
Якщо варіанта в посиланні немає, агент відкриває картку товару, і покупець додає його сам. Нічого не ламається, просто на один клік більше.
Коли людина готова, кнопка «Перейти до оформлення» веде до /cart, де все вже зібрано. Далі — звичайна каса Shopify.
І окремо про контекст: агент читає структуровані дані сторінки, на якій відкрито чат. Покупець дивиться конкретний товар і запитує «є в розмірі L?» — агент розуміє, про що йдеться, без перепитувань.
- Відкрийте магазин в інкогніто, дочекайтеся кнопки чату.
- Запитайте про товар за назвою — має з'явитися картка з ціною.
- Натисніть «Перейти до оформлення» — має відкритися кошик Shopify.
- Оформіть тестове замовлення та переконайтеся, що покупка відмітилася у «Заявках».
Чат у тон вітрині#
Тема Shopify задає настрій всьому магазину, і чат не повинен з нього випадати. У налаштуваннях віджета три варіанти: світла, темна та «як у відвідувача», яка слідує за налаштуваннями пристрою покупця.
Для магазинів з темною темою встановлюйте темну жорстко, для світлих — світлу. Акцентний колір кнопок залишається вашим в обох випадках.
Крок 4. Перевірте#
Поширені проблеми#
Віджет зник після зміни теми. Код живе у файлі теми. Зміна або оновлення теми стирає правку — вставте код заново або використовуйте Custom code, який від теми не залежить.
Каталог зібрався не повністю. Обхід бере товари з публічних сторінок. Приховані від каталогу та чернетки не потрапляють, це правильно.
Ціни в каталозі застаріли. Запустіть аналіз сайту заново, він оновить ціни та наявність за наявними картками.
Віджет конфліктує із застосунком чату. Залиште один чат: два вікна в одному куті заважають одне одному і плутають покупця.
Поширені запитання#
Чи потрібен застосунок із Shopify App Store#
Ні. Агент підключається одним рядком коду, застосунок встановлювати не потрібно.
Чи вміє агент показувати варіанти товару#
Так, варіанти потрапляють у картку як характеристики: розмір, колір, об'єм. Вибір конкретного варіанта покупець робить у кошику Shopify.
Як бути з кількома валютами#
Агент показує ціни у валюті каталогу, яку визначає під час обходу. Мультивалютність Shopify працює далі, на стороні кошика та оплати.
Чи знатиме агент про залишки#
Наявність береться на момент аналізу. Для товарів, які часто закінчуються, запускайте аналіз частіше або додайте в умови рядок про те, що наявність уточнюється під час оформлення.
Чи впливає віджет на швидкість магазину#
Скрипт завантажується асинхронно і не блокує відтворення. На метрики Core Web Vitals це практично не впливає.