EVA-коврики покупают под конкретную машину, поэтому сайту производителя мало красивых фото — он должен помочь найти свою модель и собрать комплект. На примере EVACraftAuto рассказываю, как я сделал лендинг с подбором по марке, модели и году, конструктором коврика, комплектами с ценами и формами заявок.
О компании и задаче
EVACraftAuto — украинский производитель автомобильных ковриков из EVA-материала. Компания работает во Львове и отправляет заказы по всей Украине. Коврики делают по оригинальным лекалам для каждой модели авто за 1–2 дня, а к ним можно заказать подпятники разной формы и шильды с логотипом марки. На сайте компания пишет о 3500+ моделях авто и 150+ вариантах исполнения для одной машины.
EVA-коврик подбирают под конкретный автомобиль, поэтому у покупателя всегда три вопроса: есть ли лекала для моей машины, сколько стоит комплект и как он будет смотреться в салоне. Лендинг должен отвечать на них без звонка, поэтому в центре страницы — подбор по автомобилю и конструктор коврика. Остальные блоки идут в том порядке, в каком возникают вопросы: почему вам можно доверять, сколько это стоит, есть ли моя машина, каким будет мой коврик и что произойдёт после заказа.
Шапка, первый экран и аргументы производителя
Шапка — белая панель со скруглёнными краями поверх первого экрана: логотип, меню «Каталог», «Переваги», «Наші роботи», «Співпраця», «Контакти», «FAQ», иконки Telegram и Viber и жёлтая кнопка с номером телефона. Под ней — затемнённое фото EVA-коврика в салоне, заголовок «Автомобільні килимки нового покоління», название бренда жёлтым и подпись «Виробник автомобільних килимків із EVA матеріалу». Кнопка одна — «Конструктор»: она сразу ведёт к самому полезному инструменту страницы.
Дальше лендинг отвечает на вопрос «почему именно вы». Блок «Чому варто обрати EVACraftAuto?» — шесть карточек с жёлтыми иконками:
- индивидуальные лекала для любого авто;
- материал, который не впитывает влагу, устойчив к износу и легко моется;
- изготовление на заказ за 1–2 дня;
- больше 13 цветов основы и 15 вариантов цвета канта;
- подпятники разной формы и шильды с логотипом авто;
- доставка по всей Украине.
За ним — блок «Про нас» на тёмном фото салона с тремя пронумерованными фотокарточками «Чому ми?» и инфографика «Перевага автокилимків EvaCraftAuto»: вокруг комплекта ковриков по дуге расставлены семь преимуществ — от экологичного материала и оригинальных креплений до 3500+ моделей авто и лазерного кроя. Тёмные графитовые секции чередуются на странице со светлыми кремовыми, а жёлтый цвет логотипа выделяет кнопки, цены и выбранные варианты.
Шесть комплектов с ценами
Блок «Комплекти» отвечает на вопрос о цене ещё до разговора с менеджером. В каждой из шести карточек — цена в гривнах в жёлтой рамке, вид автомобиля сверху, где жёлтым подсвечены коврики из комплекта, круглая вставка с фактурой материала и список состава:
- Basic — 1 350 грн: любой ряд легкового авто;
- Багажник — 1 590 грн: коврик в багажник и система липучек;
- Comfort — 1 990 грн: два передних и два задних коврика, перемычка на тоннель, оригинальные крепления и липучки к полу;
- Style — 2 900 грн: всё из Comfort, плюс четыре шильдика с логотипом авто и металлический подпятник;
- Comfort Plus — 3 430 грн: состав Comfort и коврик в багажник;
- Elite — 4 340 грн: передние и задние коврики, перемычка, крепления и липучки, четыре шильдика и металлический подпятник.
Схема машины работает быстрее любого списка: покупатель за секунду видит, какие зоны салона закроет комплект.
Подбор по марке, модели и году
Первое, что хочет знать владелец машины, — есть ли лекала для его авто. Поэтому подбор по автомобилю стоит отдельным блоком прямо перед конструктором и устроен в три шага:
- марка — выпадающий список «Оберіть бренд» и сетка плиток с логотипами и названиями марок; сначала видны четыре ряда, остальные открывает кнопка «Показати більше»;
- модель и год выпуска — два выпадающих списка в одну строку;
- кнопка «Очистити пошук» сбрасывает выбор, если нужно подобрать коврики для другой машины.
Логотип узнаётся быстрее, чем название в длинном списке, поэтому сетка марок — самый короткий путь к своей машине. А тех, кто свою модель не нашёл, страница не отпускает: сразу после конструктора стоит тёмная карточка «Не знайшли свій автомобіль?» с полями «Телефон», «Ім’я» и «Опис», кнопкой «Надіслати» и машиной под жёлтым чехлом.
Конструктор EVA-ковриков
Конструктор — главный инструмент лендинга: он заменяет долгую переписку о том, каким будет коврик. Слева — крупное изображение коврика: на скриншоте он жёлтый, с фактурой «ромб», ровно как выбрано в настройках справа. Под ним — три фото готовых ковриков в салонах и честная оговорка: фото универсальное, коврики придут под конфигурацию вашей машины, а цвет на экране может немного отличаться.
Справа — карточки с параметрами, и рядом с названием каждого в жёлтой рамке выводится текущий выбор: «Перший, другий ряди», «Ромб», «Жовтий», «Чорний». Покупатель выбирает:
- комплектацию — четыре иконки автомобиля сверху с подсвеченными рядами и ценой: 1 350, 1 990, 3 430 и 1 590 грн;
- тип материала — образцы фактур в кружках, в том числе «ромб» и «соты»;
- цвет коврика — 13 образцов с фактурой материала;
- цвет канта — отдельная палитра в два ряда;
- шильд с маркой авто — изображение шильда и выпадающий список;
- подпятник — один из трёх на выбор: EVA (бесплатно), квадратный или фигурный.
Внизу — блок «Загальна сума» с итогом и жёлтая кнопка «Замовити комплект». Покупатель собирает коврик сам, видит, что получится, и приходит к заказу с готовым решением — менеджеру остаётся уточнить детали по телефону.
Этапы работы, фото работ и «до/после»
Заказать проще, когда понятно, что будет дальше, и видны настоящие работы:
- «Як ми працюємо?» — четыре карточки со стрелками: выбор комплекта или заявка на сайте, звонок менеджера в течение 30 минут, изготовление за 1–2 рабочих дня и доставка Новой Почтой;
- «Наші роботи» — слайдер фото ковриков в салонах с подписями моделей, от BMW X5 до Mazda CX-5; активный слайд шире соседних, листать можно стрелками и точками;
- «До/після» — слайдер сравнения: жёлтый ползунок делит кадр на старый текстильный коврик и новый EVA-коврик в том же салоне, а стрелки и точки переключают пары фото;
- «Бажаєте придбати килимки вигідно?» — форма персонального предложения на фоне тёмного салона: телефон и имя.
Частые вопросы и контакты
Последние сомнения перед заказом лендинг снимает в блоке «Поширені запитання» — аккордеоне из семи вопросов: гарантия, что делать, если коврики не подошли, срок службы, запах, гипоаллергенность EVA, прочность материала и как укладывать коврик. Ответ раскрывается по жёлтой кнопке с плюсом. Например, о запахе: новые коврики могут пахнуть, но запах выветривается за 2–3 дня и не возвращается даже в жару.
В конце страницы — контакты: телефон, город и почта на фоне карты мира и форма с полями «Ім’я», «Пошта», «Тема», «Повідомлення» и кнопкой «Надіслати повідомлення».
Что важно в сайте производителя автоковриков
У автоковриков огромное число вариантов: марка, модель, год, комплектация, материал, два цвета и аксессуары. По опыту этого проекта сайт такого производителя продаёт, когда:
- подбор по автомобилю на виду — покупатель сначала проверяет, есть ли его машина, и только потом смотрит на цены;
- цены видны сразу — готовые комплекты снимают вопрос «сколько это стоит»;
- есть конструктор — человек сам собирает коврик и видит результат, а не описывает его словами в мессенджере;
- фото настоящих работ подписаны моделями авто — владелец Tucson ищет глазами свой Tucson;
- сравнение «до/после» показывает разницу с текстильным ковриком нагляднее любого описания;
- для нестандартных случаев есть короткая форма — «не нашёл свою машину» не должно означать «ушёл к конкуренту».
Если вы производите автоаксессуары или другой товар «под размер», продумайте заранее, какие параметры выбирает покупатель, в каком порядке и что он должен увидеть до заказа. Тогда лендинг с конструктором и подбором по авто станет не витриной, а инструментом продаж.
Детали проекта
Тип проекталендинг с конструктором заказа
КатегорияЛендинг
ТехнологииHTML5, CSS3, JavaScript
Рольразработка лендинга: вёрстка страницы, подбор по марке, модели и году, конструктор коврика, слайдеры, аккордеон и формы заявок
КлиентEVACraftAuto
СтранаУкраина
Что сделано
- Выстроил порядок блоков лендинга по вопросам покупателя — от первого экрана до заказа
- Сверстал первый экран с кнопкой «Конструктор» и шапку с меню, Telegram, Viber и телефоном
- Сверстал блоки преимуществ: шесть карточек «Чому варто обрати», «Про нас» и инфографику EVA-ковриков
- Собрал шесть карточек комплектов с ценой, схемой авто и составом
- Сделал подбор по авто: сетку логотипов марок с «Показати більше», выбор модели и года, сброс поиска
- Собрал конструктор EVA-ковриков: комплектация, тип материала, цвет коврика и канта, шильд, подпятник и общая сумма
- Сделал слайдер «Наші роботи» и слайдер сравнения «До/після»
- Сверстал этапы работы, аккордеон частых вопросов и контакты
- Сделал три формы заявок: «Не знайшли свій автомобіль?», персональное предложение и форму в контактах
Результат
- Лендинг производителя EVA-ковриков, который ведёт от первого экрана к заказу комплекта
- Подбор по марке, модели и году и конструктор коврика с общей суммой
- Шесть комплектов с ценами и составом — цена видна до звонка
- Фото работ с моделями авто, сравнение «до/после» и ответы на частые вопросы
- Три формы заявок, в том числе для тех, кто не нашёл свою машину
Посмотреть сайт проекта