Виртуальная примерочная: как подключить к сайту

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

lk.vibemarketolog.ru/fitting

Что такое виртуальная примерочная и когда она нужна

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

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

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

Для кого этот инструмент

Пять типичных ситуаций, в которых виртуальная примерочная на сайте окупается.

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

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

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

Магазин без программиста. Для 1С-Битрикс и WooCommerce готовы модули: ставятся из архива, настраиваются в админке, править код не нужно. Для Тильды, InSales, Ecwid и Shopify — короткие вставки в шаблон карточки, с которыми справится администратор сайта.

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

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

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

lk.vibemarketolog.ru/fitting

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

Если у вас 1С-Битрикс или WooCommerce

Шаги четыре и пять заменяются установкой готового модуля. Для Битрикса: распакуйте архив в каталог local/modules вашего сайта, откройте Marketplace, найдите «Онлайн-примерка для сайта» и установите. Дальше в настройках модуля впишите ключ и укажите разделы каталога, где нужна кнопка. Виджет подключается обработчиком, поэтому обновление шаблона сайта его не снесёт.

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

Одна тонкость для WooCommerce: если на сайте стоит кеширующий плагин с отложенной загрузкой скриптов, добавьте адрес нашего виджета в исключения. Иначе скрипт загрузится позже, чем покупатель нажмёт кнопку, и ничего не произойдёт.

Если у вас Тильда, InSales, Ecwid или Shopify

В Тильде строка вставляется в «Настройки сайта — Ещё — HTML-код внутрь head», а кнопка добавляется блоком с произвольным HTML прямо в карточку товара. Проверять надо в режиме просмотра: в редакторе Тильды скрипты не выполняются, и кнопка будет выглядеть мёртвой, хотя с ней всё в порядке.

В InSales строка идёт в layout.liquid перед закрывающим body, а кнопка — в product.liquid. Изображение вещи подставляется переменной платформы, чтобы виджет знал, какую именно вещь мерить. В Ecwid и Shopify принцип тот же: скрипт в подвал, кнопка в шаблон карточки. Если доступа к вёрстке нет вовсе, скрипт можно подключить через менеджер тегов.

Разбор настроек: что важно, а что можно не трогать

Настроек немного, и три из них напрямую защищают ваш баланс. Разберём каждую.

Домены магазина

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

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

Суточный потолок расхода

Максимум, который примерочная может потратить за сутки. По умолчанию 1 000 ₽. Достигнут — примерка останавливается до завтра, и баланс дальше не тратится. Это защита не столько от накрутки, сколько от неожиданностей: всплеск трафика с рекламы, чей-то скрипт, любопытный конкурент.

Как выбрать значение: возьмите ожидаемое число примерок в сутки, умножьте на цену и добавьте запас процентов тридцать. Ставить потолок вплотную к ожиданию не стоит — в удачный день вы сами себе выключите инструмент в разгар продаж.

Примерок на одного покупателя в сутки

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

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

Срок хранения фотографий покупателя

По умолчанию 30 дней, настраивается от одного дня до года. Когда срок вышел, из базы пропадает строка, а с диска — картинка; занимается этим ночная процедура, поэтому забыть о ней невозможно.

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

Несколько ключей

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

Атмосфера кадра

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

Выключатель

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

Сколько стоит

Оплата только за состоявшуюся примерку, с рублёвого баланса магазина. Ни абонплаты, ни минимального объёма, ни платы за модули.

Прикидка на реальных числах. Магазин с тысячей посетителей в день и конверсией в примерку около пяти процентов — это примерно 50 примерок и 950 ₽ расхода в день. Если хотя бы две из них превратились в заказ со средним чеком 6 000 ₽, расход окупается втрое. У каждого магазина свои цифры, поэтому в кабинете и стоит счётчик «примерка → корзина»: считать нужно по своим данным, а не по чужим обещаниям.

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

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

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

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

19 ₽ за состоявшуюся примерку с рублёвого баланса. Подключение, модули и инструкции бесплатны, абонентской платы нет. Неудачная примерка не стоит ничего: деньги возвращаются автоматически.

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

Для 1С-Битрикс и WooCommerce не нужен: там готовые модули с настройками в админке. На Тильде, в InSales, Ecwid и Shopify достаточно двух вставок в шаблон, и обычно их делает тот же человек, который правит тексты на сайте. Если своей вёрстки под рукой нет, встраивание можно заказать: разовая работа от 15 000 ₽.

Сколько времени занимает одна примерка?

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

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

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

Виртуальная примерка работает только с одеждой?

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

Что если покупатель загрузит неподходящее фото?

Каждое фото проходит проверку ещё до того, как за него спишутся деньги: в кадре ожидается ровно один взрослый человек в одежде. Заведомо непригодное фото отклоняется с объяснением, и магазин за него не платит. Снимок в темноте, со спины или обрезанный по пояс даст плохой результат — об этом стоит написать прямо в окне загрузки.

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

Да, и это самый разумный первый шаг. Живая демонстрация есть и на странице примерочной, и в кабинете: выбираете покупателя и вещь, получаете результат. Никакой регистрации для этого не требуется.

Как понять, что примерочная приносит деньги?

Смотрите на конверсию «примерка → корзина» в кабинете и сравнивайте её с обычной конверсией карточки товара. Если она заметно выше — инструмент работает. Если нет, сначала переставьте кнопку ближе к «В корзину» и подождите неделю: чаще всего дело в месте кнопки, а не в самой примерке.

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

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

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