Outer Shopify 产品配置器：我们开发了什么，Shopify 保留了什么

基于真实项目，介绍如何将 Shopify 现有商品配置映射到定制 3D 户外家具体验。

引言

我们开始 Outer 项目时，面对的并不是一个从零搭建的电商系统。Outer 已经通过 Shopify 运营线上商店，商品配置和商业规则也已在现有系统中建立。项目的机会在于：不必重新建设商店背后的系统，也能让客户以更直观的方式探索和组合户外家具。

我们为 Outer 开发了一套定制 3D 配置器，将商品选择带入交互式环境。客户可以探索模块化休闲家具布局、切换面料、添加桌子和配件，并通过分步骤的配置体验查看自己的选择。配置器呈现在 Outer 的 Shopify 商店页面中，而商店原有的电商购买流程得以保留。

这篇案例记录了项目中的关键决策和开发工作：哪些内容原本由 Shopify 管理，INTR 为新的交互体验开发了什么，商品选项如何在 3D 中呈现，以及定制项目完成后客户会收到什么。

1. 3D 开发开始之前，Shopify 已经具备什么

Outer 原本就拥有正常运营的 Shopify 商店。商品目录、商品选项、商品变体和商业设置都在现有商店中管理。这一点很重要，因为增加 3D 配置器并不自动意味着需要另建商品数据库，或替换现有电商平台。

在这个项目中，我们将 Shopify 已有的商品配置作为客户选配的依据。我们的工作不是在第二套系统中重新创建商品管理、库存管理、定价规则或购买流程，而是让相关的现有选项能够通过一个新的、围绕产品设计的界面呈现出来。

这个起点决定了项目范围。我们没有要求品牌把商品迁移到另一个平台，而是专注于如何让客户以更直观的方式做出选择，并在 3D 场景中看到结果。现有商店继续承担电商业务基础，配置器则提供一种新的商品交互方式。

2. 在开始 3D 开发之前，需要先确定什么

在制作视觉体验之前，我们需要理解商品本身如何组织，以及客户应该如何进行选配。产品配置器不只是一些好看的按钮。每个控件都需要有清晰的含义、有效的选项，以及可预期的产品变化。

对于模块化户外家具，客户可能需要选择座位布局、面料、桌子或配件。这些选择并不完全相同。有些会改变家具的可见结构，有些会改变材料外观，还有一些则会向整体组合中增加独立商品。界面需要让客户理解这些差异。

因此，我们先把这项工作视为选项映射问题，再进入 3D 呈现：识别商店已经定义的选项，确定每个选项如何出现在配置器中，并明确客户选择之后，3D 体验应该发生什么变化。

这并不是在论证配置器 App 的好坏，而是在记录一个真实项目如何确定开发范围。对于较简单的商品或标准化流程，现成 App 可能已经足够。Outer 项目的具体需求，是围绕现有商品配置体系，打造一种特定的家具选配体验。

3. 将现有商品选项映射到 3D 控件

项目的核心实现工作，是让新配置器中的选择控件，与商店原本使用的商品选项和对应参数建立映射。我们根据客户理解家具的方式设计可见控件，同时让这些控件与已有商品配置保持对应。

需要特别区分配置器按钮和 SKU。按钮是一种交互控件，它可能代表一个商品选项或选项值；最终可以购买的商品或变体，则取决于商店原本的商品结构。一个完整配置可能包含不同类型的选择，并不是每个可见控件都代表一个独立库存单位。

明确这一区别，有助于让商品体验保持直观，同时避免另建一套商品目录。客户看到的是清楚的选择控件，3D 场景根据选择产生变化，而相关商品选择仍然连接在商店现有的电商体系中。

对于拥有多个产品系列的品牌，同样的原则也很重要。配置器应该反映当前商品实际提供的选项，而不应该暗示所有产品都拥有相同的材料、颜色、组合方式或库存状态。

4. 将选项组织成三步家具配置体验

Outer 的配置器将选择过程组织成三个阶段。线上界面显示的步骤名称分别是 Outdoor Lounge、Coffee & Fire Tables，以及 Side Tables & Accessories。客户可以按照户外组合的主要组成部分逐步配置，而不必在一个冗长的选项列表中寻找所有内容。

在 Outdoor Lounge 阶段，客户可以探索不同的模块化座位布局。真实采集的项目画面包括五座无扶手布局，以及 L 型和 U 型组合。这些状态的区别体现在家具结构上：客户并不是简单地更换一个颜色色块，而是在场景中看到不同的家具组合。

面料控件则提供了另一类选择。配置器整体体验中观察到的面料名称包括 Palisades Cream、Pacific Fog Gray、Deep Sea Navy、Dark Pebble Gray 和 Sandstone Gray。部分商品卡片会显示四个可见色块，具体可选范围可能因商品而异。因此，不能将这五个名称理解为每一件商品都必然提供全部五种选择。

后续步骤允许客户把桌子和配件加入整体组合。采集画面中的示例包括 OuterStone 火盆茶几和柚木边桌。体验中还可以看到一个名为“Explore Outdoor Dining”的屏幕入口。这些控件帮助客户从选择单件家具，逐步转向考虑更完整的户外空间组合。

5. 展示选择后的结果，而不只是选中的选项

