Coisa de Motos

Ein Kanal hat Fans. Ein Shop braucht eine Marke, der sie ihr Geld anvertrauen.

Coisa de Motos war ein Name, eine Stimme und eine Community, lange bevor man dort irgendetwas kaufen konnte. Daraus einen Shop zu machen hieß, diese Stimme zu behalten – laut, witzig und ganz von der Straße –, und trotzdem seriös genug auszusehen, dass jemand dort eine Jacke für R$2.000 kauft.

Außerdem musste sie sich dehnen lassen. Dieselbe Identität sollte auf Merch funktionieren, auf einer Website voller Bremsscheiben und Visiere und in einem wöchentlichen Rhythmus aus Stories und Thumbnails, schnell gemacht und immer wiedererkennbar.

Gebaut auf Shopify

Wir haben den ganzen Shop auf Shopify gebaut und so viel von der Plattform genutzt wie möglich, statt um sie herum zu bauen: ein an die Marke angepasstes Theme, der Katalog mit Kollektionen und Varianten, Suche und Filter, Checkout und Zahlungen, Rabattcodes wie MOTONAUTA, der Blog und Apps für den Rest.

Uns auf die Plattform zu stützen hat einem Zwei-Personen-Team ermöglicht, Hunderte von Teilen zu verkaufen, ohne Server zu betreiben, und uns Zeit gelassen für das, was den Shop besonders macht: wie er aussieht, wie er organisiert ist und was er sagt.

Der Shop verkauft Motorradausrüstung, Bekleidung und Hunderte von Teilen, also ging es beim Design vor allem ums Finden. Im Header sitzt eine große Suchleiste, und ein Mega-Menü teilt die Teile nach System auf: Mechanik, Bremsen, Elektrik und der Rest.

Programmiert mit ChatGPT

Ein Shopify-Theme anzupassen heißt, Liquid zu schreiben, Shopifys eigene Template-Sprache, gemischt mit HTML, CSS und JavaScript. Unseres habe ich mit ChatGPT geschrieben. Ich habe die gewünschte Änderung beschrieben, den Code, den ich bekam, in Shopifys Theme-Editor eingefügt und geschaut, was passiert. Wenn etwas kaputtging, habe ich den Code wieder aus Shopify kopiert und ihn mit dem Fehler an ChatGPT geschickt, bis es funktionierte.

AI-Coding war noch am Anfang, und nichts davon lebte im Theme-Editor, in dem ich arbeitete. Es war Copy-and-paste zwischen zwei Tabs, aber so habe ich damals schon Dinge gebaut.

ChatGPT

Füge oben eine Leiste hinzu, die Erstkäufern mit MOTONAUTA 5 % Rabatt gibt

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

Copy the code

Den Fehler zurück einfügen

Shopify · Code bearbeiten

header.liquidtheme.liquid

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

Ein Schaufenster, das verkauft

Die Startseite beginnt mit dem Angebot der Woche, dann folgen die Kategorien, in denen Fahrer am meisten kaufen: Helme, Jacken, Handschuhe, Stiefel und Teile. Eine schmale Leiste oben gibt jedem Erstkäufer 5 % Rabatt mit dem Gutschein MOTONAUTA, im eigenen Wort der Community, und das Konto begrüßt sie mit „Salve, motonauta!“.

Teile, nach System

Die Kategorien öffnen sich in ein Mega-Menü, das so gruppiert ist, wie ein Mechaniker denkt, damit jemand, der Bremsbeläge sucht, nie an Auspuffanlagen vorbeiscrollen muss.

Coisa de Motos

Fürs Handy gebaut

Fahrer finden den Shop über Instagram und YouTube, auf dem Handy, also wurde jeder Screen genauso fürs Handy gestaltet wie für den Desktop. Außerdem haben wir den Weg in eine Anleitung in sechs Schritten verwandelt, wie man kauft, von der Startseite bis zum Checkout, für alle, die noch nie Ausrüstung online gekauft hatten.

1. 

   1 · Website öffnen

2. 

   2 · Kategorie wählen

3. 

   3 · Ergebnisse sortieren

4. 

   4 · Produkt öffnen

5. 

   5 · Details prüfen

6. 

   6 · Zur Kasse

Aktionen im Ton der Marke

Jede Kampagne auf der Website bekommt ein eigenes Banner im selben System: kostenloser Versand auf alles, das 25-jährige Jubiläum von Texx mit fünf Helmmodellen, ein Ticket-Gewinnspiel für das Festival Interlagos 2025 mit 4Ride Motorcycle, Gutscheincodes, eine Damenbekleidungslinie und die Rückgaberichtlinie.

