Как подключить онлайн-примерку на сайт

Онлайн-примерка на сайт — это виджет, который показывает вашу одежду прямо на фотографии покупателя: он открывает карточку товара, загружает своё фото и через полторы минуты видит себя в этой вещи. Не манекен, не модель из каталога, а он сам. В этом уроке разберём по шагам, как подключить примерочную к интернет-магазину: где взять ключ, куда вставить код, что делать владельцам Битрикса, WordPress, Тильды и InSales, сколько это стоит и как читать статистику примерок. Кода писать не придётся — на большинстве платформ хватает одной строки в шаблон.

lk.vibemarketolog.ru/fitting

Что такое онлайн-примерка для сайта и когда она нужна

Главная причина, по которой человек закрывает карточку товара и уходит, звучит одинаково у всех магазинов одежды: «непонятно, как это будет смотреться на мне». Фотография с модели ростом 178 и размером XS отвечает на вопрос «как вещь выглядит», но не отвечает на вопрос «как она выглядит на мне». Дальше два варианта: покупатель не заказывает вовсе, либо заказывает три размера и два из них возвращает — а доставка и обратная логистика ложатся на магазин.

Онлайн-примерка закрывает именно этот разрыв. Механика простая: рядом с кнопкой «В корзину» появляется кнопка «Примерить на себе». Покупатель нажимает её, загружает своё фото — обычный снимок в полный рост, — и нейросеть переодевает его в вещь из вашего каталога. Лицо, поза, фон остаются его собственными, меняется только одежда. Результат он видит там же, в карточке товара, без перехода на сторонние сайты и без регистрации.

Виртуальная примерочная давно есть у крупных маркетплейсов, но там это часть собственной разработки на десятки миллионов. Для обычного интернет-магазина такая функция была недоступна: нужны были ML-инженеры, серверы с видеокартами и месяцы работы. Сейчас всё это уже собрано и работает как сервис — вы платите за фактические примерки, а не за разработку.

Кому онлайн-примерка даёт эффект сразу:

• магазинам одежды, где вещь «сидит» по-разному на разных фигурах — платья, костюмы, верхняя одежда;
• тем, у кого высокий процент возвратов «не подошло по фасону» (не по размеру, а именно по внешнему впечатлению);
• магазинам с дорогим трафиком — когда каждый переход из Яндекс Директа стоит денег, и терять посетителя на этапе сомнения обидно;
• брендам, которые продают через соцсети и Telegram — там примерка работает прямо в переписке.

Для кого этот инструмент: пять реальных сценариев

Небольшой магазин женской одежды на Битриксе

Каталог 300–800 позиций, трафик из поиска и Директа, конверсия в корзину 2–3 %. Задача — не наращивать трафик (он дорогой), а вытащить больше заказов из тех, кто уже пришёл. Примерка ставится модулем через маркетплейс Битрикса, кнопка появляется в карточке товара автоматически. Правки шаблона не нужны.

Бренд на WordPress + WooCommerce

Плагин ставится как обычный: загрузили zip, включили, вписали ключ. В настройках выбирается, в каких категориях показывать кнопку и где именно её ставить — под кнопкой корзины, над описанием или в произвольном месте через шорткод.

Магазин на Тильде или другом конструкторе

Здесь нет плагинов, но есть блок «произвольный HTML». Скрипт добавляется один раз в настройки сайта, а кнопка — блоком в карточку товара. Работает так же, как на «взрослых» платформах.

Продажи через Telegram

Если магазин живёт в мессенджере и сайта фактически нет, примерка подключается ботом: покупатель присылает фото, выбирает вещь из каталога и получает результат в переписке. Тот же баланс, та же цена за примерку.

Крупный ритейл со своими требованиями к данным

Когда служба безопасности не разрешает отдавать фотографии покупателей на сторону, ставится вариант со своим сервером: снимки остаются на вашей инфраструктуре, к нам уходит только ссылка на время создания примерки. Так контур персональных данных не покидает периметр магазина.

Как подключить онлайн-примерку на сайт: пошагово

Весь путь занимает один вечер, а если у вас Битрикс или WooCommerce — минут двадцать. Порядок такой.

