Coisa de Motos

Un canale ha dei fan. Un negozio ha bisogno di un brand a cui affidino i propri soldi.

Coisa de Motos era un nome, una voce e una community prima di essere qualcosa che si potesse comprare. Trasformarla in un negozio voleva dire mantenere quella voce, rumorosa, divertente e decisamente di strada, sembrando però abbastanza seria da farci comprare una giacca da R$2.000.

Doveva anche adattarsi. La stessa identità sarebbe finita sul merch, su un sito pieno di dischi dei freni e visiere, e su un ritmo settimanale di storie e miniature, fatte in fretta e sempre riconoscibili.

Costruito su Shopify

Abbiamo costruito tutto il negozio su Shopify e usato la piattaforma il più possibile invece di costruirci intorno: un tema personalizzato sul brand, il catalogo con collezioni e varianti, ricerca e filtri, checkout e pagamenti, codici sconto come MOTONAUTA, il blog e app per il resto.

Appoggiarci alla piattaforma ha permesso a un team di due persone di vendere centinaia di ricambi senza gestire server, e ci ha lasciato tempo per ciò che rende il negozio diverso: come appare, come è organizzato e cosa dice.

Il negozio vende attrezzatura da moto, abbigliamento e centinaia di ricambi, quindi il lavoro di design riguardava soprattutto il far trovare le cose. Una grande barra di ricerca sta nell'intestazione, e un mega menu divide i ricambi per sistema: meccanica, freni, impianto elettrico e il resto.

Programmato con ChatGPT

Personalizzare un tema Shopify significa scrivere Liquid, il linguaggio di template di Shopify, mescolato a HTML, CSS e JavaScript. Il nostro l'ho scritto con ChatGPT. Descrivevo la modifica che volevo, incollavo il codice che mi dava nell'editor del tema di Shopify e vedevo cosa succedeva. Quando qualcosa si rompeva, ricopiavo il codice da Shopify e lo mandavo a ChatGPT con il bug, finché non funzionava.

Programmare con l'AI era ancora agli inizi, e niente di tutto questo esisteva nell'editor del tema in cui lavoravo. Era un copia e incolla tra due schede, ma era già il mio modo di costruire le cose.

ChatGPT

Aggiungi una barra in alto che dia il 5% di sconto a chi compra per la prima volta con MOTONAUTA

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

Copy the code

Reincolla il bug

Shopify · Modifica codice

header.liquidtheme.liquid

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

Una vetrina che vende

La home page si apre sull'offerta della settimana, poi sulle categorie che i motociclisti comprano di più: caschi, giacche, guanti, stivali e ricambi. Una sottile barra in alto dà il 5% di sconto a chi compra per la prima volta con il coupon MOTONAUTA, la parola della community stessa, e l'account li accoglie con “Salve, motonauta!”.

Ricambi, per sistema

Le categorie si aprono in un mega menu raggruppato come ragiona un meccanico, così chi cerca le pastiglie dei freni non deve mai scorrere oltre gli scarichi.

Coisa de Motos

Fatto per il telefono

I motociclisti trovano il negozio tramite Instagram e YouTube, dal telefono, quindi ogni schermata è stata progettata per il mobile quanto per il desktop. Abbiamo anche trasformato il percorso in una guida all'acquisto in sei passaggi, dalla home page al checkout, per chi non aveva mai comprato attrezzatura online.

1. 

   1 · Apri il sito

2. 

   2 · Scegli una categoria

3. 

   3 · Ordina i risultati

4. 

   4 · Apri il prodotto

5. 

   5 · Controlla i dettagli

6. 

   6 · Vai al checkout

Promozioni con la voce del brand

Ogni campagna sul sito ha il suo banner nello stesso sistema: spedizione gratuita su tutto, i 25 anni di Texx su cinque modelli di casco, un'estrazione di biglietti per il Festival Interlagos 2025 con 4Ride Motorcycle, codici sconto, una linea di abbigliamento donna e la politica sui resi.

