Кунг для пикапа — покупка дорогая и очень «привязанная»: модель подходит только к своей машине, году выпуска и длине кузова. Магазину такого товара мало красивой витрины — ему нужен понятный подбор. Рассказываю, как я сделал такой интернет-магазин для LuxCap.
Задача: 542 кунга и короткий путь к своему
LuxCap — продавец кунгов (их ещё называют хардтопами или канопи) для пикапов из Львова. Бренд работает в премиум-сегменте: модульные кунги собираются из нескольких частей, закрываются на замки, на многие модели можно поставить палатку или экспедиционный багажник. Компания — авторизованный дилер и обещает установку за 2 часа.
Ассортимент делится на три линейки, и у каждой своя логика:
- Classic — глухие боковые окна, максимум прочности и защиты груза;
- Sport — боковые стеклянные окна со сдвижным механизмом, быстрый доступ к багажу;
- City — все окна стеклянные, переднее окно сдвижное.
Каждая линейка выпускается под десятки пикапов, поэтому в каталоге 542 товара. Главная задача сайта — чтобы владелец Ford Ranger или Chevrolet Colorado не листал всё подряд, а сразу попадал в свою модель.
Главная страница: бренд и три линейки
Главную я сверстал как витрину бренда, которая ведёт в каталог:
- слайдер первого экрана на три слайда с крупными фото пикапов и кнопкой «Узнать больше»;
- четыре преимущества с иконками: гарантия качества, быстрая доставка, установка за 2 часа, авторизованный дилер;
- текст о бренде для поиска и изображение модульной конструкции кунга;
- секции Classic, Sport и City — у каждой описание, фото-галерея со слайдером миниатюр и кнопка «Узнать больше», ведущая в каталог линейки.
Шапка при прокрутке прилипает к верху экрана, так что меню и телефон всегда под рукой, а на длинных страницах появляется кнопка «наверх».
Каталог: линейка → марка → модель → кунг
Каталог построен на WooCommerce, но привычную сетку товаров я заменил пошаговым подбором. Сначала покупатель открывает линейку и видит плитку логотипов 11 марок: Chevrolet, Dodge/RAM, Ford, GMC, Isuzu, Jeep, Mitsubishi, Nissan, SsangYong, Toyota и Volkswagen. Затем — страница марки с фото моделей: у Ford, например, это F-150, F-250, F-350, Ranger и Raptor. И только на третьем шаге — товары под выбранную модель, разделённые по годам выпуска и длине кузова.
На каждом уровне есть хлебные крошки: из карточки кунга можно одним кликом вернуться к модели, марке или линейке. В списках товаров работают сортировка и пагинация. Такая структура понятна и покупателю, и поисковику: у каждой марки и модели своя страница со своим заголовком.
Карточка товара: все ответы до звонка
Покупателя кунга интересуют прежде всего технические детали — подойдёт ли он к машине. Поэтому в карточке всё собрано на одном экране:
- галерея фото со слайдером и миниатюрами;
- артикул;
- таблица характеристик: бренд, автомобиль, серия, год выпуска, тип и длина кузова, Origin, Edition, PART NO.;
- ссылка «Больше характеристик» к полному списку;
- цена в гривнах, поле количества и кнопка «Купить сейчас»;
- описание под конкретную модель автомобиля.
Название товара тоже работает на подбор: в нём есть линейка, модель пикапа, годы выпуска и длина кузова — например, «Кунг алюминиевый LuxCap Sport для Chevrolet Colorado 2015–2022 (длина 5′ 1″)».
Заявка вместо длинного оформления
Такую покупку (Sport для Chevrolet Colorado, например, стоит 150 000 гривен) редко оплачивают картой за минуту: сначала хотят поговорить с продавцом. Поэтому кнопка «Купить сейчас» открывает всплывающее окно «Оформление заявки» — имя и телефон, без регистрации и без многошаговой формы. Менеджер перезванивает и уточняет детали.
Для тех, кто ещё выбирает, в шапке есть «Заказать звонок» — тоже во всплывающем окне. Формы работают на Contact Form 7. Классическая корзина при этом сохранена: в ней я вывел блоки «Вас может заинтересовать» и «Новинка в магазине», чтобы подсказать аксессуары и новые модели. Для полей оформления под Украину подключён Saphali Lite.
Аксессуары, центры установки и контакты
Кроме кунгов, на сайте есть раздел аксессуаров — например, стеллаж Drop Rack для кузова — с карточками в том же стиле, что и каталог. Отдельная страница «Центры установки» отвечает на вопрос «куда ехать ставить», а «Контакты» и подвал собирают телефон, почту, адрес и иконки мессенджеров и соцсетей.
SEO и техническая основа
Магазин работает на WordPress 6.8 и WooCommerce 10.4 с моей темой burum. Yoast SEO отвечает за заголовки, описания и структурированную разметку, а многоуровневый каталог даёт отдельные страницы под запросы вида «кунг на Ford Ranger» или «канопи для Chevrolet Colorado». Слайдеры собраны на slick, вёрстка адаптивная: на смартфоне главная, каталог и карточка перестраиваются в одну колонку, а кнопки остаются крупными.
Каким должен быть интернет-магазин автотоваров с подбором по машине
Кунги, кофры, пороги, фаркопы — у всех этих товаров одна особенность: они подходят к конкретному автомобилю. По опыту этого проекта магазину в такой нише важно:
- строить каталог от машины покупателя, а не от склада продавца: марка, модель, год, тип кузова;
- показывать логотипы марок и фото моделей — так ищут быстрее, чем по выпадающим спискам;
- писать совместимость прямо в названии и таблице характеристик;
- давать хлебные крошки, чтобы легко вернуться на шаг назад;
- для дорогих позиций — предлагать короткую заявку вместо полного оформления;
- сразу отвечать, где и как товар установят.
Тогда даже каталог на сотни позиций остаётся простым: покупатель видит только то, что подходит к его машине, и быстро переходит к разговору с продавцом.
Детали проекта
Тип проектаинтернет-магазин
КатегорияИнтернет-магазин
ТехнологииWordPress, WooCommerce, своя тема, Contact Form 7, Yoast SEO, адаптивная вёрстка
Рольразработка интернет-магазина: вёрстка страниц на своей теме, каталог с подбором по авто, карточки товара, формы заявок, адаптив
КлиентLuxCap
СтранаУкраина
Что сделано
- Собрал интернет-магазин на WordPress и WooCommerce на своей теме burum
- Сверстал главную: слайдер первого экрана, преимущества, текст о бренде, секции Classic, Sport и City с галереями
- Построил каталог по схеме «линейка — марка — модель — кунг» с плиткой логотипов 11 марок
- Сделал хлебные крошки на всех уровнях, сортировку и пагинацию
- Собрал карточку товара: галерея, артикул, таблица характеристик, цена, количество, описание под модель авто
- Сделал заявку на покупку в один клик и попап «Заказать звонок» на Contact Form 7
- Добавил в корзину блоки «Вас может заинтересовать» и «Новинка в магазине»
- Сверстал страницы аксессуаров, центров установки и контактов
- Настроил липкую шапку, кнопку «наверх» и адаптивную вёрстку
- Подключил Yoast SEO со структурированной разметкой
Результат
- Каталог на 542 кунга для пикапов 11 марок с пошаговым подбором
- Карточки с полной таблицей характеристик и ценой
- Заявка на покупку без регистрации — имя и телефон
- Три линейки кунгов, понятно представленные на главной
- Сайт, удобный на смартфоне
Посмотреть сайт проекта