Разработка сайта на WordPress для оптовой торговли бьюти-материалами

Производитель материалов для нейл-студий «СИА БЬЮТИ» развивает собственную торговую марку Voice of Kalipso и активно наращивает оптовые поставки. Но оптовые клиенты терялись среди розничных запросов, а менеджеры тратили время на ручную фильтрацию заявок.

Эту проблему решила разработка сайта на WordPress: мы запустили отдельный B2B-лендинг с мгновенным доступом к прайс-листам, заказным бланкам и интерактивным палитрам. Спроектировали логичную структуру, оптимизировали «тяжёлые» медиафайлы и настроили систему управления так, чтобы команда могла обновлять документы и новости без привлечения разработчиков. Итог — чистый поток оптовых лидов и полная автономия менеджеров в работе с контентом.

Компания «СИА БЬЮТИ — производитель и дистрибьютор профессиональных материалов для ногтевого сервиса. Компания развивает собственную торговую марку Voice of Kalipso и сотрудничает с известными производителями. 

Клиенту требовался ресурс для коммуникации с оптовыми клиентами. При этом не хотелось объединять опт и розницу на одном сайте: разные аудитории, разные сценарии покупки, разные условия работы. Чтобы не усложнять пользовательский путь и не смешивать сообщения, мы предложили создать отдельный лендинг, заточенный под задачи B2B.

WordPress

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

• Разработать уникальный дизайн лендинга, сверстать и интегрировать его с WordPress, чтобы сайт работал быстро, стабильно и был удобен для дальнейшего наполнения.
• Адаптировать все страницы под мобильные устройства и популярные браузеры. 
• Разместить и структурировать стартовый контент: тексты, описания товаров, сертификаты, палитры цветов, новости.
• Настроить сервер на хостинге клиента и обеспечить техническую готовность площадки к запуску.

Выстроили структура лендинга согласно логике принятия решения оптовым клиентом:

• Первый экран сразу дает понять, что это лендинг создан для B2B-клиентов. Крупное фото продукции собственной марки Voice of Kalipso сразу привлекает внимание и задает профессиональный тон. Рядом кнопка «Оставить заявку» для тех, кто уже готов к сотрудничеству. 

• Блок «О бренде» рассказывает о Voice of Kalipso, показываем ассортимент. Здесь же разместили ссылку на розничный сайт для тех, кто случайно попал на оптовый. Это снимает путаницу и перенаправляет нецелевую аудиторию.

• Блок «Оптовые продажи» — центральный раздел сайта. Здесь разместили четыре карточки с возможностью скачать: прайс-лист, бланки для крупного и мелкого опта, каталог. Клиент изначально не планировал размещать на лендинге полноценный каталог из сотен продуктов с ценами. Поддерживать актуальность такой информации на сайте требует больших затрат ресурсов. Вместо этого мы дали оптовикам возможность сразу скачать актуальные документы. Для менеджера процесс обновления стал максимально простым: достаточно выгрузить актуальный прайс из 1С и загрузить его на сайт. Это занимает пару кликов и не требует привлечения разработчиков.

• Палитры — интерактивный блок с табами по категориям продукции (гель-лаки, гели, полигели, базы, материалы для дизайна и т.д.). Оптовику важно видеть ассортимент в одном месте, без необходимости переходить в каталог.

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

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

Для воплощения визуальной концепции применили несколько приёмов, ориентированных на восприятие оптовых клиентов:

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

Отдельное внимание уделили технической реализации и пользовательскому опыту:

• Полная адаптивность — сайт корректно отображается на мобильных, планшетах и десктопах. Верстка сохраняет логику блоков, а интерактивные элементы (кнопки, формы, табы палитр) остаются удобными для нажатия на любом экране. Учитывая, что владельцы салонов и закупщики часто ищут поставщиков «в перерывах между клиентами», мобильная версия была в приоритете.
• Кроссбраузерная совместимость — провели тестирование в Chrome, Safari, Firefox и Яндекс.Браузере, чтобы исключить сбои в отображении и обеспечить стабильную работу для всех пользователей.
• Модульная вёрстка под WordPress — дизайн реализован так, чтобы контент-менеджер мог самостоятельно обновлять тексты, фото и файлы, не нарушая визуальную целостность и скорость загрузки.

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

Заполнили сайт информацией от клиента. Загрузили актуальные формы документов для крупного и мелкого опта, прайс-листы, каталоги. Всё доступно для скачивания в один клик.

В разделе «Палитры» разместили фотографии оттенков по категориям (гель-лаки, гели, полигели, базы, дизайн). Чтобы блок не превратился в «тяжёлый» альбом, изображения предварительно обработали: сжали без потери визуального качества, перевели в современный формат WebP и настроили отложенную загрузку (lazy loading). Страница с палитрами загружается быстро, даже при большом количестве фото. Заказчик может спокойно листать и выбирать, без зависаний и долгих ожиданий.

Для раздела «Новости» подготовили структуру для регулярных обновлений: новинки ассортимента, акции, изменения в условиях работы. Это показывает, что бренд развивается и держит партнёров в курсе.

Всё наполнение сделано с расчётом на то, что контент-менеджер клиента сможет самостоятельно добавлять новые материалы, не обращаясь к разработчикам.

Базовая структура WordPress (страницы и стандартные записи) не всегда отвечает задачам B2B-лендинга. Чтобы обеспечить чёткую навигацию, корректные хлебные крошки и исключить путаницу при наполнении, мы создали отдельные типы записей под разделы: «Новости», «Партнеры» и «Сертификаты». 

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

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

Чтобы сайт работал стабильно и безопасно, провели комплекс технических работ на стороне хостинга:

• Настройка сервера: обновили конфигурацию под требования WordPress и плагинами, которые используются на лендинге. Это дало запас производительности на случай роста трафика.
• Безопасность: установили SSL-сертификат, настроили базовую защиту от спама в формах и несанкционированного доступа.
• Резервное копирование: настроили автоматическое создание бэкапов, чтобы в случае сбоя можно было быстро восстановить сайт без потери данных.
• Кэширование и минификация: включили кэширование страниц, сжали CSS и JS-файлы. Это ускорило загрузку и снизило нагрузку на сервер. 

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

• Развели потоки оптовиков и розницы. Отдельный лендинг решил проблему смешения аудиторий. 
• Автоматизировали выдачу документов. Оптовые клиенты могут самостоятельно скачать прайс-листы и бланки в любой момент. 
• Обеспечили скорость при «тяжёлом» контенте. Даже при большом количестве фотографий в палитрах сайт загружается быстро благодаря оптимизации изображений и настройке кэширования.
• Дали клиенту полную автономию в управлении. Контент-менеджеры «СИА БЬЮТИ» могут самостоятельно добавлять новости, загружать свежие прайсы и обновлять сертификаты. 

В сжатые сроки клиент получил а полноценный канал привлечения оптовых партнёров. Лендинг получился стильным, лаконичным и быстрый. Он удобен как для закупщиков, так и для работы команды «СИА БЬЮТИ».