Coisa de Motos

Kanał ma fanów. Sklep potrzebuje marki, której powierzą swoje pieniądze.

Coisa de Motos była nazwą, głosem i społecznością, zanim dało się tam cokolwiek kupić. Zamiana jej w sklep oznaczała zachowanie tego głosu — głośnego, zabawnego i bardzo „z drogi” — a jednocześnie wyglądanie na tyle poważnie, żeby ktoś kupił tam kurtkę za R$2000.

Do tego musiała się rozciągać. Ta sama tożsamość miała trafić na merch, na stronę pełną tarcz hamulcowych i wizjerów i w cotygodniowy rytm stories i miniatur, robionych szybko i zawsze rozpoznawalnych.

Zbudowane na Shopify

Cały sklep zbudowaliśmy na Shopify i korzystaliśmy z platformy, ile się dało, zamiast budować obok niej: motyw dopasowany do marki, katalog z kolekcjami i wariantami, wyszukiwarka i filtry, checkout i płatności, kody rabatowe takie jak MOTONAUTA, blog i aplikacje do reszty.

Oparcie się na platformie pozwoliło dwuosobowemu zespołowi sprzedawać setki części bez utrzymywania serwerów i zostawiło nam czas na to, co wyróżnia sklep: jak wygląda, jak jest zorganizowany i co mówi.

Sklep sprzedaje sprzęt motocyklowy, odzież i setki części, więc projektowanie dotyczyło głównie znajdowania rzeczy. W nagłówku jest duży pasek wyszukiwania, a mega menu dzieli części według układów: mechanika, hamulce, elektryka i reszta.

Zakodowane z ChatGPT

Dostosowanie motywu Shopify oznacza pisanie w Liquid, własnym języku szablonów Shopify, wymieszanym z HTML, CSS i JavaScriptem. Nasz napisałem z ChatGPT. Opisywałem zmianę, której chciałem, wklejałem otrzymany kod do edytora motywu Shopify i patrzyłem, co się stanie. Kiedy coś się psuło, kopiowałem kod z powrotem z Shopify i wysyłałem go do ChatGPT razem z błędem, aż zadziałało.

Kodowanie z AI dopiero raczkowało i nic z tego nie działało w edytorze motywu, w którym pracowałem. To było kopiuj-wklej między dwiema kartami, ale już wtedy właśnie tak budowałem.

ChatGPT

Dodaj na górze pasek, który daje nowym kupującym 5% zniżki z kodem MOTONAUTA

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

Copy the code

Wklej błąd z powrotem

Shopify · Edytuj kod

header.liquidtheme.liquid

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

Witryna, która sprzedaje

Strona główna otwiera się ofertą tygodnia, a potem kategoriami, które motocykliści kupują najczęściej: kaski, kurtki, rękawice, buty i części. Cienki pasek na górze daje każdemu nowemu kupującemu 5% zniżki z kodem MOTONAUTA, słowem samej społeczności, a konto wita go hasłem „Salve, motonauta!”.

Części według układów

Kategorie rozwijają się w mega menu pogrupowane tak, jak myśli mechanik, więc ktoś, kto szuka klocków hamulcowych, nigdy nie przewija przez wydechy.

Coisa de Motos

Zbudowane pod telefon

Motocykliści trafiają do sklepu przez Instagram i YouTube, na telefonach, więc każdy ekran był projektowany pod telefon w tym samym stopniu co pod komputer. Zamieniliśmy też tę ścieżkę w sześciokrokowy poradnik, jak kupować, od strony głównej po checkout, dla osób, które nigdy nie kupowały sprzętu online.

1. 

   1 · Otwórz stronę

2. 

   2 · Wybierz kategorię

3. 

   3 · Posortuj wyniki

4. 

   4 · Otwórz produkt

5. 

   5 · Sprawdź szczegóły

6. 

   6 · Złóż zamówienie

Promocje głosem marki

Każda kampania na stronie dostaje własny baner w tym samym systemie: darmowa wysyłka na wszystko, 25-lecie Texx na pięciu modelach kasków, rozdanie biletów na Festival Interlagos 2025 z 4Ride Motorcycle, kody rabatowe, linia odzieży damskiej i zasady zwrotów.

