Tru Western 是 Tru Fragrance + Beauty 旗下的西部风格香水品牌，运行在 Shopify Plus 上。2026 年节日季的需求是一份礼品指南：承载活动视频、六种购物方式（圣诞袜礼物、30 美元以下、稳妥之选、按系列、送他、送她）、员工推荐、通向香型测验的入口，以及发货截止日期，同时不能触碰店铺的页眉、页脚、购物车和应用。
从第一张线框到最终上线，我负责全部环节：与品牌创意团队的设计轮次、响应式 HTML 原型、在线上主题中的 Liquid 构建、以新访客身份做的质检，以及发布。
设计：把首屏当作第一约束
页面与品牌团队在 Figma 中经历了四轮。最重要的设计决策并非视觉层面，而是首屏：首屏视频加上六个快速筛选按钮必须在所有常见视口的第一屏内可见，让用户在滚动之前就能选择购物方式。
我用测量而不是比例来解决这个问题。做一个页面测试副本，放入真实视频，加一个小覆盖层打印视口尺寸和最后一个按钮的结束位置，在局域网上提供服务，然后在两部 iPhone 和 Mac 的真实窗口尺寸下打开。结果写成一条以 svh 表达的规则，从而把 Safari 的工具栏计算在内：
/* 首屏高度：填满第一屏，并让按钮保持可见。
--lp-above 是运行时读取的首屏真实偏移量，
因为主题的页眉高度变量在紧凑状态下会偏高。 */
.lp-hero {
height: max(calc(100svh - var(--lp-above) - 236px), min(33.33vw, 52svh));
max-height: 56.25vw; /* 不高于 16:9 */
}
@media (max-width: 749px) {
.lp-hero { height: calc(100svh - var(--lp-above) - 120px); max-height: 150vw; min-height: 360px; }
}在 1366×658、1440×900、1920×1080、768×1024、375×620、390×844 和 440×796 下测得的高度记入项目笔记，Figma 画框也设为同样的参考窗口，客户审阅的就是浏览器实际呈现的样子。
构建：Liquid 分区，不写死任何内容
所有内容都以新文件的形式存在于店铺自己的主题中。页面是一个包含九个分区的模板，每个分区按布局而非活动命名，每个都有完整的 schema 和预设：
lp-framed-hero：按断点选择图片或视频，16:9 与 9:16 的胶片 SVG 图层（顶部、底部、片尾卡），品牌印章，首帧海报，声音开关。lp-pill-finder：六个锚点，活动按钮跟随当前可见分区。lp-product-grid：三种布局（成对、单行、主推）共用一张产品卡。lp-collection-tiles、lp-split-panels、lp-quote-cards、lp-pick-and-links、lp-star-divider。lp-shipping-countdown：按发货方式设置截止日期，可编辑，实时倒计时，过期后自动切换文案。
产品卡复用主题的 AJAX 购物车协议，因此“Add to cart”会打开店铺的抽屉，带着免费小样选择器、买赠逻辑和追踪像素，与任何其他页面完全一致。图片经由 lp-image 片段输出，它根据槽位和编辑器中选择的构图缩放计算 sizes，放大的照片会请求在 2x 和 3x 下像素充足的文件。
动效由 CSS 和一个小型原生脚本完成：首屏入场与视差、分区逐级显现、自行绘制的星形分隔线、滚动的倒计时数字。在 prefers-reduced-motion 下和主题编辑器内全部关闭。桌面端由一层平滑滚动把锚点精确送到紧凑页眉下方的像素位置，并在店铺为购物车或搜索锁定滚动时停止。
上线前，品牌团队自己编辑了页面：选品、员工引言、照片、文案。构建提供了控制权，最终的模板属于他们。
素材与上线
最终摄影由品牌创意团队以裁切图交付。我对照每个槽位在 1440@2x 和 390@3x 下所需的像素检查每个文件，对五张不足的图片按相同构图从调色母片重新裁切，然后通过 Admin API 把 28 个文件上传到 Shopify Files，带 SEO 文件名和替代文本，再依据清单分配到模板中。
发布是一次精准推送：仅 26 个文件，单独暂存，以 shopify theme push --only … --nodelete 推送到线上主题。推送前后的全主题校验和证明：25 个文件为新增，1 个片段有改动（页面的社交分享卡区块，增量），其余 464 个文件原封未动，包括团队当时正在编辑的首页模板。页面在后台创建，带模板、搜索标题、描述和分享图，并以新访客身份在 1440、1280、820、390 和 360 下质检：无 Liquid 错误，无溢出，24 张图片带替代文本，27 个链接返回 200，首屏视频在桌面和手机上播放，快速加购在两端都能打开购物车。
这个项目说明了什么
以生产系统的纪律在线上 Shopify Plus 主题内工作：一切都有 schema，代码中没有内容，部署可复现且有证据，设计由真实设备上的测量决定。这与我在 Rodeo Soul Harmony 发布时采用的子域名方案正好相反，对于必须存在于店铺内部的活动页，我更倾向这一种。