Как установить агента на 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="ваш-слаг" async></script>
</body>
</html>Точную строку берите в кабинете кнопкой «Скопировать код»: в ней уже подставлен адрес вашей витрины.
Шаг 2. Соберите каталог#
В настройках укажите адрес магазина и запустите анализ. Обходчик Shopify читает структурированные данные товаров: название, цену, валюту, наличие, описание и фотографии. Варианты (размеры, цвета) попадают в карточку как характеристики.
Повторный анализ обновляет цены и наличие. Запускайте его после крупных изменений ассортимента: агент не подключается к вашей базе напрямую, а работает с собранным каталогом.
Шаг 3. Оставьте оплату магазину#
На Shopify оплату в чате включать не нужно. Правильная схема:
- В настройках магазина укажите ссылку на корзину — обычно
https://ваш-домен/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 это практически не влияет.