核心实施拆解
从选型到加购:三条关键前端链路
NATTAUP 面向德国及国际市场的英语顾客,卖的是可核对的面料和穿着方式。店面要把 Mesh、Modal、Ice Silk 做成可筛选的商品结构,让尺码、护理和完整搭配落在同一条购买路径上,而不是把可持续停在首页口号。
项目背景
先明确客户怎么选,再决定前端承担什么
用户可按 Men/Women、Underwear、Base Layer、Ready-to-Wear 或 Travel、Motion、Night 等场景进入,再比较 Mesh、Modal、Ice Silk 等材质、版型、尺码和颜色。Build a Full Look 与 Gift Studio 承接组合和礼赠。
WESWOO 的重点应把品牌主张具体化为“材质—版型—场景—搭配”结构,使可持续内容能够被验证、筛选和购买,而不是停留在首页口号。
用材质和场景把目录收成可比较的商品族
顾客从性别、内衣、贴身层、成衣,或 Travel、Motion、Night 等场景进入后,应能用 Mesh、Modal、Ice Silk 把范围收到可并排比较的商品族,而不是面对一整仓服装。
- 01按男士/女士或内衣、贴身层、成衣进入
- 02用 Mesh、Modal、Ice Silk 收窄商品族
- 03对照 Travel、Motion、Night 等穿着场景
- 04打开单品,留下尺码和颜色待选
实现方法
- 目录把内衣、贴身层、成衣和配饰做成可交叉浏览的商品族,性别与生活场景是进入方式,而不是把全部服装倒进一个列表。
- 尺码和颜色进入 Shopify 变体,库存与价格按可售单元结算;面料、弹性、触感和护理作为可复用规格字段,系列筛选和商品页读同一套,避免每条描述各写一段。
- 输入材质名或场景词时,预测搜索返回商品与系列建议,先把顾客送进正确范围,再比较版型。
部署与验收
- Sustainable Series、Build a Full Look 作为可运营的系列入口;首页场景滑动读取同一套商品族,活动页不另建分类。
- 检索在建议层完成,并保留输入中与无结果状态,避免每次查找都整页跳转。
- 商家在主题编辑器里重排首页模块后,场景滑动按官方 section 生命周期重新挂载,入口仍可点。
- 材质主张可以被筛选和比较,而不只停留在品牌文案里。
- 新品沿用同一套材质字段和商品族后,就能进入场景入口、系列和搜索。
查看脚本与 Shopify API 依据
predictive-search.jssearch-form.jsPredictive Search APIswiper-min-js.jsShopify theme editor mode在商品页同时看清上身效果、可售尺码和护理
商品页要把触感放在促销句前面:先分清服装本体和生活方式图,再选可售尺码与颜色,并在不打断购买栏的前提下读到成分和洗涤要求。
- 01区分生活方式图与服装颜色参考
- 02选择尺码和颜色
- 03展开成分、弹性与护理
- 04按当前变体加入购物车
实现方法
- 尺码和颜色控件具备默认、选中、缺货和禁用状态,并保留可见焦点,选择不能只靠一块颜色完成。
- 成分与护理放进折叠说明,首屏留给身体实拍、价格和购买操作。
- 数量用弹出层调整,提交的是当前尺码颜色对应的可售变体,而不是商品标题。
部署与验收
- 折叠层承载成分和护理,模态层处理需要打断阅读的尺码或说明,避免政策文字把购买栏挤出视口。
- 面料和护理绑定商品对象与主题 schema,商家改材质说明不必改脚本。
- 顾客可以在同一处判断这件是否适合自己,以及当前尺码能否加入购物车。
- 护理说明出现在购买前,但商品页不会被写成一篇政策文档。
查看脚本与 Shopify API 依据
details-disclosure.jsdetails-modal.jsquantity-popover.js让搭配和礼赠继续走商品,而不是离开购买去读文章
单品确认之后,Build a Full Look 与 Gift Studio 应继续给出可筛选的关联单品;加入购物车后,抽屉、行项目和加购提示读取同一份购物车数据。
- 01确认已选贴身单品
- 02从 Full Look 或 Gift Studio 选择关联单品
- 03在购物车抽屉核对照组合和数量
实现方法
- 完整搭配和礼赠按关联商品组织,Look 保持可筛选,而不是写成无法检索的文章页。
- 加购、改数量和更新通过 Shopify Ajax Cart 提交;抽屉、行项目和加购提示都以返回的购物车数据为准。
- 预售、评价与积分等应用脚本与主题购物车并存,但不另开一套篮子。
部署与验收
- 加购反馈留在当前页,成功、数量变化和错误不依赖整页刷新。
- 搭配系列的陈列可以单独改,不必动购物车状态机;主题编辑器重载模块后重新挂载抽屉交互。
- 顾客可以从一件贴身单品走到可购买的组合,而不需要离开商品体系去读搭配说明。
- 抽屉立即回显实际单品和数量,组合购买不会在加购后失去对象。
查看脚本与 Shopify API 依据
cart-drawer.jscart.jscart-notification.jsCart Ajax: addCart Ajax: changeCart Ajax: update运营交接
上线之后,运营团队可以继续维护
- 商品族按内衣、贴身层、成衣和配饰维护,男士/女士与 Travel、Motion、Night 等场景作为入口,而不是另建一套隐藏分类。
- 尺码和颜色留在变体上;面料、弹性、触感和洗涤规则作为可复用规格字段,供系列、搜索和商品页共同读取。
- Build a Full Look 与 Gift Studio 用关联商品维护搭配和礼赠,避免为每个 Look 复制一份无法筛选的页面。
- 站点以英语服务德国及国际顾客,结账预加载为 en-DE,商业文案按欧元市场维护。
- 地区或语言切换是店面级入口,核心加购路径不按目的地复制一套。
- 税费、配送时效和贴身品类退换作为可编辑内容,并与可售变体保持一致;材质和护理可跨市场复用,可售尺码与运输限制需按目的地维护。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验;无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验:2026-08-12