先问自己 3 个问题

在选技术方案前，先明确 3 件事：

  1. 你有多少前端工程师资源？（0 个 / 1–2 个 / ≥ 3 个）
  2. 选配规则有多复杂？（换颜色/材质 vs 百种零件 + 互斥 + 尺寸联动）
  3. 配置结果要不要写进购物车 / ERP / BOM？（只要展示 / 要加购 / 要生产 BOM）

带着这 3 个答案往下看，5 分钟就能选对。

5 种嵌入方式对比总览

# 方式 接入周期 前端资源要求 规则复杂度 购物车集成 BOM / ERP 适用场景
① 官方 3D Model 功能 半天 0 ❌ 仅静态 360° ⚠️ 仅展示 ❌ 只要展示效果，不配
② Shopify App（如 ii3d 官方 App） 1–2 天 0 ✅ 中等复杂度 ✅ 自动写入 ⚠️ 可选 通用品类 + 业务侧自助配置
③ Theme App Extension 3–5 天 1 个前端 ✅✅ 较复杂 ✅ 通过 App Block ✅ 需 API 对接 要定制 UI 风格
④ Web Component 嵌入（iFrame/自定义元素） 5–10 天 1–2 前端 ✅✅✅ 极复杂 ✅ 事件回调 ✅✅ 完整 已有成熟前端团队
⑤ Headless / Hydrogen 自实现 3–6 周 ≥ 3 前端 ✅✅✅ 完全自定义 ✅ 自实现 ✅✅✅ 完整 要做全站 3D 化 / 多端复用

① 官方 Shopify 3D Model 功能

怎么做：直接在 Shopify 后台产品 → 媒体 → 上传 .glb 文件即可。

优点：最快、免费、不用改代码
缺点：只能转圈圈看，不能选配件 / 改材质 / 算价格
建议：如果只是想让产品图不那么"平"，用这个就够了

② Shopify 官方 App（推荐起步方案）

怎么做：在 Shopify App Store 搜索「ii3d」→ 安装 → 后台绑定产品 → 上传 3D 资产 → 搞定。

优点：
  ✅ 1–2 天上线，业务侧自己就能配
  ✅ 自动写入购物车 Line Item（含配置 JSON）
  ✅ 配色 / 材质 / 模块 / 加价规则全支持
  ✅ 订单详情页自动带配置截图与 BOM
缺点：
  ⚠️ UI 风格跟随 App 提供方，只能微调
  ⚠️ 超出 App 能力边界的复杂规则（比如 A 影响 B 影响 C 的三级联动）要付费定制
建议：90% 的中低端需求到这一步就够了

③ Theme App Extension（Shopify 官方推荐标准模式）

怎么做：基于 App 后端能力 + 自定义主题块（App Block），前端自己改 UI。

优点：
  ✅ 不和主题强耦合，换主题也不丢配置
  ✅ Shopify Checkout 自动兼容
  ✅ 2.0 主题原生支持
缺点：
  ⚠️ 必须有一个懂 Liquid + 一点前端的工程师
  ⚠️ 受主题 App Extension 的沙箱限制
建议：有品牌规范，要和官网风格统一的，选这个

④ Web Component / iFrame 嵌入（我们给引擎，你套壳）

怎么做：把 ii3d 配置器作为 <ii3d-configurator product="xxx"> 自定义元素嵌进产品页，监听事件把配置 payload 加进购物车。

// 最小可用接入示例
<script src="https://cdn.ii3d.com/sdk/v1/loader.js"></script>

<ii3d-configurator
  product-id="sofa-modular-v2"
  theme="dark"
  show-price="true"
/>

<script>
  const el = document.querySelector('ii3d-configurator');
  el.addEventListener('config:change', async (e) => {
    const { payload, lineItem } = e.detail;
    // 把 lineItem（Shopify 标准格式）加进购物车
    await fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items: [lineItem] })
    });
  });
</script>
优点：
  ✅ UI 想怎么改怎么改（和网站 100% 风格融合）
  ✅ 配置器和产品页的交互可以做的很深（比如"配置完自动滚动到评价区"）
  ✅ BOM / ERP / 非标定制全支持
缺点：
  ⚠️ 要写代码（接入 5–10 人日）
  ⚠️ Shopify Checkout 里的订单展示要自己加钩子
建议：年 GMV > 3000 万、有成熟前端团队的品牌方，直接从这一步起步

⑤ Headless / Hydrogen 自实现（最大自由度）

怎么做：全站用 Shopify Hydrogen（Remix 框架）搭前端，ii3d 只提供 Headless API：

  • GET /products/:id 拉选项结构
  • POST /configurations/validate 校验配置
  • POST /configurations/quote 算价格 + BOM
  • 你自己用 Three.js / React Three Fiber 写渲染层
优点：
  ✅ 自由 100%：UI / 动效 / 流程 / 多端（App + 小程序 + 官网）复用全部自己定
  ✅ 能做 3D + AI 导购这种"超纲"需求
缺点：
  ⚠️ 周期长（3–6 周起），成本高（≥ 3 人前端 + 图形学工程师）
  ⚠️ 坑自己填（性能、贴图加载、内存泄漏）
建议：有自研引擎野心、或者要做多端 3D 化的集团客户选这个

决策树：3 步选对

问1：我只是想让产品图好看点？
  → 是 → ① 官方 3D Model ✅
  → 不是 → 进入问2

问2：我的配置只是换颜色 / 材质 + 加价？
  → 是 → ② Shopify 官方 App ✅
  → 不是 → 进入问3

问3：我有前端工程师吗？
  → 有 1 个 + 想保留 Shopify 标准 Checkout → ③ Theme App Extension ✅
  → 有 1–2 个 + UI 要高度定制 → ④ Web Component ✅
  → 有 ≥ 3 个 + 做多端 + 要最大自由度 → ⑤ Headless / Hydrogen ✅

一句话结论

  • 起步先装 App（方案②）：最低成本试水，没效果不心疼
  • 跑通 ROI 后再升方案④：数据证明能赚回来，再投入做深度定制
  • 别一上来就方案⑤：除非你真的有“年 GMV 5 亿以上 + 完整技术团队”的体量