1. Пополните рублёвый баланс в кабинете. Примерка списывается с общего баланса Вайб-Маркетолога, отдельного счёта заводить не нужно. Подписки нет: не было примерок — не было и списаний.
2. Откройте раздел «Примерочная» по адресу lk.vibemarketolog.ru/fitting. Это отдельная страница кабинета, не вкладка генераций: у неё своя статистика и свои настройки.
3. Впишите домены магазина в поле «Домены вашего магазина» — через запятую, например shop.ru, m.shop.ru. Поддомены разрешаются автоматически. Это не формальность: ключ будет работать только на перечисленных адресах, поэтому даже если код со страницы скопируют на чужой сайт, ваш баланс никто не потратит.
4. Нажмите «Получить код для сайта». Кабинет выдаст публичный ключ и готовый фрагмент — одну строку подключения виджета и пример кнопки. Ключ можно смотреть и копировать в любой момент, он не одноразовый.
5. Вставьте строку подключения в шаблон сайта — туда же, где стоят остальные скрипты (обычно перед закрывающим тегом body). Она одна на весь магазин.
6. Добавьте кнопку в карточку товара. Кнопке нужен специальный атрибут и данные вещи: адрес картинки товара и его название. На большинстве платформ это переменные шаблона, которые уже есть в карточке.
7. Проверьте на любом товаре. Откройте карточку, нажмите свою кнопку, загрузите фото. Первая примерка займёт около полутора минут — столько нейросеть рисует результат. В кабинете сразу появится строка в блоке «Последние примерки», а в статистике — расход.
8. Настройте лимиты, если нужно. По умолчанию стоит потолок расхода в сутки, ограничение на одного посетителя и защита от всплеска нагрузки — эти значения можно менять под свой трафик.

Что именно видит покупатель

Покупатель нажимает кнопку и попадает в окно примерки. Ему предлагают загрузить фотографию — можно снять прямо на телефон. Сервис проверяет снимок: он должен быть в полный рост, достаточно чёткий и без посторонних людей в кадре. Дальше идёт ожидание с индикатором, а затем результат — та же фотография, но в выбранной вещи. Результат можно скачать или сразу положить товар в корзину.

Фотографии покупателя привязываются к его браузеру, а не к аккаунту: регистрироваться не нужно. При следующей примерке в вашем же магазине снимок уже сохранён, и вторая вещь меряется в один клик — без повторной загрузки. Это важная деталь для конверсии: первая примерка стоит покупателю усилий, вторая и третья — нет.

Как выглядит примерка изнутри: живое демо

Чтобы не подключать вслепую, на странице онлайн-примерки для сайта есть демонстрационный блок «Попробуйте прямо здесь». Это ровно тот же механизм, который заработает у вас, только фотографии моделей наши, а вещи взяты из каталога партнёра.

vibemarketolog.ru/fitting

Выбираете, на ком меряем, выбираете вещь — и получаете результат. Обратите внимание на то, что сохраняется: лицо, причёска, поза, пропорции фигуры, обувь. Меняется только одежда. Именно это отличает примерку от «нарисуй девушку в платье»: покупатель узнаёт себя, а не смотрит на постороннего человека.

vibemarketolog.ru/fitting

Разбор способов установки: выберите свой

В кабинете, в блоке «Как установить на вашу платформу», собраны все варианты подключения. Разберём каждый — что он даёт и кому подходит.

1С-Битрикс: готовый модуль

Модуль ставится через маркетплейс, настраивается в админке: ключ, категории товаров, положение кнопки. Виджет подключается штатным обработчиком платформы, поэтому обновление шаблона сайта его не снесёт — типичная беда самописных вставок. Раз в сутки модуль спрашивает у сервиса, не вышла ли новая версия, и показывает уведомление в админке, если пора обновиться.

WordPress и WooCommerce: плагин

Плагин с настройками: ключ, категории товаров, положение кнопки относительно корзины, шорткод для произвольного места. Ставится обычной загрузкой архива через админку WordPress. Как и у Битрикса, есть проверка версий.

Тильда и конструкторы: скрипт плюс блок

Скрипт добавляется один раз в настройки сайта, кнопка — блоком с произвольным HTML в карточке товара. Ограничение конструкторов в том, что название и картинку товара обычно приходится указать вручную для каждого блока или использовать переменные, если платформа их поддерживает.

InSales, Ecwid, Shopify: вставка в шаблон карточки

У этих платформ есть собственные переменные шаблона карточки товара — название и главное изображение подставляются автоматически. Вставка делается один раз в шаблон, дальше кнопка появляется на всех товарах.

