Coisa de Motos

Une chaîne a des fans. Une boutique a besoin d'une marque à qui ils confient leur argent.

Coisa de Motos était un nom, une voix et une communauté avant d'être quoi que ce soit qu'on puisse acheter. En faire une boutique, c'était garder cette voix, bruyante, drôle et qui sent la route, tout en ayant l'air assez sérieux pour qu'on y achète une veste à 2 000 R$.

Elle devait aussi s'étirer. La même identité allait vivre sur le merch, sur un site plein de disques de frein et de visières, et sur un rythme hebdomadaire de stories et de miniatures, produites vite et toujours reconnaissables.

Construit sur Shopify

Nous avons construit toute la boutique sur Shopify et utilisé autant que possible la plateforme au lieu de construire autour : un thème personnalisé à la marque, le catalogue avec ses collections et ses variantes, la recherche et les filtres, le checkout et les paiements, des codes promo comme MOTONAUTA, le blog, et des apps pour le reste.

S'appuyer sur la plateforme a permis à une équipe de deux de vendre des centaines de pièces sans gérer de serveurs, et nous a laissé du temps pour ce qui rend la boutique différente : son allure, son organisation et ce qu'elle dit.

La boutique vend de l'équipement de moto, des vêtements et des centaines de pièces, donc le travail de design portait surtout sur l'art de trouver. Une grande barre de recherche occupe l'en-tête, et un méga-menu classe les pièces par système : mécanique, freins, électricité et le reste.

Codé avec ChatGPT

Personnaliser un thème Shopify, c'est écrire du Liquid, le langage de templates de Shopify, mêlé à du HTML, du CSS et du JavaScript. J'ai écrit le nôtre avec ChatGPT. Je décrivais le changement voulu, je collais le code qu'il me donnait dans l'éditeur de thème de Shopify, et je regardais ce qui se passait. Quand quelque chose cassait, je recopiais le code depuis Shopify et je l'envoyais à ChatGPT avec le bug, jusqu'à ce que ça marche.

Le code avec l'IA n'en était qu'à ses débuts, et rien de tout ça n'existait dans l'éditeur de thème où je travaillais. C'était du copier-coller entre deux onglets, mais c'était déjà ma façon de construire.

ChatGPT

Ajoute une barre en haut qui donne 5 % de réduction aux nouveaux clients avec MOTONAUTA

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

Copy the code

Recoller le bug

Shopify · Modifier le code

header.liquidtheme.liquid

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

Une vitrine qui vend

La page d'accueil s'ouvre sur l'offre de la semaine, puis sur les catégories que les motards achètent le plus : casques, vestes, gants, bottes et pièces. Une fine barre en haut offre 5 % à chaque nouveau client avec le coupon MOTONAUTA, le mot de la communauté elle-même, et le compte les accueille avec « Salve, motonauta! ».

Les pièces, par système

Les catégories s'ouvrent sur un méga-menu organisé comme pense un mécanicien, pour que quelqu'un qui cherche des plaquettes de frein ne passe jamais devant les échappements.

Coisa de Motos

Pensé pour le téléphone

Les motards découvrent la boutique via Instagram et YouTube, sur leur téléphone, donc chaque écran a été conçu autant pour le mobile que pour l'ordinateur. Nous avons aussi transformé le parcours en un guide d'achat en six étapes, de la page d'accueil au checkout, pour ceux qui n'avaient jamais acheté d'équipement en ligne.

1. 

   1 · Ouvrir le site

2. 

   2 · Choisir une catégorie

3. 

   3 · Trier les résultats

4. 

   4 · Ouvrir le produit

5. 

   5 · Vérifier les détails

6. 

   6 · Payer

Des promos avec la voix de la marque

Chaque campagne du site a sa propre bannière dans le même système : livraison offerte sur tout le site, les 25 ans de Texx sur cinq modèles de casques, un tirage au sort de billets pour le Festival Interlagos 2025 avec 4Ride Motorcycle, des codes promo, une ligne de vêtements femme et la politique de retours.