3D 配置器的价值，在于把客户的选择与实际呈现的结果连接起来。一个选中的标签可以告诉客户自己选择了什么，而能够响应选择的 3D 场景，则可以帮助客户理解该选择会怎样改变正在考虑的家具。

在 Outer 的配置体验中，真实采集的状态展示了不同沙发布局、面料外观和新增家具部件。客户可以从不同视角观察场景，而不必只依赖一组彼此独立的商品照片。当产品采用模块化结构，最终组合又取决于多个选择时，这一点尤其重要。

界面也让选择过程保持有序。客户按照不同阶段操作，在具体产品语境中查看选项，并能够回顾已经组合的内容。我们的目标不是为了装饰而加入 3D，而是让客户在做出购买决定时，更容易理解商品选项。

6. 保留 Shopify 原有购物流程

配置器在完成视觉选配之后，还需要提供清晰的下一步。对于 Outer，配置体验连接到商店已有的购物旅程，包括购物车和结账步骤。客户不必把 3D 场景当成一个与购买过程脱节的演示，然后再从头开始购物。

项目中的重要决策，是保留已经建立的电商系统。Shopify 继续作为商店的商品和购买环境，定制配置器则提供新的选配界面，并将选配过程衔接到既有购买流程。

2026 年 11 月 2 日采集的一张购物车画面中，可以看到所选家具商品、各自显示的价格以及购物车合计金额。这只是一次线上会话的记录，并非固定价目表或报价。商品价格、优惠、税费处理和库存情况都可能随时间或市场变化，因此本文不把截图中的金额作为长期有效的商品事实。

截图可以证明客户可见的选配到购物车路径，但不应被用来推断私有实现细节，例如某个具体 API、内部数据结构，或每一项配置属性究竟如何保存在订单记录中。解释本项目面向客户的价值，并不需要披露这些细节。

7. 让交互界面围绕真实产品设计

家具配置器不能只是在 3D 模型旁边放置一列选项。控件、步骤和视觉反馈需要反映客户实际如何选择商品。模块化沙发、桌子和配件在最终组合中承担不同作用，因此界面应该帮助客户在选配过程中理解这些差别。

这也是 Outer 配置体验采用分步骤流程，并让选项与 3D 场景同时呈现的原因。界面围绕具体商品和真实选配过程设计，而不是把一个通用表单简单放在 3D 模型旁边。

这种方式也适用于其他拥有重要视觉或结构选项的品牌。具体设计取决于商品目录、有效组合规则、视觉资源和购买流程。配置器应该从这些实际情况出发，而不是假设所有产品都适用同一种控件模式。

8. 项目交付：源文件与源代码

定制配置器完成后，它应当是一项项目交付成果，而不只是客户在订阅有效期间可以访问的托管页面。项目完成后，INTR 会向客户提交项目源文件及源码。

这意味着客户收到与项目开发相关的文件和代码，而不是只能通过第三方配置器平台账号访问成果。这也是 INTR 定制开发方式的重要组成部分：项目围绕客户的产品和需求开展，完成后交付对应的项目源文件及源码。

第三方授权软件和单独授权资源仍然受其适用许可约束。交付项目源码，不应被理解为第三方软件或资源的使用权也一并无条件转让。

9. 其他 Shopify 品牌可以从 Outer 项目中获得什么启发

Outer 项目展示了一种围绕现有 Shopify 商品配置体系增加定制 3D 体验的实际方式。它并不意味着每一家商店都需要定制配置器，也不意味着标准 App 不适用。正确方案取决于商品类型、选项数量及其关系、所需视觉体验，以及现有购买流程。

对于正在考虑类似项目的品牌，我们建议在开发前先梳理几项内容：现有商品目录；每件商品可提供的选项和值；这些选择与商品变体及可购买项目的关系；可用材料和 3D 资源；用户选择后需要发生的视觉变化；以及最终选配结果如何进入商店现有的购物车和结账流程。

同时，也值得提前确定：客户在加入购物车之前，需要通过配置器理解哪些信息。对于部分商品，这可能是颜色和表面处理；对于模块化家具，则可能包括布局、部件、材料和搭配商品。项目决策越清晰，就越容易设计出真正服务购买过程的配置器。

Outer 项目的目标，是将已有商品选项带入更加直观、分步骤的体验，同时保留已建立的 Shopify 电商流程。这也是本项目最重要的启发：品牌可以重新设计客户配置商品的方式，而不必因此自动替换已经在运营的商店系统。

结语

Outer 配置器展示了如何围绕现有 Shopify 商品体系开发定制 3D 体验。INTR 将已有商品选项映射到新的 3D 控件中，通过三步引导流程呈现模块化户外家具，并将配置体验衔接到商店原有购买流程。

对于仅靠静态选项难以充分理解的商品，这种方式可以帮助品牌以更直观、更符合产品特点的方式呈现选配过程。起点并不是把所有东西重新建设一遍，而是先理解当前商店已经具备什么，再找出客户体验缺少什么，并围绕这些需求开发合适的交互层。

体验 Outer 3D 配置器 ， 查看 INTR 的 Outer 项目案例 ，或 联系 INTR 讨论定制 3D 产品体验。

作者简介

Ziming Hu 是 INTR 创始人，专注于定制交互式 3D Web 体验。他与产品品牌合作，将复杂的商品选择转化为可以在浏览器中探索、配置和用于数字化销售的交互体验。