案例作品集 浏览精选项目

Shopify Plus 升级月费减免+最高抵扣$4800开发费用 - WesWoo专属优惠

模块化厨房与家居

TERMINO

TERMINO 是项目制模块化厨房案例:Framer 承担高端品牌与空间叙事,Shopify Storefront API 提供商品/商务数据,配置器、Showroom 和 B2B 询价完成转化。

访问项目官网
TERMINO 柏林模块化厨房空间
品牌官方公开视觉

核心实施拆解

从选型到加购:三条关键前端链路

TERMINO 卖的不是一件可立刻结账的成品厨房,而是一套可组合的铝合金系统。WESWOO 把空间叙事、模块说明和项目咨询放在 Framer 前端,把模块、价格与可售状态交给 Shopify Storefront API,让配置既能被讲清楚,也能被查到对应商务数据。

项目背景

先明确客户怎么选,再决定前端承担什么

购买决策

用户先理解品牌系统,再查看 Single-Drawer、Open、Sink、Induction Hob、Oven Module 及 Island/Wall System,随后用 3D Configurator 或配置内容组合方案,进入 Estimate、Showroom 或项目询价。

交付边界

Framer Headless 前端开发;Shopify Storefront API 对接;模块化内容组件;配置、询价、Showroom 与 B2B 入口;响应式适配。

01前后端分工

空间由 Framer 讲述,模块由 Storefront 提供

把品牌页面从 Shopify 主题里拆出来,让厨房摄影、系统说明和商务数据各有明确职责,互不绑架。

  1. 01进入品牌首页与空间叙事
  2. 02用 Framer 组件组织系统与模块内容
  3. 03通过 Storefront API 读取模块、价格与可售状态
  4. 04把询价、展厅和标准交易分成不同出口

实现方法

  • Framer 负责页面编排、动效和可复用内容组件;Shopify 只作为商品与商务数据源,经 Storefront API 连接。
  • 公开站点加载 Framer 站点包,页面状态由前端组件持有,而不是 Liquid section 或主题 Ajax 资源。
  • 接口契约覆盖模块记录、变体映射、库存和价格;询价、Showroom 预约与标准结账保持明确边界。

部署与验收

  • 缓存、空状态和错误回退写在 Framer 组件里,商务查询失败时模块说明和联系入口仍可阅读。
  • 标准化可售部件若进入 Shopify 交易,也不改写品牌页的内容结构。
最终效果实现后的变化
  • 厨房空间、材质特写和系统说明不再受主题模板限制。
  • 模块价格与可售范围可随 Shopify 目录更新,而不必重做整站叙事页。
查看脚本与 Shopify API 依据
Shopify Storefront APIscript_main.BlrV35tL.mjs
02模块目录

把单抽、水槽和岛式系统写成可组合对象

目录不是成衣式 SKU 列表,而是可查询的铝合金模块;岛式或墙式系统再把这些模块聚合成一套厨房。

  1. 01先理解系统与材质
  2. 02浏览单抽、开放、水槽、炉灶和烤箱模块
  3. 03在岛式或墙式系统中组合
  4. 04将配置对应到同一套模块记录
  5. 05再决定标准部件交易或项目询价

实现方法

  • 单抽、开放、水槽、炉灶和烤箱模块作为可独立寻址的对象;岛式与墙式系统再聚合这些模块。
  • 尺寸、材质、台面兼容和安装条件进入结构化字段,供配置摘要与 Storefront 查询共用。
  • 标准化可售部件与项目询价分成两条路径,但读取同一套模块记录,避免目录被复制成两份。

部署与验收

  • 案例空间和展厅作为独立内容维护,不塞进模块描述。
  • 前端只展示 Storefront 返回的可售范围,避免出现无法交付的组合。
最终效果实现后的变化
  • 用户能先看懂模块如何组成厨房,再决定询价还是购买标准部件。
  • 一次配置可以对应到商务数据,运营不必为叙事页和商品页各维护一份目录。
查看脚本与 Shopify API 依据
Shopify Storefront API
03项目转化

配置完成后,走向估价、展厅或 B2B 询价

高客单厨房的下一步通常是方案沟通,而不是立刻加购;配置摘要要能带到估价、柏林展厅或项目联系。

  1. 01在 3D 配置器中形成方案
  2. 02在配置摘要中确认尺寸与材质
  3. 03选择估价、展厅预约或 B2B 联系

实现方法

  • 配置会话留在 Framer 组件中,选中态体现在配置摘要,而不是满屏高亮。
  • 行动按阶段出现:理解系统、组合模块、提交估价或预约展厅,避免每个画面都抢结账。
  • 询价与预约作为独立提交路径;公开站点以弹层表单承接联系,不把项目沟通写成主题购物车。

部署与验收

  • 商务查询失败时不清空配置说明,用户仍可提交联系或查看展厅信息。
  • 响应式把剖面图和尺寸表变成可滚动图层,避免 3D 或长图挡住询价入口。
  • 询价文案中的单位、税费和交付条款与当前可售模块保持一致。
最终效果实现后的变化
  • 用户带着具体模块组合进入估价或展厅沟通,而不是对着一长串 SKU 自行拼单。
  • 长页面任意阶段都能继续项目咨询,不依赖加购按钮。
查看脚本与 Shopify API 依据
Shopify Storefront APIloader.js

运营交接

上线之后,运营团队可以继续维护

商品与内容
  • 目录对象是可组合的铝合金模块,按单抽、开放、水槽、炉灶、烤箱以及岛式/墙式系统维护。
  • 尺寸、材质、台面兼容和安装条件作为结构化字段,供配置摘要与 Storefront 查询共用。
  • 案例空间、展厅与模块描述分开维护,避免把项目摄影塞进商品字段。
市场与日常运营
  • 英语站点服务德国与欧洲项目客户;毫米尺寸、税费、运输、安装覆盖和展厅访问按地区维护。
  • 模块与材质资料可跨地区复用;服务半径、项目资格和联系人单独更新。
  • 询价与 B2B 入口只展示当前可交付的模块,避免前端出现无法覆盖的组合。
资料说明公开来源与核验边界

公开资料来源

内容核验

行业、商品与公开功能依据品牌官网核验;无法从前台验证的 App、后台配置和经营数据不作推断。WESWOO 的工作范围只按项目记录和客户授权表述。

公开信息最近核验:2026-08-20

你的下一步

让品牌独立站成为可持续增长的基础设施

讨论你的项目