Coisa de Motos

En kanal har fans. En butik behöver ett varumärke som de litar på med sina pengar.

Coisa de Motos var ett namn, en röst och en community innan det var något man kunde köpa. Att göra det till en butik innebar att behålla den rösten, högljudd, rolig och väldigt mycket från vägen, och samtidigt se tillräckligt seriös ut för att någon skulle köpa en jacka för R$2 000 där.

Den behövde också gå att tänja. Samma identitet skulle sitta på merch, på en sajt full av bromsskivor och visir, och i en veckorytm av stories och miniatyrbilder, gjorda snabbt och alltid igenkännbara.

Byggd på Shopify

Vi byggde hela butiken på Shopify och använde så mycket av plattformen vi kunde i stället för att bygga runt den: ett tema anpassat efter varumärket, katalogen med kollektioner och varianter, sök och filter, kassa och betalningar, rabattkoder som MOTONAUTA, bloggen och appar för resten.

Att luta oss mot plattformen gjorde att ett team på två kunde sälja hundratals delar utan att driva servrar, och lämnade tid åt det som gör butiken annorlunda: hur den ser ut, hur den är organiserad och vad den säger.

Butiken säljer körutrustning, kläder och hundratals delar, så designarbetet handlade mest om att hitta saker. Ett stort sökfält sitter i sidhuvudet, och en megameny delar upp delarna efter system: mekanik, bromsar, elsystem och resten.

Kodad med ChatGPT

Att anpassa ett Shopify-tema innebär att skriva Liquid, Shopifys eget mallspråk, blandat med HTML, CSS och JavaScript. Jag skrev vårt med ChatGPT. Jag beskrev ändringen jag ville ha, klistrade in koden jag fick i Shopifys temaredigerare och såg vad som hände. När något gick sönder kopierade jag ut koden från Shopify igen och skickade den till ChatGPT tillsammans med buggen, tills det fungerade.

AI-kodning var fortfarande i sin linda, och inget av det fanns i temaredigeraren jag jobbade i. Det var kopiera och klistra mellan två flikar, men det var redan så jag fick saker byggda.

ChatGPT

Lägg till en rad högst upp som ger förstagångsköpare 5 % rabatt med MOTONAUTA

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

Copy the code

Klistra in buggen igen

Shopify · Redigera 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 %}

Ett skyltfönster som säljer

Startsidan öppnar med veckans erbjudande och sedan de kategorier motorcyklister handlar mest: hjälmar, jackor, handskar, stövlar och delar. En smal rad högst upp ger varje förstagångsköpare 5 % rabatt med koden MOTONAUTA, med communityns eget ord, och kontot hälsar dem med ”Salve, motonauta!”.

Delar, efter system

Kategorierna öppnas i en megameny grupperad så som en mekaniker tänker, så den som letar efter bromsbelägg aldrig behöver scrolla förbi avgassystem.

Coisa de Motos

Byggd för mobilen

Motorcyklisterna hittar butiken via Instagram och YouTube, i mobilen, så varje skärm designades lika mycket för mobilen som för datorn. Vi gjorde också om vägen till en guide i sex steg om hur man handlar, från startsidan till kassan, för dem som aldrig köpt utrustning på nätet.

1. 

   1 · Öppna sajten

2. 

   2 · Välj en kategori

3. 

   3 · Sortera det du ser

4. 

   4 · Öppna produkten

5. 

   5 · Kolla detaljerna

6. 

   6 · Gå till kassan

Kampanjer med varumärkets röst

Varje kampanj på sajten får en egen banner i samma system: fri frakt på allt, Texx 25-årsjubileum på fem hjälmmodeller, en biljettutlottning till Festival Interlagos 2025 med 4Ride Motorcycle, rabattkoder, en klädlinje för kvinnor och returpolicyn.

Innehåll som lockar in folk

Bloggen gör om kanalens videor till artiklar, ”har en hjälm bäst före-datum?”, så att både sök och YouTube leder tillbaka till butiken.

Coisa de Motos

Symbolen

Symbolen är en hjälm sedd från sidan, med visiret skuret i tre streck som läses som fart, och som bokstaven E för en motorcyklist i rörelse. Den fungerar fylld i små storlekar och på stämplar, och konturerad i stora, luftiga format, i orange, svart eller vitt.

Ordmärket

Ordmärket och alla rubriker är satta i Evil Empire, ett tungt, smalt displaytypsnitt med känsla av verkstadsskylt, med ett litet ”de” instoppat mellan COISA och MOTOS. Motorcyklisterna kortar ändå ner namnet till de två stora orden. I butiken körs gränssnittet i Inter, så att priser och storlekar är lätta att läsa under de högljudda rubrikerna.

Ett sigill byggt på cirklar

Sigillet är byggt på cirklar runt en och samma mittpunkt: bokstäverna går i ett band mellan R, den yttre radien, och 0,75R; ”desde 2020” sitter på en egen mindre båge nedanför; och hjälmen, lite högre än R, sitter en aning till höger om mitten så att visiret pekar framåt, som när en förare lutar sig in i en kurva.

Logotypvarianter

Delarna kombineras till fyra varianter: liggande för sidhuvuden, stående och en andra stående för kvadratiska ytor, och ett runt sigill, med ”desde 2020” på sin båge, som fungerar som profilbild, klistermärke och tygmärke. Varje variant har en YouTube-version för kanalen.

Liggande

Stående

Runt sigill

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

Varumärket behövde ett ansikte som inte var en person, så det fick Motonauta: en förare i svart hjälm och Texx-jacka som står för hela communityn. Han håller i rabattkoderna, ger tummen upp och mäter huvudet för hjälmstorlek. Poserna togs fram med AI-bildverktyg och valdes ut till en enda konsekvent karaktär.

3D-ikoner för erbjudanden

För erbjudanden finns en uppsättning 3D-objekt i varumärkets orange: kuponger, procenttecken, presenter, ballonger i orange och svart, ett frågetecken, en kundvagn, en kamera och en stjärna. De svävar runt produkterna i banners och annonser. Knuffa dem, eller dra en bakåt och släpp.

På människor

Det första stället där varumärket måste fungera var på människor. Symbolen sitter litet på bröstet och stort på ryggen, och det runda sigillet följer med till en keps och till lådan som beställningarna skickas i.

En butik av den här storleken lever på en jämn ström av inlägg, så varumärket behövde mallar mer än engångsdesigner: ett utseende per serie, snabbt att fylla i och omöjligt att förväxla med någon annan.

Lanseringen

Butiken öppnade med en teaserserie, ”E-commerce Coisa de Motos, lançamento em breve”: produkterna, Motonauta och Daniel själv, ett inlägg i taget, tills sajten gick live. Månader senare firade samma system 2 000 följare på 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.

• Produktinlägg

  Riktiga händer på riktig utrustning, länkade till hela videon

• Erbjudanden

  Kuponger och lanseringar på annonsernas bakgrunder

• Reel-omslag

  Stor Evil Empire-text över bilden

• Höjdpunkter

  En meny av omslag: en orange ikon på asfalt vardera

Annonser

Annonser och miniatyrbilder tar varumärket ännu längre: den orange färgen blir hela bakgrunden, produkterna svävar i 3D runt personen och texten blir så stor som bilden tillåter.

YouTube

På YouTube håller kanalen samma system: en banner med sigillet och över trehundra miniatyrbilder med samma tunga typsnitt och orange fält, för resor, recensioner, installationer och frågor från communityn.