Sparta Garage: сайт мастерской кастомных мотоциклов и интернет-магазин тюнинга с подбором по авто

Сайт создан, чтобы:

✔ Показать мотоциклы мастерской крупно и с характером
✔ Объяснить, как устроена постройка кастома под ключ
✔ Представить услуги гаража и привести к заявке на проект
✔ Вести посетителя из мастерской в интернет-магазин
✔ Помочь покупателю подобрать тюнинг и электронику под свой Mercedes-Benz


Главное о проекте

Sparta Garage строит кастомные мотоциклы под ключ — от идеи и согласования бюджета до готового байка, — а ещё оказывает автомобильные услуги и продаёт тюнинг и электронику для Mercedes-Benz. Нужны были сайт мастерской и интернет-магазин под одним брендом.

Я сделал две части с разными задачами. Сайт мастерской — главная, проекты, страница проекта, услуги, страница услуги и контакты: чёрный фон, крупные фото мотоциклов, красный акцент из логотипа. Интернет-магазин — светлый и функциональный: подбор по автомобилю, каталог по категориям и короткий путь в корзину.

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

Клиент: мастерская Sparta Garage
Кастомные мотоциклы под ключ, услуги гаража и магазин тюнинга для Mercedes-Benz
Тип: сайт мастерской + интернет-магазин
Шесть типов страниц мастерской и магазин: каталог, карточки товаров и услуг, корзина
Цель: заказы на постройку и продажи
Проекты ведут к заявке на кастом, а баннер магазина — к каталогу и корзине
Магазин: тюнинг для Mercedes-Benz
Чип-тюнинг, кодирование, электроника, экстерьер, интерьер, выхлоп и подбор по автомобилю

Достигнутые результаты

Сайт, на котором мастерская показывает характер, а магазин даёт уверенность, что деталь подойдёт.

Крупные фото, видео и страница-история для каждого мотоцикла с переходом к следующему

Строка «Ваш автомобиль» со ссылкой «Изменить» и метки совместимых моделей на карточках

Вкладки от ECU-тюнинга до интерьера, ряды карточек с ценой «от» и ссылкой «Смотреть все»

Галерея с увеличением, количество, опции, цвета, дополнения с ценами и вкладка совместимости

Переключатель этапов тюнинга: мощность, крутящий момент, график и нужные детали

Модель и год авто, длительность работ, дополнения с ценами и кнопка «В корзину»

Что сделано
в этом проекте

Сайт мастерской и интернет-магазин под одним брендом

Мастерская вдохновляет готовыми мотоциклами, магазин помогает быстро найти совместимую деталь и оформить заказ.

Сайт решает несколько основных задач:

  • показывает проекты мастерской крупно и с характером
  • объясняет, как устроена постройка мотоцикла под ключ
  • представляет услуги гаража
  • ведёт посетителя из мастерской в интернет-магазин
  • помогает подобрать товары и услуги под свой автомобиль
  • собирает заказ в корзину с опциями и дополнениями
Главная: кастомные мотоциклы Sparta Garage
Слайдер проектов и преимущества мастерской
Страница проектов: постройка на заказ и механика
Страница услуг
Интернет-магазин: категории и подбор по автомобилю
Карточка товара с опциями и совместимостью

У вас есть проект или вопросы?

