Le Monde Gourmand 以 Gourmand Beauty 之名零售，是 Tru Fragrance + Beauty 旗下的美食调香水品牌。节日需求是一张与 Tru Western 指南性格不同的商店页：更明亮、更具编辑感，围绕套装和香氛叠搭展开，核心是一款会员专属的新品和一个套装优惠。两张页面从同一份检查清单出发并行设计与构建，并在同一晚上线。
我负责全流程：与品牌创意和电商团队的设计轮次、响应式原型、在线上主题中的 Liquid 构建、素材准备、质检，以及推送到生产环境。
经过四轮仍然成立的设计决策
快速筛选器采用图片磁贴（Tru Western 页面用的是按钮），标题与四个磁贴在所有桌面尺寸下都位于首屏内，手机上为两列网格。产品行在移动端可横向滚动，带可见的露出和细指示条；筛选器本身从不滚动。
销售逻辑来自需求文档和店铺自身的机制，而非页面：
- 新品为会员专属。该区块读取店铺的“会员专属产品”标记：已登录会员看到产品和按钮，访客看到“加入 Rewards 即可购买”和“已是会员？登录”。产品页在品牌发布之前保持隐藏。
- 套装优惠展示店铺的多买多省阶梯（两件、三件、四件、五件及以上），并引导至套装搭配器，价格从不在页面中重复。
- 香型分区使用店铺自己的“Shop by Scent”区块，为本季精选为四个标签，而不是复制一份。
动效在一次评审后按品牌偏好调整：应其要求移除了平滑滚动层和视差，页面原生滚动，保留的动效是入场、悬停状态和倒计时。没有问题，因为这些都是分区设置。
构建
九个 lp- 分区加上店铺自己的精选系列分区，共用一张卡片和一个走主题加购路径的快速加购片段。这一点在这里很关键：购物车抽屉打开时带着会员买赠横幅和店铺已在运行的推荐。
每个照片槽位都有自己的构图设置（桌面与手机文件、缩放、位置）和可选的高光点，即在编辑器中按坐标放在照片上的小闪光，手机裁切有单独的点位。默认值来自已批准的样稿，页面第一天就呈现正确，团队仍可调整一切。
图片通过 lp-media 片段输出，它根据槽位和构图缩放写入 sizes。18 张最终照片通过 Admin API 上传到 Shopify Files，带 SEO 文件名和替代文本，然后依据清单分配到模板，每个文件都按其槽位在 1440@2x 和 390@3x 下所需像素进行了核对。
{%- comment -%} 会员门槛，简化版：标记在产品上，判断在 Liquid 中 {%- endcomment -%}
{%- assign gated = product.metafields.loyalty.exclusive | default: false -%}
{%- if gated and customer == null -%}
<a class="lp-btn" href="{{ section.settings.rewards_url }}">Join Rewards to shop</a>
<a class="lp-link" href="{{ routes.account_login_url }}">Already a member? Log in</a>
{%- else -%}
{%- render 'lp-atc', product: product, variant: product.selected_or_first_available_variant -%}
{%- endif -%}
发布前先测量
预览交给客户之前，我对每张页面在移动端和桌面端各跑了三次 Lighthouse，把中位数与店铺自己的首页放在一起。有价值的部分是把我们的和店铺的分开：axe 在页面分区内报告零问题，移动端主线程开销来自店铺的应用，页面自身脚本远低于它们。这些数字写进了上线笔记，团队因此知道剩余的性能预算真正在哪里。
上线
用线上主题的全新拉取加上新文件构建预览主题，与团队共享供其编辑。上线当天：重新拉取预览，核对 17 个代码文件与仓库一致，原样采用团队留下的模板，以 --only 与 --nodelete 向线上主题推送 18 个文件。前后校验和：17 个文件新增，1 个片段更新（页面的社交分享卡），其余 491 个文件原封未动。页面带模板、搜索标题、描述和分享图创建，并以新访客身份在五种视口下检查：无 Liquid 错误，无溢出，31 张图片带替代文本，42 个链接返回 200，快速加购在桌面和手机上均正常。
这个项目说明了什么
同一套流程产出两张品牌页面，同一晚上线，各自位于自己的线上主题内，各自完全可编辑，各自有记录在案、可回滚的部署。会员门槛和套装阶梯是我会向商家展示的部分：页面尊重店铺的规则，而不是重新实现它们。