核心实施拆解
从选型到加购:三条关键前端链路
LaceMade 用复古公主风和束身轮廓把人留在系列里,但下单发生在胸围、腰线和裙长被确认之后。场合系列负责把人带进正确的成衣范围,产品页再把摄影、尺码变体和版型说明收成一次可提交的选择,而不是让大片和购买控件各说各话。
项目背景
先明确客户怎么选,再决定前端承担什么
用户从 New Dream、Corsets、Dresses、Cottagecore、Prom 或 Curve & Plus 进入,再按场合、轮廓、颜色、尺码与价格选择。模特信息、尺码表、细节、评价、造型建议和退换政策负责确认。
Shopify 时尚前端、系列与场景导航、商品卡、语言币种和移动端体验。
01场合分流
先用场合系列收窄礼服范围,再打开成衣
用户带着舞会、约会或日常复古进来时,应先进入 New Dream、束身、礼服、Cottagecore、Prom 或 Curve & Plus,而不是在全部成衣里自行辨认轮廓和大码。
- 01从场合或系列入口进入
- 02按轮廓、颜色和尺码缩小范围
- 03打开对应成衣页
- 04常规款与大码按独立商品成交
实现方法
- New Dream、束身、Dresses、Cottagecore、Prom 与 Curve & Plus 承担场合分流,系列对象负责发现,不承担可售尺码。
- 颜色和尺码进入商品变体;面料、模特与护理说明留在内容层,不进入变体矩阵。
- 常规款与大码共用同一套视觉语言,但保持独立 SKU,避免把版型差写成颜色差。
- 预测搜索在输入阶段返回商品与系列建议,先把关键词送回正确的成衣范围。
部署与验收
- 上新时优先维护系列页与筛选维度,成衣页复用同一套变体结构。
- 运营编辑落在系列、版型说明和政策模块,不把场合文案写进尺码选项。
- 系列视觉可跨市场复用;胸围单位、配送和退换按目的地分开更新。
最终效果实现后的变化
- 用户到达成衣页时,场合已经收窄,只需确认这件衣服的尺码和版型。
- 新品沿用系列加变体结构即可进入发现路径,不必为每一季重做分类逻辑。
查看脚本与 Shopify API 依据
Predictive Search API02版型看见
用多角度人体把胸腰和裙长说清楚
束身成衣页要用身体轮廓证明结构,尺码按钮、尺码指南和退换说明必须从戏剧化摄影里被让出来,尤其在移动端不能被首屏大片压住。
- 01阅读多角度人体与裙长
- 02打开尺码指南与模特说明
- 03识别颜色和尺码的可售状态
- 04在购买栏旁看到退换说明
实现方法
- 画廊优先使用能看见胸腰结构和裙摆长度的人体照片,氛围裁切只作补充,不替代版型证据。
- 颜色点选、尺码按钮和加购使用稳定的高对比状态,缺货尺码在提交前即可感知。
- pagefly-product-media.js 与 pagefly-product.js 扩展成衣媒体和购买布局,theme.js、custom.js 与 vendor.js 仍作为主题交互基座。
- 尺码指南弹层提供可关闭路径,打开时不得盖住退换说明。
部署与验收
- 桌面端让长图画廊与购买栏并列;移动端裁切活动大片,并把尺码控件留在首屏细节之外仍可到达的位置。
- 束身成衣页按 JSON 模板拆开画廊、尺码和购买区域,面料与护理文案可单独改、不碰变体。
- 尺码建议层停在应用扩展,不改写主题里的尺码变体。
最终效果实现后的变化
- 用户可以同时被造型说服,并在同一屏完成对版型的核对。
- 换季大片可以单独替换,不必重做尺码区和购买栏。
查看脚本与 Shopify API 依据
pagefly-product-media.jspagefly-product.jstheme.jscustom.jsvendor.js03尺码提交
提交的尺码必须是当前可售变体
看中 Love Flower Notes 束身裙或 Crash Landing On You 连衣裙后,页面展示的颜色、尺码和加购对象要指向同一组变体,版型建议和搭配推荐只能辅助,不能改写这件成衣。
- 01选择颜色与可售尺码
- 02用尺码建议层核对版型
- 03通过商品表单加入购物车
- 04在成衣上下文中查看相关搭配
实现方法
- 商品表单只提交当前选中的尺码和颜色变体,媒体和价格跟随这组选项,不再另算一套结果。
- SizingPlugin.prod.js 提供版型建议,作为覆盖层存在,不进入主题变体。
- 加购、改数量和更新购物车走 Cart Ajax,不依赖整页刷新或局部 section 重绘。
- 商品推荐按当前成衣上下文给出相关搭配,退换与配送说明贴近购买按钮。
部署与验收
- 地区拦截由 blocker.js 放在店面边缘,不写进成衣表单,避免把访问规则做成尺码选项。
- 公开源码没有独立的购物车抽屉文件,加购反馈留在主题包与 Pagefly 产品脚本内部处理。
- 推荐区服务搭配加购;主体价格、变体和购买按钮不依赖推荐接口才能工作。
最终效果实现后的变化
- 用户看到的尺码,就是加入购物车的那条变体。
- 版型帮助、地区访问和搭配推荐可以并存,而不改写这件成衣的可售选项。
查看脚本与 Shopify API 依据
Product form behaviorVariant behaviorSizingPlugin.prod.jsCart Ajax: addCart Ajax: changeCart Ajax: updateProduct Recommendations APIblocker.js运营交接
上线之后,运营团队可以继续维护
- 公开目录以束身轮廓、礼服和复古连衣裙为可售成衣,系列按 New Dream、束身、Dresses、Cottagecore、Prom 与 Curve & Plus 分流场合。
- 尺码与颜色进入变体;面料、模特和护理说明作为内容维护,不写进变体矩阵。
- 大码与常规款保持同一设计语言、独立 SKU,新品复用成衣页的画廊、尺码与购买拆分。
- 结账预加载使用 locale=en-US,默认交易语境为英语与美元。
- 部分扩展请求带有 lacemadeuk 店铺参数,访问范围和尺码表达可能按地区分开;blocker.js 在店面边缘处理地区拦截。
- 尺码表、胸围单位、配送与退换按目的地维护,系列视觉可以共享,上新不必重做核心购买路径。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验;无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验:2026-08-12