Du contenu qui fait venir les gens

Le blog transforme les vidéos de la chaîne en articles, « un casque a-t-il une date d'expiration ? », pour que la recherche et YouTube ramènent tous les deux à la boutique.

Coisa de Motos

Le symbole

Le symbole est un casque vu de profil, sa visière découpée en trois traits qui évoquent la vitesse, et la lettre E d'un motard en mouvement. Il fonctionne plein pour les petites tailles et les tampons, et en contour pour les grandes surfaces aérées, en orange, noir ou blanc.

Le logotype

Le logotype et tous les titres sont composés en Evil Empire, une display condensée et grasse à l'allure d'enseigne de garage, avec un petit « de » glissé entre COISA et MOTOS. De toute façon, les motards raccourcissent le nom à ces deux grands mots. Sur la boutique, l'interface est en Inter, pour que les prix et les tailles restent faciles à lire sous les titres tapageurs.

Un sceau construit sur des cercles

Le sceau est construit sur des cercles autour d'un seul centre : les lettres courent sur une bande entre R, le rayon extérieur, et 0,75R ; « desde 2020 » est posé sur son propre arc plus petit en dessous ; et le casque, un peu plus haut que R, est légèrement décalé à droite du centre pour que la visière pointe vers l'avant, comme un motard qui se penche dans un virage.

Assemblages

Les éléments se combinent en quatre assemblages : horizontal pour les en-têtes, vertical et un second vertical pour les espaces carrés, et un sceau rond, avec « desde 2020 » sur son arc, qui sert de photo de profil, d'autocollant et d'écusson. Chacun a une version YouTube pour la chaîne.

Horizontal

Vertical

Sceau rond

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

La marque avait besoin d'un visage qui ne soit pas une personne, alors elle a eu Motonauta : un motard au casque noir et en veste Texx qui représente la communauté. Il tient les coupons, lève le pouce, mesure son tour de tête pour une taille de casque. Les poses ont été générées avec des outils d'image IA, puis triées pour former un personnage cohérent.

Icônes 3D des offres

Pour les offres, il y a une série d'objets 3D dans l'orange de la marque : coupons, pourcentages, cadeaux, ballons orange et noirs, un point d'interrogation, un panier, un appareil photo et une étoile. Ils flottent autour des produits dans les bannières et les pubs. Bousculez-les, ou tirez-en un et lâchez-le.

Sur les gens

Le premier endroit où la marque devait marcher, c'était sur les gens. Le symbole est petit sur la poitrine et grand dans le dos, et le sceau rond se retrouve sur une casquette et sur le carton dans lequel part une commande.

Une boutique de cette taille vit d'un rythme régulier de posts, donc la marque avait davantage besoin de templates que de pièces uniques : un look par série, rapide à remplir et impossible à confondre avec qui que ce soit d'autre.

Le lancement

La boutique a ouvert avec une série teaser, « E-commerce Coisa de Motos, lançamento em breve » : les produits, Motonauta et Daniel lui-même, un post à la fois, jusqu'à la mise en ligne du site. Des mois plus tard, le même système a célébré les 2 000 abonnés sur 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.

• Posts produits

  De vraies mains sur du vrai équipement, avec un lien vers la vidéo complète

• Offres

  Coupons et lancements sur les fonds des pubs

• Couvertures de reels

  Du gros Evil Empire par-dessus l'image

• Stories à la une

  Un menu de couvertures : une icône orange sur de l'asphalte pour chacune

Pubs

Les pubs et les miniatures poussent la marque plus loin : l'orange devient tout le fond, les produits flottent en 3D autour de la personne, et le texte devient aussi grand que le cadre le permet.

YouTube

Sur YouTube, la chaîne garde le même système : une bannière avec le sceau, et plus de trois cents miniatures avec la même typo grasse et les mêmes bandes orange, pour les voyages, les tests, les installations et les questions de la communauté.