Coisa de Motos

Um canal tem fãs. Uma loja precisa de uma marca em que eles confiem o próprio dinheiro.

A Coisa de Motos era um nome, uma voz e uma comunidade antes de ser qualquer coisa que dava para comprar. Transformar isso numa loja significava manter essa voz, barulhenta, engraçada e muito de estrada, e ao mesmo tempo parecer séria o bastante para alguém comprar ali uma jaqueta de R$2.000.

Ela também precisava se esticar. A mesma identidade ia estar em produtos, num site cheio de discos de freio e viseiras, e num ritmo semanal de stories e thumbnails, feitos rápido e sempre reconhecíveis.

Feita em Shopify

Construímos a loja inteira em Shopify e usamos o máximo possível da plataforma em vez de construir em volta dela: um tema customizado para a marca, o catálogo com coleções e variantes, busca e filtros, checkout e pagamentos, cupons de desconto como MOTONAUTA, o blog, e apps para o resto.

Apoiar-se na plataforma permitiu que um time de duas pessoas vendesse centenas de peças sem cuidar de servidores, e deixou nosso tempo para o que torna a loja diferente: a cara dela, como ela é organizada e o que ela diz.

A loja vende equipamentos de pilotagem, vestuário e centenas de peças, então o trabalho de design foi principalmente sobre encontrar as coisas. Uma barra de busca grande fica no cabeçalho, e um mega menu divide as peças por sistema: mecânica, freios, elétrica e o resto.

Programada com o ChatGPT

Customizar um tema da Shopify significa escrever Liquid, a linguagem de templates da própria Shopify, misturada com HTML, CSS e JavaScript. Escrevi o nosso com o ChatGPT. Eu descrevia a mudança que queria, colava o código que ele me dava no editor de temas da Shopify e via o que acontecia. Quando algo quebrava, eu copiava o código de volta da Shopify e mandava para o ChatGPT com o bug, até funcionar.

Programar com IA ainda estava no começo, e nada disso vivia dentro do editor de temas em que eu trabalhava. Era copiar e colar entre duas abas, mas já era assim que eu tirava as coisas do papel.

ChatGPT

Adiciona uma barra no topo que dá 5% de desconto na primeira compra com MOTONAUTA

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

Copy the code

Cola o bug de volta

Shopify · Editar código

header.liquidtheme.liquid

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

Uma vitrine que vende

A home abre com a oferta da semana, e depois as categorias que os motociclistas mais compram: capacetes, jaquetas, luvas, botas e peças. Uma barra fina no topo dá 5% de desconto para quem compra pela primeira vez com o cupom MOTONAUTA, na palavra da própria comunidade, e a conta recebe a pessoa com “Salve, motonauta!”.

Peças, por sistema

As categorias abrem num mega menu agrupado do jeito que um mecânico pensa, então quem procura pastilha de freio nunca passa rolando pelos escapamentos.

Coisa de Motos

Feita para o celular

Os motociclistas encontram a loja pelo Instagram e pelo YouTube, no celular, então cada tela foi desenhada tanto para o celular quanto para o desktop. Também transformamos o caminho num guia de seis passos sobre como comprar, da home ao checkout, para quem nunca tinha comprado equipamento online.

1. 

   1 · Abra o site

2. 

   2 · Escolha uma categoria

3. 

   3 · Ordene o que você vê

4. 

   4 · Abra o produto

5. 

   5 · Confira os detalhes

6. 

   6 · Finalize a compra

Promoções na voz da marca

Cada campanha no site ganha o próprio banner no mesmo sistema: frete grátis em tudo, os 25 anos da Texx em cinco modelos de capacete, um sorteio de ingressos para o Festival Interlagos 2025 com a 4Ride Motorcycle, códigos de cupom, uma linha de vestuário feminino e a política de trocas.

Conteúdo que traz gente

O blog transforma os vídeos do canal em artigos, “capacete tem validade?”, para que tanto a busca quanto o YouTube levem de volta à loja.

Coisa de Motos

O símbolo

O símbolo é um capacete visto de lado, com a viseira cortada em três traços que leem como velocidade, e como a letra E de um piloto em movimento. Ele funciona preenchido em tamanhos pequenos e carimbos, e vazado em aplicações grandes e arejadas, em laranja, preto ou branco.

O logotipo

O logotipo e todos os títulos usam Evil Empire, uma fonte display pesada e condensada com cara de placa de oficina, com um “de” pequeno encaixado entre COISA e MOTOS. Os motociclistas já encurtam o nome para essas duas palavras grandes mesmo. Na loja, a interface usa Inter, para preços e tamanhos continuarem fáceis de ler sob os títulos barulhentos.

Um selo construído sobre círculos

O selo é construído sobre círculos em torno de um único centro: as letras correm numa faixa entre R, o raio externo, e 0,75R; “desde 2020” fica no próprio arco menor, embaixo; e o capacete, com um pouco mais de R de altura, fica levemente à direita do centro para a viseira apontar para a frente, do jeito que um piloto se inclina numa curva.

Lockups

As peças se combinam em quatro lockups: horizontal para cabeçalhos, vertical e uma segunda versão vertical para espaços quadrados, e um selo redondo, com “desde 2020” no arco, que funciona como foto de perfil, adesivo e patch. Cada um tem uma versão para o canal no YouTube.

Horizontal

Vertical

Selo redondo

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, o mascote

A marca precisava de um rosto que não fosse uma pessoa, então ganhou o Motonauta: um motociclista de capacete preto e jaqueta Texx que representa a comunidade. Ele segura os cupons, faz joinha, mede a cabeça para saber o tamanho do capacete. As poses foram geradas com ferramentas de imagem com IA e selecionadas para formar um personagem consistente.

Ícones 3D de ofertas

Para as ofertas existe um conjunto de objetos 3D no laranja da marca: cupons, porcentagens, presentes, balões laranja e pretos, um ponto de interrogação, um carrinho, uma câmera e uma estrela. Eles flutuam em volta dos produtos em banners e anúncios. Empurre, ou puxe um para trás e solte.

Nas pessoas

O primeiro lugar onde a marca tinha que funcionar era nas pessoas. O símbolo vai pequeno no peito e grande nas costas, e o selo redondo passa para um boné e para a caixa em que o pedido é enviado.

Uma loja desse tamanho vive de um ritmo constante de posts, então a marca precisava mais de templates do que de peças avulsas: uma cara por série, rápida de preencher e impossível de confundir com qualquer outra.

O lançamento

A loja abriu com uma série teaser, “E-commerce Coisa de Motos, lançamento em breve”: os produtos, o Motonauta e o próprio Daniel, um post de cada vez, até o site entrar no ar. Meses depois, o mesmo sistema comemorou 2.000 seguidores no 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 de produto

  Mãos de verdade em equipamento de verdade, com marcação para o vídeo completo

• Ofertas

  Cupons e lançamentos sobre os fundos dos anúncios

• Capas de reels

  Evil Empire grande sobre a imagem

• Destaques

  Um menu de capas: um ícone laranja sobre asfalto em cada uma

Anúncios

Anúncios e thumbnails levam a marca mais longe: o laranja vira o fundo inteiro, os produtos flutuam em 3D em volta da pessoa, e a tipografia fica do tamanho que o quadro deixar.

YouTube

No YouTube o canal mantém o mesmo sistema: um banner com o selo, e mais de trezentas thumbnails com a mesma tipografia pesada e as barras laranja, para viagens, reviews, instalações e perguntas da comunidade.