Coisa de Motos

频道有粉丝。店铺需要一个让人放心掏钱的品牌。

在有任何东西可以买之前，Coisa de Motos 就已经是一个名字、一种声音和一个社群了。把它变成店铺，意味着既要保住那种声音，响亮、好笑、带着浓浓的路上气息，又要看起来足够靠谱，让人愿意在这里买一件 R$2,000 的夹克。

它还得能延展。同一套视觉识别要用在周边上，用在一个满是刹车盘和面罩的网站上，还要用在每周节奏的快拍和缩略图上，做得快，而且永远一眼认得出。

基于 Shopify 搭建

整个店铺我们都建在 Shopify 上，尽可能多地用平台本身的能力，而不是绕开它另起炉灶：按品牌定制的主题、带系列和变体的商品目录、搜索和筛选、结账和支付、像 MOTONAUTA 这样的折扣码、博客，其余的交给应用。

依靠平台，让一个两人团队不用运维服务器就能卖几百种配件，也把时间留给了让店铺与众不同的部分：它的样子、它的组织方式，和它说的话。

店铺卖骑行装备、服装和几百种配件，所以设计工作主要是帮人找到东西。页眉里有一个大大的搜索栏，一个大型菜单按系统拆分配件：机械、刹车、电气等等。

用 ChatGPT 写代码

定制 Shopify 主题意味着要写 Liquid，也就是 Shopify 自己的模板语言，混着 HTML、CSS 和 JavaScript。我们的代码是我用 ChatGPT 写的。我描述想要的改动，把它给的代码粘贴进 Shopify 的主题编辑器，然后看看会发生什么。出问题时，我就把代码从 Shopify 复制出来，连同 bug 一起发给 ChatGPT，直到能跑为止。

那时 AI 编程还很早期，我工作用的主题编辑器里也完全没有它。就是在两个标签页之间复制粘贴，但那时这已经是我把东西做出来的方式了。

ChatGPT

在顶部加一条横幅，首次购买的顾客用 MOTONAUTA 可享 5% 折扣

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

Copy the code

把报错贴回去

Shopify · 编辑代码

header.liquidtheme.liquid

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

能卖货的店面

首页一打开是本周优惠，然后是骑手最常买的类别：头盔、夹克、手套、靴子和配件。顶部一条细横幅，让每位首次购买的顾客用优惠码 MOTONAUTA 享受 5% 折扣，用的是社群自己的词，账户页还会用“Salve, motonauta!”跟他们打招呼。

配件，按系统分

类别展开成一个大型菜单，按机修师的思路分组，找刹车片的人永远不用滚过排气管。

Coisa de Motos

为手机而建

骑手们是在手机上通过 Instagram 和 YouTube 找到店铺的，所以每个界面都像为桌面端设计一样为手机设计。我们还把购物路径做成了一份六步购买指南，从首页一直到结账，给那些从没在网上买过装备的人。

1. 

   1 · 打开网站

2. 

   2 · 选一个类别

3. 

   3 · 给商品排序

4. 

   4 · 打开商品

5. 

   5 · 查看详情

6. 

   6 · 结账

用品牌语气说话的促销

网站上的每个活动都有一张同一套系统里的横幅：全场包邮、Texx 25 周年五款头盔、和 4Ride Motorcycle 合作的 Festival Interlagos 2025 门票抽奖、优惠码、女装系列，以及退换货政策。

能把人带进来的内容

博客把频道的视频变成文章，比如“头盔有保质期吗？”，这样搜索和 YouTube 都能把人引回店铺。

Coisa de Motos

符号

符号是一顶侧面的头盔，面罩被切成三道笔画，看起来像速度，也像一个飞驰骑手的字母 E。小尺寸和印章上用实心版，大尺寸、留白多的地方用描边版，颜色有橙、黑、白三种。

文字标志

文字标志和所有标题都用 Evil Empire 排版，这是一款粗重的窄体展示字体，带着车库招牌的味道，COISA 和 MOTOS 之间塞着一个小小的“de”。反正骑手们也只叫这两个大字。在店铺里，界面用的是 Inter，这样在响亮的标题下面，价格和尺码依然清晰好读。

建立在圆上的徽章

徽章建立在围绕同一个圆心的几个圆上：字母沿着 R（外半径）和 0.75R 之间的环带排布；“desde 2020”落在下方一条更小的弧线上；头盔略高于 R，稍微偏离圆心靠右，让面罩朝前，就像骑手压弯时身体前倾。

标志组合

这些元素组合成四种标志组合：横版用于页眉，竖版和第二种竖版用于方形空间，还有一个圆形徽章，弧线上写着“desde 2020”，可以当头像、贴纸和布标。每一种都有一个给频道用的 YouTube 版本。

横版

竖版

圆形徽章

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，吉祥物

品牌需要一张不是真人的脸，于是有了 Motonauta：一位戴黑色头盔、穿 Texx 夹克的骑手，代表整个社群。他拿着优惠券，竖起大拇指，量自己的头围来选头盔尺码。这些姿势是用 AI 图像工具生成的，再精心挑选，统一成一个前后一致的角色。

3D 优惠图标

优惠活动有一套品牌橙色的 3D 物件：优惠券、百分号、礼物、橙黑两色的气球、一个问号、一辆购物车、一台相机和一颗星星。它们在横幅和广告里围着商品漂浮。推它们一把，或者把一个拉回来再松手。

穿在身上

品牌首先要在人身上站得住。符号小小地印在胸前，大大地印在背后，圆形徽章则延续到帽子上，和订单发货用的盒子上。

这种规模的店铺靠稳定的发帖节奏活着，所以品牌需要的是模板，而不是一次性的设计：每个系列一种样子，填起来快，而且绝不会被认成别人。

上线

店铺以一个预热系列开张，“E-commerce Coisa de Motos, lançamento em breve”：商品、Motonauta 和 Daniel 本人，一次一篇，直到网站上线。几个月后，同一套系统又庆祝了 Instagram 粉丝突破 2,000。

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.

• 商品帖子

  真实的手拿着真实的装备，并关联到完整视频

• 优惠

  优惠券和新品，用广告的背景

• Reel 封面

  大号 Evil Empire 字体压在画面上

• 精选快拍

  一排封面菜单：每个都是柏油路上的一个橙色图标

广告

广告和缩略图把品牌推得更远：橙色铺满整个背景，商品以 3D 形式环绕在人物周围，字体在画面允许的范围内能多大就多大。

YouTube

在 YouTube 上，频道沿用同一套系统：一条带徽章的横幅，以及三百多张缩略图，同样粗重的字体、同样的橙色色条，涵盖旅行、测评、安装和社群提问。