核心实施拆解
从选型到加购:三条关键前端链路
Fittes 把风口、检修面板和设备安装件做成能隐入墙面、天花和地面的表面系统,同时服务业主、设计师和施工方。店面不能按 SKU 名称陈列完事,而要先固定安装面和开口条件,再让尺寸、饰面、承重与气流进入同一套可筛选、可核对的商品结构。
项目背景
先明确客户怎么选,再决定前端承担什么
用户从 By Product、Finish 或 Room 进入,选择 Wall/Ceiling/Floor Vent、Mount、Niche、Exhaust 或 Filter,再核对尺寸、Framed/Flush、承重、气流和安装。Compare、Quiz 与安装资料降低选错。
Shopify 家居建材前端、产品分类、规格与变体、安装内容和响应式体验。
01按建筑条件发现
从房间、饰面和安装面进入,而不是从型号名称开始
目录按产品类型、房间和墙面/天花/地面交叉组织,让不熟悉商品名的人也能进入正确的风口、检修口或安装件范围。
- 01从产品类型、饰面或房间进入目录
- 02先确定墙面、天花或地面条件
- 03按开口、外形与安装阶段缩小范围
- 04打开还能继续核对规格的候选商品
实现方法
- 系列模板承担第一层切割:产品类型、房间和安装表面;开口、外形、气流和安装阶段落在可筛选规格字段上。
- 尺寸和饰面进入 Shopify 变体,避免把每一种开口条件都做成独立商品。
- Predictive Search 在输入过程中同时返回商品与系列建议,方便已经知道型号的专业用户直达。
部署与验收
- 筛选芯片、已选条件和缺货态在小屏上保持可见,并支持键盘操作。
- 气流、承重和安装步骤放在可运营字段,而不是写进入口脚本,新品上架主要改数据。
- 搜索保留加载与无结果状态,避免错误关键词把人丢进空白列表。
最终效果实现后的变化
- 业主可以从房间或饰面进来,施工方可以从产品类型进来,两条路径落到同一商品族。
- 新型号沿用字段结构即可进入筛选和搜索,不必另做一套入口页。
查看脚本与 Shopify API 依据
predictive-search.jssearch-form.jsShopify Predictive Search API02安装结果确认
用齐平摄影和随变体更新的规格表证明这块墙能装上
商品页要把安装前后的墙面关系、剖面尺寸,以及当前变体的开口和气流同时讲清楚,避免只看见饰面却买错开口。
- 01阅读齐平安装摄影与材料特写
- 02选择尺寸和饰面变体
- 03规格表同步开口、单位与气流
- 04核对安装步骤后再加购
实现方法
- 商品表单与商品信息共享当前变体,规格表里的单位、开口和气流跟随选项更新,各模块不再各自判断选中了什么。
- 媒体画廊和放大层优先放安装摄影与剖面,而不是促销氛围图;滑动序列由 Swiper 驱动。
- 系列卡上的快速加购与商品页主表单共用按钮文案和禁用逻辑,避免列表可买、详情页却不可售。
部署与验收
- 画廊锁定安装前后的画面比例,避免把墙面缝隙裁掉。
- 规格表、安装说明和推荐做成可重排的 section 与 block;主题编辑器调整模块后,通过 section 事件和 pubsub 重新绑定画廊与表单。
- 购买仍走主题商品表单,媒体或滑动层失败时不阻断变体选择和加购。
最终效果实现后的变化
- 切换尺寸或饰面时,安装效果和开口数据一起更新。
- 系列卡片与商品页对能否购买给出同一判断。
查看脚本与 Shopify API 依据
product-form.jsproduct-info.jsmedia-gallery.jsproduct-modal.jsswiper-bundle.min.jspubsub.jsquick-add.jsCart Ajax: add03型号核验与配件
下单前用问答、对比和兼容关系拦住错规格
外形接近的风口需要同一组规格来对齐比较;滤芯和安装附件必须连到对应壳体,而不是写在描述里。
- 01按安装场景回答选型问题
- 02把开口、齐平/有框和气流按列对齐
- 03确认主体后查看兼容滤芯与安装件
- 04零售直接购买,或转入 Trade 说明
实现方法
- 公开店面的选型问答把房间、安装面和开口收成可执行的商品范围,降低因命名不熟造成的误入。
- Compare Models 用同一组规格字段按列对齐型号,而不是为每组对比另做一张图。
- 商品页通过 Product Recommendations 带出兼容滤芯和安装附件,配对关系放在商品数据里,不手写进描述。
部署与验收
- 推荐区异步加载,接口失败时不挡住规格、价格和购买。
- 零售文案与 Trade 条款分层维护,避免把施工条款写成消费者促销。
- 问答、画廊和表单在 section 重载后重新订阅,避免编辑器改过模块顺序后交互失效。
最终效果实现后的变化
- 用户能在下单前排除开口或安装方式不匹配的型号。
- 滤芯和安装件跟着主体出现,日后更换不必重新猜测兼容关系。
查看脚本与 Shopify API 依据
quiz-renderer.jsProduct Recommendations APIproduct-form.jscart-drawer.jsCart Ajax: add运营交接
上线之后,运营团队可以继续维护
- 目录按风口、检修面板和设备安装件展开,再与房间、安装表面交叉;Flush Wall Vent Luxe、Brack Kit Luxe 与 smash-plate 安装件同属这一商品族。
- 尺寸和饰面作为 Shopify 变体;开口、外形、气流、承重和安装阶段作为可筛选规格字段。
- 替换滤芯和安装附件通过兼容关系连接壳体,配对不写进描述正文。零售与 Trade 共用商品族,但展示层级不同:消费者先看房间和饰面,施工方先看开口、承重和安装阶段。
- 美国英语店面以 USD 结算,结账预加载为 en-US。英寸开口、安装责任和退换说明作为该市场可编辑内容,并与变体规格同步。
- 地点脚本和自提查询只提供店面位置信号,不能替代运费与退换政策模块。
- 可售饰面按库存更新;品牌未覆盖地区的安装承诺不写进通用模板。
资料说明公开来源与核验边界
公开资料来源
内容核验
行业、商品与公开功能依据品牌官网核验;无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。
公开信息最近核验:2026-08-12