Telegram-бот

Отдельный сценарий для тех, кто продаёт в мессенджере. Покупатель присылает боту фото, выбирает вещь из каталога и получает примерку в переписке. Работает на том же балансе и по той же цене.

Свой сервер

Вариант для магазинов с жёсткими требованиями к персональным данным. Фотографии покупателей остаются на вашей инфраструктуре, к сервису уходит только временная ссылка. Готовые серверы-посредники есть в двух вариантах — на Node.js и на PHP.

Исходный код

Виджет, модуль Битрикса, плагин WooCommerce, бот Telegram и оба варианта сервера-посредника лежат в одном репозитории с примерами и инструкциями. Доступ выдаётся по запросу из кабинета — кнопка «Запросить доступ» в том же блоке.

Статистика: как понять, что примерка окупается

Наверху страницы «Примерочная» четыре показателя за последние 30 дней:

• Примерок — сколько раз покупатели пользовались виджетом. Это мера интереса: если цифра близка к нулю при живом трафике, кнопку просто не видно, и её стоит поднять выше в карточке.
• Покупателей — сколько уникальных человек мерили вещи. Разница между этой цифрой и числом примерок показывает, сколько вещей в среднем меряет один посетитель. Два и больше — отличный знак: человек вовлёкся.
• Примерка → корзина — сколько примерок закончились добавлением товара в корзину. Это главный показатель окупаемости: сравните его с обычной конверсией карточки в корзину.
• Расход — сколько рублей списано за период, с указанием цены за примерку.

Ниже — блок «Последние примерки»: что именно видели покупатели и что после этого попало в корзину. Полезно смотреть в первые дни после запуска — сразу видно, какие вещи меряют чаще всего и какие категории стоит вывести в промо.

Простая арифметика окупаемости: при цене примерки 19 ₽ и средней марже с заказа, скажем, 1500 ₽ вам достаточно, чтобы одна примерка из семидесяти девяти превратилась в заказ. На практике конверсия примерки в корзину заметно выше — люди нажимают «Примерить» уже будучи заинтересованными.

Сколько стоит онлайн-примерка для сайта

Оплата поштучная: списывается за каждую завершённую примерку с рублёвого баланса магазина. Подписки, абонентской платы и минимального платежа нет. Если примерок не было — не было и расхода.

Отдельно стоит сказать про неудачные примерки. Каталожные снимки магазина одежды бывают откровенными — корсет, открытые плечи, купальник, — и фильтр нейросети иногда отказывается их обрабатывать. Чтобы для магазина это не выглядело поломкой, сервис распознаёт такой отказ и автоматически повторяет примерку на резервной модели. Второго списания при этом нет: разницу в себестоимости берём на себя. Если не помогло и это, деньги возвращаются на баланс целиком.

Что происходит с фотографиями покупателей

Вопрос, который задают в первую очередь — и правильно делают. Как устроено хранение:

• фотография нужна только для того, чтобы показать на ней одежду, и используется исключительно для этого;
• снимок и результат хранятся ограниченное время (по умолчанию 30 дней), после чего автоматически удаляются;
• покупателя не заставляют регистрироваться: узнавание идёт по метке в его браузере;
• для покупателя есть отдельная понятная страница «Что происходит с вашей фотографией» — ссылка на неё стоит прямо в окне примерки;
• если правила вашей компании не допускают передачи фото наружу, есть вариант со своим сервером, где снимки не покидают вашу инфраструктуру.

Частые ошибки и как их избежать

• Забыли добавить домен. Ключ работает только на перечисленных адресах. Если кнопка нажимается, а окно не открывается — первым делом проверьте, вписан ли домен магазина, включая версию для мобильных, если она живёт на отдельном адресе.
• Кнопку поставили в самый низ карточки. До неё не доскроллят. Место кнопки — рядом с «В корзину», где принимается решение.
• В кнопку передали картинку низкого качества. Нейросеть рисует вещь по её фотографии: если в атрибут ушёл эскиз 200 пикселей шириной, результат будет мутным. Передавайте главное изображение товара в нормальном разрешении.
• Товар на фото сфотографирован под углом или сложен. Лучше всего примеряются вещи, снятые на модели или на ровном фоне целиком. Скомканный свитер на столе распознаётся хуже.
• Не предупредили покупателя, какое фото нужно. Подпись «фото в полный рост, целиком в кадре» рядом с кнопкой заметно снижает число неудачных загрузок.
• Поставили примерку на всё подряд. На аксессуарах, украшениях и обуви эффект слабее, чем на одежде. Начните с категорий, где посадка решает: платья, костюмы, верхняя одежда.
• Не следят за суточным лимитом. Потолок расхода защищает от неожиданного счёта, но если трафик вырос, а лимит остался прежним, часть покупателей увидит отказ. Проверяйте цифру расхода в первые недели.

