Coisa de Motos

У канала есть фанаты. Магазину нужен бренд, которому доверят свои деньги.

Coisa de Motos была именем, голосом и сообществом задолго до того, как там стало что купить. Превратить её в магазин значило сохранить этот голос — громкий, смешной и очень «с дороги», — и при этом выглядеть достаточно серьёзно, чтобы у тебя купили куртку за R$2000.

А ещё она должна была растягиваться. Одна и та же айдентика жила бы на мерче, на сайте, полном тормозных дисков и визоров, и в еженедельном ритме сторис и обложек — сделанных быстро и всегда узнаваемых.

Сделано на Shopify

Весь магазин мы построили на Shopify и использовали платформу по максимуму, вместо того чтобы строить в обход неё: тема, настроенная под бренд, каталог с коллекциями и вариантами, поиск и фильтры, оформление заказа и оплата, промокоды вроде MOTONAUTA, блог и приложения для всего остального.

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

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

Закодировано с ChatGPT

Настройка темы Shopify — это код на Liquid, собственном языке шаблонов Shopify, вперемешку с HTML, CSS и JavaScript. Наш код я писал с ChatGPT. Я описывал нужное изменение, вставлял полученный код в редактор темы Shopify и смотрел, что получится. Когда что-то ломалось, я копировал код обратно из Shopify и отправлял его в ChatGPT вместе с багом — пока всё не заработает.

AI-программирование тогда только начиналось, и ничего из этого не жило в редакторе темы, где я работал. Это был копипаст между двумя вкладками, но я уже именно так и строил.

ChatGPT

Добавь сверху полосу, которая даёт новым покупателям скидку 5% по промокоду MOTONAUTA

{% if customer == blank %}
  <div class="promo-bar">
    5% off your first order:
    MOTONAUTA
  </div>
{% endif %}

Copy the code

Вставь баг обратно

Shopify · Редактировать код

header.liquidtheme.liquid

1{% if customer == blank %}
2  <div class="promo-bar">
3    5% off your first order:
4    MOTONAUTA
5  </div>
6{% endif %}

Витрина, которая продаёт

Главная открывается предложением недели, а дальше идут категории, которые мотоциклисты покупают чаще всего: шлемы, куртки, перчатки, ботинки и запчасти. Тонкая полоса сверху даёт каждому новому покупателю скидку 5% по промокоду MOTONAUTA — словом самого сообщества, — а личный кабинет встречает фразой «Salve, motonauta!».

Запчасти по системам

Категории раскрываются в мега-меню, сгруппированное так, как думает механик, чтобы тот, кто ищет тормозные колодки, не листал мимо выхлопов.

Coisa de Motos

Сделано для телефона

Мотоциклисты находят магазин через Instagram и YouTube, с телефонов, поэтому каждый экран проектировался для телефона так же, как для компьютера. А ещё мы превратили путь покупателя в пошаговый гид из шести шагов — от главной до оформления заказа — для тех, кто никогда не покупал экипировку онлайн.

1. 

   1 · Откройте сайт

2. 

   2 · Выберите категорию

3. 

   3 · Отсортируйте товары

4. 

   4 · Откройте товар

5. 

   5 · Проверьте детали

6. 

   6 · Оформите заказ

Акции голосом бренда

Каждая кампания на сайте получает свой баннер в той же системе: бесплатная доставка на всё, 25-летие Texx на пять моделей шлемов, розыгрыш билетов на Festival Interlagos 2025 вместе с 4Ride Motorcycle, промокоды, линия женской одежды и правила возврата.

Контент, который приводит людей

Блог превращает видео канала в статьи вроде «есть ли у шлема срок годности?», так что и поиск, и YouTube ведут обратно в магазин.

Coisa de Motos

Символ

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

Словесный знак

Словесный знак и все заголовки набраны Evil Empire — тяжёлым узким акцидентным шрифтом в духе гаражной вывески, с маленьким «de», вставленным между COISA и MOTOS. Мотоциклисты и так сокращают название до этих двух больших слов. В магазине интерфейс работает на Inter, чтобы цены и размеры легко читались под громкими заголовками.

Печать, построенная на окружностях

Печать построена на окружностях вокруг одного центра: буквы идут по кольцу между R, внешним радиусом, и 0.75R; «desde 2020» стоит на собственной меньшей дуге снизу; а шлем, чуть выше R, смещён немного вправо от центра, чтобы визор смотрел вперёд — так мотоциклист наклоняется в повороте.

Версии логотипа

Элементы складываются в четыре версии логотипа: горизонтальную для шапок, вертикальную и вторую вертикальную для квадратных мест и круглую печать с «desde 2020» на дуге — она работает как аватарка, стикер и нашивка. У каждой есть версия для YouTube-канала.

Горизонтальный

Вертикальный

Круглая печать

Colour

One loud colour and a few quiet ones, all saved as styles in the Figma file. Laranja is the brand: it's the symbol, the buttons, the sale bars. Near-black and white carry everything else, so the orange always means something.

Motonauta, маскот

Бренду нужно было лицо, которое не было бы конкретным человеком, и так появился Motonauta: мотоциклист в чёрном шлеме и куртке Texx, который олицетворяет сообщество. Он держит купоны, показывает палец вверх, измеряет голову, чтобы подобрать размер шлема. Позы сгенерированы AI-инструментами для изображений и отобраны так, чтобы получился один цельный персонаж.

3D-иконки для акций

Для акций есть набор 3D-объектов в фирменном оранжевом: купоны, проценты, подарки, оранжевые и чёрные шарики, вопросительный знак, корзина, камера и звезда. Они парят вокруг товаров в баннерах и рекламе. Толкните их или оттяните один и отпустите.

На людях

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

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

Запуск

Магазин открылся серией тизеров «E-commerce Coisa de Motos, lançamento em breve»: товары, Motonauta и сам Daniel, по одному посту, пока сайт не заработал. Спустя месяцы та же система отпраздновала 2000 подписчиков в Instagram.

Instagram

9:41100%

coisademotos

312posts2.148seguidores186seguindo

Coisa de Motos

Maior e-commerce para motos do Brasil! 🏍️

Encontre tudo o que sua moto precisa.

coisademotos.com.br

SeguirMensagem

Sobre nósMedidasFAQVídeosLojaClientesOfertasCuponsComo comprarMoto criadoresMototripsManutenções

Instagram is the store's shop window, so the profile was designed as a whole, not post by post. The avatar is the round seal, and the highlights work like a menu: twelve covers, an orange icon on asphalt each, for sizes, FAQ, videos, the store, customers, offers, coupons, how to buy, the creators, trips and maintenance, with “Sobre nós” in full orange first.

The feed mixes three kinds of posts, each with its own template: product posts filmed with the gear itself, with a small “watch it on YouTube” tag, offers on the orange or black grounds of the ads, and moments like the 2,000-follower thank-you. Reels get covers in the same type, so the grid reads as one brand from a distance.

• Посты о товарах

  Настоящие руки на настоящей экипировке, со ссылкой на полное видео

• Акции

  Купоны и запуски на фонах из рекламы

• Обложки рилсов

  Крупный Evil Empire поверх кадра

• Хайлайтс

  Меню из обложек: по одной оранжевой иконке на асфальте

Реклама

Реклама и обложки продвигают бренд ещё дальше: оранжевый становится целым фоном, товары парят в 3D вокруг человека, а шрифт становится настолько крупным, насколько позволяет кадр.

YouTube

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