Content, der Leute reinholt

Der Blog macht aus den Videos des Kanals Artikel – „Läuft ein Helm ab?“ –, sodass sowohl die Suche als auch YouTube zurück zum Shop führen.

Coisa de Motos

Das Symbol

Das Symbol ist ein Helm von der Seite, das Visier in drei Striche geschnitten, die sich als Geschwindigkeit lesen – und als der Buchstabe E eines Fahrers in Bewegung. Es funktioniert gefüllt für kleine Größen und Stempel und als Kontur für große, luftige Flächen, in Orange, Schwarz oder Weiß.

Die Wortmarke

Die Wortmarke und jede Headline sind in Evil Empire gesetzt, einer fetten, schmalen Display-Schrift mit Werkstattschild-Charme, mit einem kleinen „de“ zwischen COISA und MOTOS. Die Fahrer kürzen den Namen sowieso auf diese zwei großen Wörter ab. Im Shop läuft die Oberfläche in Inter, damit Preise und Größen unter den lauten Headlines gut lesbar bleiben.

Ein Siegel aus Kreisen

Das Siegel ist auf Kreisen um eine Mitte aufgebaut: Die Buchstaben laufen auf einem Band zwischen R, dem Außenradius, und 0,75R; „desde 2020“ sitzt auf einem eigenen kleineren Bogen darunter; und der Helm, etwas höher als R, sitzt leicht rechts der Mitte, damit das Visier nach vorne zeigt, so wie sich ein Fahrer in eine Kurve legt.

Lockups

Die Teile ergeben vier Lockups: horizontal für Header, vertikal und eine zweite vertikale Variante für quadratische Flächen, und ein rundes Siegel mit „desde 2020“ auf seinem Bogen, das als Profilbild, Sticker und Aufnäher funktioniert. Jedes hat eine YouTube-Version für den Kanal.

Horizontal

Vertikal

Rundes Siegel

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, das Maskottchen

Die Marke brauchte ein Gesicht, das keine echte Person ist, also bekam sie den Motonauta: einen Fahrer mit schwarzem Helm und Texx-Jacke, der für die Community steht. Er hält die Gutscheine, zeigt den Daumen hoch, misst seinen Kopf für die Helmgröße. Die Posen wurden mit AI-Bildtools generiert und zu einer stimmigen Figur kuratiert.

3D-Icons für Angebote

Für Angebote gibt es ein Set aus 3D-Objekten im Orange der Marke: Gutscheine, Prozentzeichen, Geschenke, Ballons in Orange und Schwarz, ein Fragezeichen, ein Einkaufswagen, eine Kamera und ein Stern. Sie schweben in Bannern und Anzeigen um die Produkte. Schubs sie an, oder zieh eins zurück und lass es los.

Am Menschen

Der erste Ort, an dem die Marke funktionieren musste, waren Menschen. Das Symbol sitzt klein auf der Brust und groß auf dem Rücken, und das runde Siegel findet sich auf einer Cap und auf dem Karton wieder, in dem eine Bestellung verschickt wird.

Ein Shop dieser Größe lebt von einem stetigen Rhythmus an Posts, also brauchte die Marke eher Templates als Einzelstücke: ein Look pro Serie, schnell ausgefüllt und mit niemandem zu verwechseln.

Der Launch

Der Shop startete mit einer Teaser-Serie, „E-commerce Coisa de Motos, lançamento em breve“: die Produkte, Motonauta und Daniel selbst, ein Post nach dem anderen, bis die Website live ging. Monate später feierte dasselbe System 2.000 Follower auf 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.

• Produkt-Posts

  Echte Hände an echter Ausrüstung, verlinkt mit dem ganzen Video

• Angebote

  Gutscheine und Launches auf den Hintergründen der Anzeigen

• Reel-Cover

  Große Evil-Empire-Schrift über dem Bild

• Highlights

  Ein Menü aus Covern: je ein orangefarbenes Icon auf Asphalt

Anzeigen

Anzeigen und Thumbnails treiben die Marke weiter: Das Orange wird zum ganzen Hintergrund, die Produkte schweben in 3D um die Person, und die Schrift wird so groß, wie das Bild es zulässt.

YouTube

Auf YouTube behält der Kanal dasselbe System: ein Banner mit dem Siegel und über dreihundert Thumbnails mit derselben fetten Schrift und orangefarbenen Balken, für Reisen, Reviews, Einbauten und Fragen aus der Community.