Ответ гарантированно в течение 24 часов.
Первая консультация бесплатна и ни к чему не обязывает.




    (нажмите, чтобы открыть чат)

    Создание сайта мастерской и интернет-магазина тюнинга: кейс Sparta Garage

    Кастомный мотоцикл покупают глазами, а деталь для автомобиля — только когда уверены, что она подойдёт. На примере Sparta Garage рассказываю, как я сделал сайт мастерской с витриной проектов и интернет-магазин тюнинга с подбором по автомобилю, карточками товара и корзиной.

    О мастерской и задаче

    Sparta Garage строит кастомные мотоциклы под ключ: клиент озвучивает идею, согласует бюджет, а дальше наблюдает, как в металле и пластике появляется мотоцикл его мечты. Кроме кастома у гаража есть автомобильное направление — услуги для легковых и грузовых машин и интернет-магазин тюнинга и электроники для Mercedes-Benz.

    Нужен был сайт, который одинаково хорошо продаёт и штучную работу мастерской, и товары магазина. Я сделал обе части: сайт мастерской с проектами, услугами и контактами и интернет-магазин с каталогом, подбором по автомобилю, карточками товара и корзиной.

    Структура: мастерская и магазин под одним брендом

    Проект состоит из двух частей с общим брендом и разной задачей:

    • сайт мастерской — главная, проекты, страница проекта, услуги, страница услуги и контакты; задача — вдохновить и привести к заказу постройки;
    • интернет-магазин — каталог по категориям, подбор по автомобилю, карточки товаров и услуг, корзина; задача — помочь быстро найти совместимую деталь и оформить заказ.

    Мостом между частями служит баннер магазина на главной: граффити-логотип Sparta Garage, надпись STORE и кнопка «Перейти». Шапка сайта мастерской — логотип, меню из шести разделов и соцсети; подвал — FAQ, поддержка, оплата, доставка, возвраты и контакты.

    Главная страница мастерской

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

    • блок о мастерской: постройка под ключ без выхода за рамки бюджета, соблюдение сроков, качество работ и материалов, возможность приехать и проконтролировать ход работ;
    • полноэкранный слайдер проектов с подписями, стрелками и точками;
    • блок «Почему стоит выбрать Sparta Garage?» с текстом и четырьмя карточками преимуществ на иконках;
    • баннер интернет-магазина и подвал.

    Проекты, услуги и контакты

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

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

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

    Интернет-магазин: каталог и подбор по автомобилю

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

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

    Карточка товара: опции, Stage 1/2 и совместимость

    Карточка товара собирает всё, что нужно для решения о покупке, на одном экране:

    • галерея с миниатюрами, стрелками и увеличением фото;
    • метки моделей, цена, количество, выпадающий список опций и выбор цвета;
    • дополнения с ценами — отмечаются галочками и добавляются к заказу;
    • кнопки «В корзину» и «В список желаний», ссылка назад в категорию;
    • вкладки описания, характеристик и совместимости, ниже — слайдер похожих товаров.

    Для прошивок сделан отдельный вид карточки: переключатель Stage 1 / Stage 2 меняет показатели мощности и крутящего момента после тюнинга, график и список необходимых деталей. Таблица совместимости перечисляет модели, кузова и годы выпуска — покупатель проверяет свою машину ещё до заказа.

    Услуги как товар и корзина

    Услуги гаража в магазине продаются так же, как детали. В карточке услуги покупатель выбирает модель и год автомобиля, видит длительность работ и интервал обслуживания, отмечает дополнения с ценами и нажимает «В корзину». Новинки помечены меткой «New», длинные описания раскрываются по кнопке «Показать ещё», а мини-корзина со счётчиком сразу показывает, что заказ пополнился, и ведёт к его просмотру.

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

    Что важно в сайте мастерской и магазина тюнинга

    Сайт мастерской продаёт доверие к рукам мастера, а магазин — уверенность, что деталь подойдёт. Поэтому в таких проектах я опираюсь на несколько принципов:

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

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

    Детали проекта

    Тип проектасайт и интернет-магазин
    КатегорияИнтернет-магазин
    ТехнологииHTML5, CSS3, JavaScript
    Рольразработка сайта и интернет-магазина: вёрстка страниц, каталог, подбор по автомобилю, карточки товара, корзина, формы
    КлиентSparta Garage

    Что сделано

    • Собрал проект из двух частей: сайт мастерской и интернет-магазин под одним брендом
    • Сверстал главную: первый экран с мотоциклом, блок о мастерской, слайдер проектов, преимущества и баннер магазина
    • Сделал страницу проектов с видео, сеткой работ с датами и формой
    • Собрал шаблон страницы проекта и страницы услуги с переходом к предыдущему и следующему
    • Сверстал страницу услуг с карточками направлений гаража и контакты с формой и картой
    • Сделал каталог магазина: вкладки категорий, ряды карточек и подбор по автомобилю
    • Собрал карточку товара: галерея, опции, цвета, дополнения, вкладки описания, характеристик и совместимости
    • Сделал карточку тюнинга с переключением Stage 1 / Stage 2 и таблицей совместимости
    • Собрал карточки услуг с выбором модели и года, дополнениями и кнопкой «В корзину», мини-корзину со счётчиком

    Результат

    • Сайт мастерской с витриной проектов и услуг
    • Интернет-магазин тюнинга и электроники для Mercedes-Benz с подбором по автомобилю
    • Карточки товара с опциями, дополнениями и таблицей совместимости
    • Детали и услуги в одной корзине
    • Общий бренд: из мастерской в магазин — в один клик
    Спасибо, ваша заявка отправлена.