逐页截图看下来的结论:这个站不需要"重新设计",需要的是定点打磨。色板(粉/奶油/墨)、圆角体系、爪印纹理、卡片语言全站统一执行得很扎实,首页漏斗(承诺→产品→理由→证据→答疑→社群)叙事完整。真正拉低观感的是几个"外来户"和几个空态——都是小手术。
现状:视频模块在首页第 9 位(画廊之后、FAQ 之前),大约在页面 60% 深度——大部分访客滚不到这里。它的使命是「真实性证明」,但证据放在了结案陈词之后。
逻辑:流程卡讲"我们怎么做",视频立刻证明"真的在这么做"——承诺和证据背靠背,说服力 1+1>2。访客在 30% 页面深度就能看到真人真手,之后再看产品卡时信任已经建立。这也是转化文案的经典结构:Claim → Proof → Offer。
顺手一并做:视频模块的 CTA「See more from the studio →」保持;流程卡第 3 步「Hand-painted, one at a time」可加一行小字「watch it happen ↓」把视线往下引。
逻辑:先看完产品再看证据,适合"先种草后验证"的路径。比 A 弱的地方:产品卡出现时信任还没建立,而我们无真实评论,此时最需要证据前置。
Hero 副按钮「See how it's made」改为锚点直达视频模块(现在跳 How It Works 页)。改动最小,但"滚不到就看不到"的根本问题没解决,且削弱 HIW 页入口。
选 A。另外提醒:现在四格里是渲染图占位(你拍板保留的),上移会让占位内容更显眼——如果工作室实拍视频快到了,可以等素材到位后连"换素材+挪位置"一次做完;如果还要等几周,先挪位置也没问题,占位图本身质感不差。
| 位置 | 状态 | 说明 |
|---|---|---|
| 摆件 PDP | ✅ 已挂 | 评论区 + Q&A 双标签(实测 Q&A 已开启),在 VS 表之后、FAQ 之前 |
| 钥匙扣 PDP | ✅ 已挂 | 同上 |
| 首页 | 🔒 骨架隐藏中 | pc_reviews 模块在首页第 7 位已就位但 enabled:false——不渲染,访客看不到 |
社会证明是首页标配(行业天花板 Pet Printed 首页就是评论墙扛转化)。当初设计时就埋了这个模块,逻辑是:零评论期显示空评论区比没有评论区更伤信任,所以先隐藏。
点亮时机建议:攒够 6 条带图真实评论再开。操作只需把 enabled 改 true(一分钟的事,到时我来)。在那之前,首页的"证据担当"就是视频模块——这也是它值得上移的又一个理由。
现在 PDP 评论区标题是 Judge.me 自带的朴素样式(左对齐小字 "Customer Reviews"),空态是一个孤零零的 "Be the first to write a review" 按钮——和全站的粉色卡片语言脱节。建议:给 widget 标题套品牌样式(居中 + eyebrow「REAL REVIEWS」),空态文案改成品牌语气(如 "No reviews yet — the first tiny twin ships soon 🐾")。CSS 就能做,列入 P0-4。
两层保护现在都在:① 视频传进 Shopify 后走 Shopify CDN 自动转码——真正发给买家的不是你上传的原片,是按访客网速自适应的压缩流;② 首页四格用的是 preload=metadata + 进入视口才播放——打开首页时只拉几 KB 的元信息,不滚到那里根本不下载视频。所以视频"拖慢整站"的前提基本不存在。
| 项目 | 建议值 | 为什么 |
|---|---|---|
| 时长 | 6–15 秒 | 花絮的黄金长度;超过 20 秒完播率骤降 |
| 分辨率 | 1080×1920 竖版(1080p) | 四格卡片实际显示宽度 ~300px,1080p 绰绰有余;4K 纯浪费转码时间 |
| 格式 | MP4(H.264) | 兼容性最稳;iPhone 拍的 HEVC/MOV 也行,Shopify 会转 |
| 单条文件大小 | ≤ 50MB(理想 10–30MB) | 不是硬限制(Shopify 上限 1GB),而是 50MB 内转码快、后台管理轻、传输不折腾 |
| 同屏数量 | 首页 ≤4 条(现状即是) | Studio 页瀑布流靠懒加载,条数不限 |
「竖屏 1080p、6–15 秒、单条 50MB 以内,MP4 或 iPhone 原片都行」——原片超了就先用手机自带压缩转 1080p 再传。
| # | 问题 | 方案 | 动哪里 |
|---|---|---|---|
| P0-1 | 视频模块位置过深 | 上移到四步流程之后(方案 A) | index.json order 调序,5 分钟 |
| P0-2 | Klaviyo 弹窗是"外来户":黑底白字默认样式,弹出来像别家网站的广告,和粉奶油品牌严重打架 | 在 Klaviyo 后台把弹窗+底部小挂件改成品牌皮肤:Cream 底、粉按钮、圆角 20px、爪印点缀;挂件文字别用全黑底 | Klaviyo 后台(我可浏览器代操作) |
| P0-3 | 向导标题字体掉链子:LET'S CREATE THEIR TINY TWIN 用的是正文字体,全站唯一没用标题字体的大标题,下单最关键页面反而最不"品牌" | .pcz-title 改用 Fredoka(与全站 H1 一致),步骤徽章字体同步核对 | pc-customizer.liquid CSS,10 分钟 |
| P0-4 | PDP 评论空态素、不像自家人 | Judge.me widget 标题品牌化 + 空态文案改品牌语气(见第三节) | 品牌 CSS + Judge.me 设置 |
| P0-5 | 空购物车页太冷:"Your cart is empty" 默认样式,是全站唯一没有品牌温度的页面 | 加爪印插画/emoji + 文案改「Nothing tiny in here yet 🐾」+ 粉色按钮引导去两个产品 | cart.json / 品牌 CSS |
| # | 项目 | 建议 |
|---|---|---|
| P1-1 | 公告条 emoji 重复 | 三条消息现在 🎨 出现两次;改为 🎨 / ✨ / 🎁 各司其职 |
| P1-2 | 流程卡→视频联动 | 第 3 步「Hand-painted」卡加一行 "watch it happen ↓" 小字锚点(配合 P0-1) |
| P1-3 | 画廊区标注 | 渲染图对下方 "real customer before & afters join the wall soon" 已有预期管理 ✅ 保持;实拍到位后此区与视频模块二选一收缩,避免双"证据区"冗余 |
| P1-4 | 向导步骤条移动端 | 移动端只剩圆点无文字(现状合理),建议当前步骤名显示在卡片标题里已覆盖 ✅ 无需改 |
| P1-5 | 404 页 | 推荐位已修(不再推 Rush);顺手加品牌化 404 文案「This page wandered off like a cat 🐱」 |
| P1-6 | 移动端全站复检 | 本轮巡检以桌面端为主;执行日用 375px 视口把首页/PDP/向导全滚一遍,重点看向导照片格和 CT 卡片 |