Contenuti che portano persone

Il blog trasforma i video del canale in articoli, “il casco ha una scadenza?”, così sia la ricerca sia YouTube riportano al negozio.

Coisa de Motos

Il simbolo

Il simbolo è un casco visto di lato, con la visiera tagliata in tre tratti che si leggono come velocità, e come la lettera E di un motociclista in movimento. Funziona pieno per le dimensioni piccole e i timbri, e a contorno per quelle grandi e ariose, in arancione, nero o bianco.

Il logotipo

Il logotipo e tutti i titoli sono composti in Evil Empire, un display condensato e pesante con l'aria da insegna d'officina, con un piccolo “de” infilato tra COISA e MOTOS. Tanto i motociclisti accorciano il nome a quelle due parole grandi. Nel negozio l'interfaccia usa Inter, così prezzi e taglie restano facili da leggere sotto i titoli urlati.

Un sigillo costruito su cerchi

Il sigillo è costruito su cerchi attorno a un unico centro: le lettere corrono su una fascia tra R, il raggio esterno, e 0,75R; “desde 2020” sta su un suo arco più piccolo sotto; e il casco, alto poco più di R, è leggermente a destra del centro così la visiera punta in avanti, come un motociclista che si piega in curva.

Lockup

I pezzi si combinano in quattro lockup: orizzontale per le intestazioni, verticale e un secondo verticale per gli spazi quadrati, e un sigillo rotondo, con “desde 2020” sul suo arco, che fa da immagine del profilo, adesivo e toppa. Ognuno ha una versione YouTube per il canale.

Orizzontale

Verticale

Sigillo rotondo

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, la mascotte

Il brand aveva bisogno di un volto che non fosse una persona, così è arrivato Motonauta: un motociclista con il casco nero e una giacca Texx che rappresenta la community. Tiene i coupon, fa il pollice in su, si misura la testa per la taglia del casco. Le pose sono state generate con strumenti AI per le immagini e selezionate per ottenere un personaggio coerente.

Icone 3D delle offerte

Per le offerte c'è un set di oggetti 3D nell'arancione del brand: coupon, percentuali, regali, palloncini arancioni e neri, un punto interrogativo, un carrello, una fotocamera e una stella. Fluttuano intorno ai prodotti nei banner e negli annunci. Spingili, oppure tirane uno indietro e lascialo andare.

Addosso alle persone

Il primo posto in cui il brand doveva funzionare era addosso alle persone. Il simbolo sta piccolo sul petto e grande sulla schiena, e il sigillo rotondo passa su un cappellino e sulla scatola in cui viene spedito un ordine.

Un negozio di queste dimensioni vive di un ritmo costante di post, quindi al brand servivano più template che pezzi unici: un look per serie, veloce da compilare e impossibile da confondere con chiunque altro.

Il lancio

Il negozio ha aperto con una serie teaser, “E-commerce Coisa de Motos, lançamento em breve”: i prodotti, Motonauta e Daniel in persona, un post alla volta, fino al lancio del sito. Mesi dopo lo stesso sistema ha festeggiato i 2.000 follower su 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.

• Post prodotto

  Mani vere su attrezzatura vera, con il link al video completo

• Offerte

  Coupon e lanci sugli sfondi degli annunci

• Copertine dei reel

  Grande testo in Evil Empire sopra l'immagine

• In evidenza

  Un menu di copertine: un'icona arancione sull'asfalto per ciascuna

Annunci

Annunci e miniature spingono il brand più in là: l'arancione diventa l'intero sfondo, i prodotti fluttuano in 3D intorno alla persona e il testo diventa grande quanto l'inquadratura permette.

YouTube

Su YouTube il canale mantiene lo stesso sistema: un banner con il sigillo e oltre trecento miniature con lo stesso testo pesante e le stesse barre arancioni, per viaggi, recensioni, installazioni e domande della community.