Частые вопросы

Сколько стоит онлайн-примерка для сайта?

19 ₽ за одну примерку, списывается с рублёвого баланса магазина. Подключение, ключ, модуль Битрикса и плагин WooCommerce — бесплатно. Абонентской платы нет.

Нужен ли программист, чтобы подключить примерочную?

Для 1С-Битрикса и WooCommerce — нет: там ставятся готовые модуль и плагин, всё настраивается в админке. Для остальных платформ нужно один раз вставить строку в шаблон и добавить кнопку в карточку товара — это работа на пятнадцать минут для того, кто умеет редактировать шаблон.

Сколько ждёт покупатель?

Первая примерка — примерно полторы минуты. Вторую вещь тот же покупатель меряет без повторной загрузки фото, поэтому дальше процесс идёт быстрее.

Что будет, если кто-то скопирует мой код на чужой сайт?

Ничего: ключ привязан к вашим доменам, и на чужом адресе он просто не обслуживается. Ваш баланс потратить со стороны нельзя.

Списываются ли деньги за неудачную примерку?

Нет. При сбое сумма возвращается на баланс автоматически. Если нейросеть отказалась обрабатывать откровенный каталожный снимок, сервис сам повторяет примерку на резервной модели — без второго списания с магазина.

Где хранятся фотографии покупателей и долго ли?

Снимок и результат хранятся ограниченное время (по умолчанию 30 дней) и затем удаляются. Покупателю доступна отдельная страница с объяснением, зачем нужно фото и как его удалить. Для магазинов с жёсткими требованиями есть вариант со своим сервером — тогда фотографии не покидают вашу инфраструктуру.

Чем это отличается от примерки в кабинете Вайб-Маркетолога?

Инструмент в кабинете — для вас: вы сами примеряете вещи на моделях, чтобы получить карточки товара. Онлайн-примерка на сайт — для ваших покупателей: они мерят вещи на себе в вашем магазине. Это разные продукты, и подключаются они по-разному.

Как обновления доходят до моего магазина?

Улучшения самого сервиса — качество примерки, проверки, автоматический повтор при отказе — приходят ко всем сразу, ничего делать не нужно. Виджет обновляется при следующей загрузке страницы. Модули для Битрикса и WooCommerce обновляются вручную, но они сами раз в сутки проверяют версию и показывают уведомление в админке, когда выходит новая.

Можно ли посмотреть, как это работает, до подключения?

Да, на странице онлайн-примерки есть живое демо: двенадцать вещей и две фотографии, все комбинации показываются мгновенно и бесплатно.

Советы напоследок

• Начните с одной категории — там, где посадка решает больше всего. Соберите статистику за две недели, потом расширяйте.
• Поставьте кнопку рядом с «В корзину» и назовите её по-человечески: «Примерить на себе» работает лучше, чем «Виртуальная примерочная».
• Следите за показателем «Примерка → корзина» — он честнее любых догадок показывает, окупается ли инструмент на ваших товарах.
• Сделайте карточки товара пригодными для примерки: чем чище и крупнее снимок вещи, тем точнее результат. Если снимков не хватает, их можно снять без студии — об этом есть отдельный урок про ИИ-фотосессию товара.
• Если магазин собирается на конструкторе с нуля, посмотрите урок о сборке лендинга в AI-конструкторе — примерку туда можно поставить сразу.
• Страницы с примеркой хорошо работают на поиск: это уникальная функциональность, за которой приходят по запросам вроде «примерить платье онлайн». Как под это оптимизироваться — в уроке про SEO и AEO в 2026 году.
• Что именно вышло в этом релизе и какие платформы поддержаны — в новости «Онлайн-примерка для сайта магазина».

Подключить примерочную можно прямо сейчас: откройте раздел «Примерочная» в кабинете, впишите домены магазина и заберите код. Первую примерку на своём товаре вы увидите через полторы минуты после вставки.