Вернуться к кейсам Кейс: сайт-каталог для производителя кунгов Hydracars на Битрикс24
О клиенте
Hydracars — российский производитель кунгов (надстроек) для пикапов из армированного стекловолокна. Компания работает во Всеволожском районе Ленинградской области (сп. Лесколово) и выпускает три группы продукции: кунги для пикапов (индивидуальные, универсальные, специализированные), передвижные мастерские на базе пикапов SOLLERS ST6 и переоборудование цельнометаллических фургонов.
Производство — полный цикл: от изготовления стеклопластиковых кузовов до металлообработки и собственного мебельного цеха. Компания регулярно участвует в отраслевых выставках: CTT2024, COMTRANS 2024, «Экология большого города — 2025», а также представляла продукцию на бизнес-форуме в Индии.
География поставок: Россия, Беларусь, Казахстан, Германия, Аргентина, Вьетнам, Сербия. Клиенты — сервисные службы, строительные и коммунальные организации, аварийные бригады, частные заказчики.
До запуска нового сайта Hydracars использовали устаревший веб-ресурс, который не отражал реальный масштаб производства и не работал как инструмент продаж. Для выхода на новый уровень компании требовался полноценный сайт-каталог с продуманной структурой, качественной презентацией продукции и технической базой для SEO-продвижения.
С чем пришли: 5 задач
1. Структурировать разрозненный каталог. На старом сайте продукция была свалена в общий список без категорий, фильтров и внятной навигации. Покупателю приходилось гадать, чем кунг HC-01 отличается от HC-01.1 и для какого шасси подходит конкретная модель.
2. Показать производственные компетенции. Компания проектирует и изготавливает сложные кастомные изделия, но старый сайт сводил это к нескольким фотографиям без пояснений. Не было информации о материалах, технологиях, этапах производства.
3. Сделать удобные карточки товаров. Отсутствовали характеристики, инструкции, фото- и видеоматериалы. Потенциальный заказчик не мог понять, что именно он покупает, не позвонив в отдел продаж.
4. Организовать канал для заявок. На старом сайте не было формы обратной связи — только телефон. Часть лидов терялась в нерабочее время.
5. Заложить фундамент под SEO. Предыдущий сайт не был проиндексирован по целевым запросам: отсутствовали мета-теги, семантическая разметка, адаптивная вёрстка и нормальные URL.
Решение 1. Архитектура и структура каталога
Проектирование началось не с дизайна, а с логики — как заказчик выбирает кунг или мастерскую? Анализ клиентского пути показал три принципиально разных сценария.
Первый: заказчик знает, что ему нужен кунг на конкретный пикап, но не определился с конфигурацией. Ему важны варианты исполнения — универсальный короб, специализированный под задачу или полностью кастомный проект. Второй: клиенту нужна готовая мастерская на колёсах, и он выбирает по типу оснащения — аварийно-сервисная, каналопромывочная или мастерская РВД. Третий: запрос на переоборудование существующего фургона — обшивка ЦМФ, установка сервисного оборудования, шиномонтаж.
На основе этих сценариев каталог получил трёхуровневую структуру:
- Кунги для пикапов → Индивидуальные, Универсальные, Специализированные — внутри каждой подкатегории карточки конкретных моделей (HC-01, HC-01.1, HC-01.2, HC-01.3).
- Мастерские на базе пикапа → Аварийно-сервисная (SOLLERS ST6), Каналопромывочная (SOLLERS ST6), РВД-мастерская (SOLLERS ST6).
- Переоборудование ЦМФ → Обшивка ЦМФ, Сервис-мастерская, Сервис РВД, Шиномонтаж.
Такая иерархия не просто группирует товары — она направляет посетителя по тому пути принятия решения, который естественен для его задачи. Каждая категория получила собственное визуальное оформление с иконкой-фотографией, а навигация построена так, что с любой страницы каталога можно вернуться на уровень выше без использования кнопки «Назад» в браузере.
Структура главной страницы поддержала эту логику: хиро-слайдер с крупными фотографиями продукции, блок из четырёх преимуществ (лизинг, доставка по РФ, ремонт, выгодные условия для партнёров) и три карточки-ссылки на основные разделы каталога. Посетитель получает ответ на вопрос «что здесь продают» за первые 5 секунд скролла.
Решение 2. Дизайн
Визуальная концепция построена на двух опорах: индустриальная эстетика и доверие к производителю. Тёмная шапка, контрастный оранжевый акцент на кнопках целевых действий и крупный белый шрифт на тёмном фоне в хиро-блоке — это читается как «серьёзная техника для серьёзных задач». При этом основной контент страниц — на светлом фоне с качественными фотографиями продукции, что даёт ощущение открытости: «смотрите, вот наши цеха, вот готовые машины».
Главная открывается полноэкранным слайдером с фотографиями кунгов на пикапах в реальных условиях эксплуатации — не студийные кадры, а машины на дороге, на объектах. Это принципиальное решение: покупатель спецтехники принимает решение не по глянцевой картинке, а по тому, как изделие выглядит после года эксплуатации.
Карточки категорий в каталоге решены как фотопревью с заголовком и списком подкатегорий — пользователь сразу видит, что внутри, и может перейти в нужный подраздел без лишнего клика.
На странице товара — классическая карточка с галереей, основным фото, блоком характеристик и вкладками: Описание, Характеристики, Фото и видео, Инструкции. Табы реализованы без перезагрузки страницы — контент подгружается динамически.
Адаптивная вёрстка проверена на разрешениях от 375 до 1440 пикселей. На мобильных устройствах меню сворачивается в гамбургер, карточки каталога перестраиваются в одну колонку, а табы на странице товара превращаются в вертикальный список с плавным скроллом к нужной секции.
Решение 3. Разработка и функционал
Сайт построен на «1С-Битрикс: Управление сайтом» с кастомным шаблоном, написанным под структуру каталога Hydracars. Штатные компоненты каталога доработаны: стандартный инфоблок «Товары» — это плоская таблица, а здесь потребовалась трёхуровневая иерархия с разной логикой отображения для каждого уровня.
Карточка товара получила четыре вкладки. Описание — текстовый блок с возможностью форматирования, вставки изображений и таблиц. Характеристики — структурированный набор «свойство → значение»: материал кузова (армированный стеклопластик), базовое шасси (SOLLERS ST6), тип оснащения, габаритные размеры, масса. Фото и видео — галерея с возможностью просмотра в полный экран, плюс встроенные видео с YouTube о работе мастерских в полевых условиях. Инструкции — загружаемые PDF-файлы с руководствами по монтажу и эксплуатации.
Форма заявки реализована в двух точках контакта: на каждой карточке товара (кнопка «Узнать цену по запросу») и отдельная форма в разделе контактов. Отправка идёт через встроенный почтовый механизм Битрикс24 с дублированием заявки в CRM компании. Добавлена защита Яндекс SmartCaptcha для отсечения спама.
Раздел «Новости» подключён к стандартному модулю Битрикс24 — администратор может публиковать пресс-релизы и фотоотчёты с выставок без привлечения разработчика. Лента на главной странице выводит последние две новости с фотографиями-превью.
На странице «О компании» размещён производственный фоторепортаж: цех металлообработки, участок формовки стеклопластика, готовые изделия на отгрузке. Это не просто иллюстрации — это доказательство полного цикла производства, о котором заявлено в тексте.
«Контакты» включают физический адрес, два телефона (московский +7 495 740-28-40 и мобильный +7 926 303-18-40), email, форму обратной связи и интерактивную Яндекс.Карту с меткой производства. По клику на телефон на мобильном устройстве сразу открывается звонилка.
Решение 4. Контент и наполнение
Контентная стратегия строилась вокруг трёх пластов текста, каждый из которых решает свою задачу.
Продуктовый слой — карточки товаров с техническими описаниями, написанными инженерами компании, а затем адаптированными для восприятия неподготовленным заказчиком. Для каждой модели прописаны: назначение (какую задачу решает), перечень совместимых шасси, ключевые характеристики в структурированном формате. Карточка «Решения для сервисных служб» детально описывает процесс проектирования кастомного кунга — от анализа требований заказчика до запуска в серию.
Имиджевый слой — страница «О компании» с рассказом о производственном цикле, контроле качества на каждом этапе и географии поставок в 7 стран. Текст поддерживается фотографиями цехов, что закрывает типичный страх заказчика спецтехники: «а не гаражная ли это сборка?».
Новостной слой — хроника участия в выставках. Это не только контент для SEO, но и социальное доказательство: компания представлена на ключевых отраслевых событиях — CTT, COMTRANS, «Экология большого города». Четыре новости с 2023 по 2026 год закрывают временной диапазон и показывают, что бизнес активен.
Все тексты проиндексированы — поисковые роботы видят полный контент страниц, включая содержимое табов в карточках товаров. Технически табы реализованы как секции одной страницы, а не как отдельные URL — сканирование одной карточки товара даёт поисковику весь объём информации.
Решение 5. SEO и техническая оптимизация
Поисковая оптимизация была не финальным этапом, а параллельным процессом, который шёл с момента проектирования структуры каталога. Ключевые решения:
ЧПУ (человеко-понятные URL). Все адреса — на транслите с осмысленными названиями разделов: /catalog/kungi-dlya-pikapov/kastomnye/, а не /catalog/category.php?id=14. Каждый уровень вложенности отражён в URL, что даёт поисковику понимание иерархии.
Иерархия заголовков. Каждая страница построена вокруг одного H1, совпадающего с названием категории или товара. Подзаголовки H2 и H3 структурируют контент внутри страницы. На продуктовых карточках H2 используются для названий табов, H3 — для блоков внутри описания.
Мета-теги. Для каждой страницы каталога и каждой карточки товара настроены индивидуальные Title и Description. Title строится по шаблону «[Название товара] — Hydracars» с учётом ограничения в 70 символов. Description — содержательный текст на 140–160 знаков, не дублирующий заголовок.
Schema.org микроразметка. На карточках товаров размечена структура Product с полями name, description, image и offers. Страница «Контакты» получила разметку Organization с адресом, телефонами и email. Это влияет не только на ранжирование, но и на внешний вид сниппета в выдаче: телефон и адрес могут отображаться прямо под ссылкой на сайт.
Sitemap.xml с автообновлением. При добавлении нового товара или категории sitemap генерируется заново, поисковым системам отправляется уведомление через модуль «Поисковая оптимизация» Битрикс24.
SSL-сертификат и редиректы. Настроен HTTPS с 301-редиректом с HTTP-версии. Все страницы отдают строгий HSTS-заголовок. Битые ссылки старого сайта перехватываются кастомной страницей 404 с картой разделов — посетитель не уходит, а попадает в навигацию.
Скорость загрузки. Подключено сжатие статических ресурсов, кеширование на уровне браузера, отложенная загрузка изображений (lazy loading) для фотогалерей. Основные метрики Core Web Vitals — в зелёной зоне для десктопа и мобильных устройств.
Скриншоты внедрения
Итоги проекта
| Параметр | Результат |
|---|---|
| Структура каталога | 3 раздела, 10 подкатегорий, трёхуровневая иерархия |
| Карточки товаров | 4 вкладки на каждой: Описание, Характеристики, Фото и видео, Инструкции |
| Формы заявок | 2 точки входа: с карточки товара и из раздела контактов |
| Новостной раздел | 4 публикации с хронологией участия в выставках 2023–2026 |
| Мобильная версия | Полная адаптация под разрешения от 375 до 1440 px |
| SEO | ЧПУ на транслите, Schema.org Product и Organization, индивидуальные Title и Description |
| Техническая база | HTTPS + HSTS, lazy loading, автообновляемый sitemap.xml, кастомная 404 |
| Интеграция с CRM | Заявки с сайта попадают напрямую в воронку продаж компании |
| Языковая версия | Мультиязычность: русский + английский + казахский (структура подготовлена) |
Типичные ошибки в похожих проектах
1. Плоская структура каталога. Когда производитель спецтехники выводит 15–20 моделей одним списком, покупатель теряется. Кунг, мастерская на колёсах и переоборудование фургона — это три принципиально разных продукта с разным циклом сделки. Каждый заслуживает собственной категории с отдельной логикой навигации.
2. Технические описания, скопированные из заводской документации. Инженерный текст, написанный для снабженца, не работает на сайте, куда приходит руководитель сервисной компании. Он ищет ответ на вопрос «какую задачу это решает», а не «какой модуль упругости стеклопластика». В случае Hydracars инженерный текст был адаптирован: сохранены ключевые параметры, но добавлен контекст применения.
3. Пренебрежение мобильной версией. Покупатель спецтехники часто просматривает варианты с телефона — в дороге, на объекте, после звонка коллеги. Сайт, который на мобильном требует горизонтального скролла или прячет ключевую информацию за несвёрстываемыми таблицами, теряет лиды.
4. Отсутствие фотографий производства. Поставщик, который продаёт дорогую спецтехнику, но показывает только рендеры и стоковые фото, вызывает недоверие. Фотоотчёт из цеха на странице «О компании» закрывает вопрос «существует ли производство физически» и работает на конверсию сильнее, чем любой текст.
5. Контент в табах, скрытый от поисковиков через AJAX. Частая ошибка — вкладки «Характеристики» и «Инструкции» подгружаются асинхронно с отдельного URL. Поисковик индексирует только первую вкладку, теряя 70% контента страницы. В проекте Hydracars все четыре таба — это секции одной страницы, доступные поисковому роботу при первом же сканировании.
Заключение
Главный принцип, заложенный в проект — проектирование структуры от клиентского сценария, а не от номенклатуры продукции. Три раздела каталога — это три разных типа покупателей с разными задачами, бюджетом и циклом принятия решения. Сайт не пытается показать «всё и сразу», а проводит посетителя по тому маршруту, который соответствует его запросу.
Для производителей спецтехники и сложного оборудования такой подход критичен: продукт не покупают импульсивно, решение принимается неделями, и сайт должен обслуживать не момент покупки, а весь процесс выбора — от первого знакомства с производителем до скачивания инструкции по монтажу.