Coisa de Motos

Un canal tiene fans. Una tienda necesita una marca a la que le confíen su dinero.

Coisa de Motos era un nombre, una voz y una comunidad antes de ser algo que se pudiera comprar. Convertirla en tienda significaba mantener esa voz, ruidosa, divertida y muy de carretera, y a la vez verse lo bastante seria como para que alguien comprara ahí una chaqueta de R$2,000.

También tenía que estirarse. La misma identidad iba a estar en el merch, en un sitio lleno de discos de freno y viseras, y en un ritmo semanal de stories y miniaturas, hechas rápido y siempre reconocibles.

Hecha en Shopify

Construimos toda la tienda en Shopify y usamos todo lo que pudimos de la plataforma en lugar de construir alrededor de ella: un tema personalizado para la marca, el catálogo con sus colecciones y variantes, búsqueda y filtros, checkout y pagos, códigos de descuento como MOTONAUTA, el blog, y apps para el resto.

Apoyarnos en la plataforma permitió que un equipo de dos personas vendiera cientos de repuestos sin administrar servidores, y nos dejó el tiempo para lo que hace distinta a la tienda: cómo se ve, cómo está organizada y qué dice.

La tienda vende equipo de manejo, ropa y cientos de repuestos, así que el trabajo de diseño fue sobre todo hacer que las cosas se encuentren. Una barra de búsqueda grande va en el encabezado, y un mega menú divide los repuestos por sistema: mecánica, frenos, eléctrico y el resto.

Programada con ChatGPT

Personalizar un tema de Shopify significa escribir Liquid, el lenguaje de plantillas propio de Shopify, mezclado con HTML, CSS y JavaScript. Escribí el nuestro con ChatGPT. Describía el cambio que quería, pegaba el código que me daba en el editor de temas de Shopify y veía qué pasaba. Cuando algo se rompía, copiaba el código de vuelta desde Shopify y se lo mandaba a ChatGPT con el bug, hasta que funcionaba.

Programar con IA todavía estaba en sus inicios, y nada de eso vivía en el editor de temas donde yo trabajaba. Era copiar y pegar entre dos pestañas, pero ya era mi forma de construir cosas.

ChatGPT

Agrega una barra arriba que dé 5% de descuento en la primera compra con MOTONAUTA

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

Copy the code

Pega el bug de vuelta

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 %}

Una vitrina que vende

La página de inicio abre con la oferta de la semana, y luego las categorías que más compran los motociclistas: cascos, chaquetas, guantes, botas y repuestos. Una barra delgada arriba le da 5% de descuento a cada comprador nuevo con el cupón MOTONAUTA, con la palabra de la propia comunidad, y la cuenta los recibe con “Salve, motonauta!”.

Repuestos, por sistema

Las categorías se abren en un mega menú agrupado como piensa un mecánico, así que quien busca pastillas de freno nunca tiene que pasar por los escapes.

Coisa de Motos

Hecha para el celular

Los motociclistas encuentran la tienda por Instagram y YouTube, en el celular, así que cada pantalla se diseñó tanto para el celular como para el escritorio. También convertimos el recorrido en una guía de seis pasos sobre cómo comprar, de la página de inicio al checkout, para quienes nunca habían comprado equipo en línea.

1. 

   1 · Abre el sitio

2. 

   2 · Elige una categoría

3. 

   3 · Ordena lo que ves

4. 

   4 · Abre el producto

5. 

   5 · Revisa los detalles

6. 

   6 · Finaliza la compra

Promociones con la voz de la marca

Cada campaña del sitio tiene su propio banner en el mismo sistema: envío gratis en todo, el 25 aniversario de Texx en cinco modelos de casco, un sorteo de entradas para el Festival Interlagos 2025 con 4Ride Motorcycle, códigos de cupón, una línea de ropa para mujer y la política de devoluciones.

Contenido que atrae gente

El blog convierte los videos del canal en artículos, “¿el casco tiene fecha de vencimiento?”, para que tanto la búsqueda como YouTube lleven de vuelta a la tienda.

Coisa de Motos

El símbolo

El símbolo es un casco visto de lado, con la visera cortada en tres trazos que se leen como velocidad, y como la letra E de un motociclista en movimiento. Funciona relleno en tamaños pequeños y sellos, y en contorno en aplicaciones grandes y con aire, en naranja, negro o blanco.

El logotipo

El logotipo y todos los titulares usan Evil Empire, una tipografía display pesada y condensada con aire de letrero de taller, con un “de” pequeño metido entre COISA y MOTOS. Los motociclistas igual acortan el nombre a esas dos palabras grandes. En la tienda, la interfaz usa Inter, para que precios y tallas sigan siendo fáciles de leer bajo los titulares ruidosos.

Un sello construido sobre círculos

El sello se construye sobre círculos alrededor de un mismo centro: las letras van en una banda entre R, el radio exterior, y 0.75R; “desde 2020” va en su propio arco más pequeño, abajo; y el casco, de poco más de R de alto, queda un poco a la derecha del centro para que la visera apunte hacia adelante, como se inclina un motociclista en una curva.

Lockups

Las piezas se combinan en cuatro lockups: horizontal para encabezados, vertical y una segunda versión vertical para espacios cuadrados, y un sello redondo, con “desde 2020” en su arco, que sirve como foto de perfil, sticker y parche. Cada uno tiene una versión de YouTube para el canal.

Horizontal

Vertical

Sello 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, la mascota

La marca necesitaba una cara que no fuera una persona, así que llegó Motonauta: un motociclista con casco negro y chaqueta Texx que representa a la comunidad. Sostiene los cupones, levanta el pulgar, se mide la cabeza para saber su talla de casco. Las poses se generaron con herramientas de imagen con IA y se curaron hasta formar un personaje consistente.

Íconos 3D de ofertas

Para las ofertas hay un set de objetos 3D en el naranja de la marca: cupones, porcentajes, regalos, globos naranjas y negros, un signo de interrogación, un carrito, una cámara y una estrella. Flotan alrededor de los productos en banners y anuncios. Empújalos, o jala uno hacia atrás y suéltalo.

En las personas

El primer lugar donde la marca tenía que funcionar era en las personas. El símbolo va pequeño en el pecho y grande en la espalda, y el sello redondo pasa a una gorra y a la caja en la que se envía cada pedido.

Una tienda de este tamaño vive de un ritmo constante de posts, así que la marca necesitaba plantillas más que piezas sueltas: un look por serie, rápido de completar e imposible de confundir con nadie más.

El lanzamiento

La tienda abrió con una serie teaser, “E-commerce Coisa de Motos, lançamento em breve”: los productos, Motonauta y el propio Daniel, un post a la vez, hasta que el sitio salió en vivo. Meses después, el mismo sistema celebró 2,000 seguidores en 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 producto

  Manos reales sobre equipo real, con enlace al video completo

• Ofertas

  Cupones y lanzamientos sobre los fondos de los anuncios

• Portadas de reels

  Evil Empire en grande sobre la imagen

• Destacadas

  Un menú de portadas: un ícono naranja sobre asfalto en cada una

Anuncios

Los anuncios y las miniaturas llevan la marca más lejos: el naranja se vuelve todo el fondo, los productos flotan en 3D alrededor de la persona y la tipografía crece tanto como el cuadro lo permite.

YouTube

En YouTube el canal mantiene el mismo sistema: un banner con el sello, y más de trescientas miniaturas con la misma tipografía pesada y las barras naranjas, para viajes, reseñas, instalaciones y preguntas de la comunidad.