Treści, które przyciągają ludzi

Blog zamienia filmy z kanału w artykuły, takie jak „czy kask ma datę ważności?”, więc i wyszukiwarka, i YouTube prowadzą z powrotem do sklepu.

Coisa de Motos

Symbol

Symbol to kask widziany z boku, z wizjerem pociętym na trzy kreski, które czyta się jako prędkość i jako literę E motocyklisty w ruchu. Działa wypełniony w małych rozmiarach i na pieczątkach, a konturowy w dużych, przestronnych, w pomarańczu, czerni albo bieli.

Logotyp

Logotyp i wszystkie nagłówki są złożone krojem Evil Empire, ciężkim, wąskim krojem display w klimacie szyldu warsztatu, z małym „de” wciśniętym między COISA i MOTOS. Motocykliści i tak skracają nazwę do tych dwóch dużych słów. W sklepie interfejs działa na Inter, żeby ceny i rozmiary były czytelne pod głośnymi nagłówkami.

Pieczęć zbudowana na okręgach

Pieczęć zbudowana jest na okręgach wokół jednego środka: litery biegną pasem między R, promieniem zewnętrznym, a 0.75R; „desde 2020” siedzi na własnym, mniejszym łuku poniżej; a kask, nieco wyższy niż R, jest lekko przesunięty w prawo od środka, żeby wizjer patrzył do przodu, tak jak motocyklista pochyla się w zakręt.

Wersje logo

Elementy łączą się w cztery wersje logo: poziomą do nagłówków, pionową i drugą pionową na kwadratowe miejsca oraz okrągłą pieczęć z „desde 2020” na łuku, która sprawdza się jako zdjęcie profilowe, naklejka i naszywka. Każda ma wersję na kanał YouTube.

Poziome

Pionowe

Okrągła pieczęć

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, maskotka

Marka potrzebowała twarzy, która nie byłaby konkretną osobą, więc dostała Motonautę: motocyklistę w czarnym kasku i kurtce Texx, który reprezentuje społeczność. Trzyma kupony, pokazuje kciuk w górę, mierzy głowę, żeby dobrać rozmiar kasku. Pozy wygenerowano narzędziami AI do obrazów i wyselekcjonowano w jedną spójną postać.

Ikony 3D do promocji

Do promocji jest zestaw obiektów 3D w pomarańczu marki: kupony, procenty, prezenty, pomarańczowe i czarne balony, znak zapytania, koszyk, aparat i gwiazda. Unoszą się wokół produktów w banerach i reklamach. Popchnij je albo odciągnij jeden i puść.

Na ludziach

Pierwszym miejscem, gdzie marka musiała działać, byli ludzie. Symbol jest mały na piersi i duży na plecach, a okrągła pieczęć przechodzi na czapkę i na pudełko, w którym wysyłane jest zamówienie.

Sklep tej wielkości żyje dzięki stałemu rytmowi postów, więc marka potrzebowała szablonów bardziej niż jednorazowych projektów: jeden wygląd na serię, szybki do wypełnienia i nie do pomylenia z nikim innym.

Premiera

Sklep otworzyła seria teaserów „E-commerce Coisa de Motos, lançamento em breve”: produkty, Motonauta i sam Daniel, post po poście, aż strona ruszyła. Kilka miesięcy później ten sam system świętował 2000 obserwujących na Instagramie.

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.

• Posty produktowe

  Prawdziwe ręce na prawdziwym sprzęcie, z oznaczeniem pełnego filmu

• Promocje

  Kupony i premiery na tłach z reklam

• Okładki rolek

  Duży Evil Empire na kadrze

• Wyróżnione

  Menu okładek: każda to jedna pomarańczowa ikona na asfalcie

Reklamy

Reklamy i miniatury idą z marką jeszcze dalej: pomarańcz staje się całym tłem, produkty unoszą się w 3D wokół osoby, a tekst jest tak duży, jak tylko pozwala kadr.

YouTube

Na YouTube kanał trzyma się tego samego systemu: baner z pieczęcią i ponad trzysta miniatur z tym samym ciężkim krojem i pomarańczowymi paskami — do podróży, recenzji, montaży i pytań od społeczności.