Shopify 3D/AR 与虚拟试穿指南：模型、主题和上线验收

Q: 为什么后台上传成功，前台仍看不到模型？

媒体处理可能是异步的，Admin GraphQL 的处理状态达到 READY 后才适合继续前台验收。还要检查媒体是否被正确关联、预览图是否可用、主题是否输出模型标记、缓存是否更新，以及设备是否支持对应查看路径。

“虚拟试穿”常被当成 Shopify AR 的同义词，实际却是两条不同的产品路线。Shopify 原生能力主要解决商品 3D 模型的展示、旋转、缩放和把模型放入真实空间；服装换色、衣服贴合人体、妆容叠加和尺码建议，则需要身体或脸部追踪、遮挡、渲染与商品数据协同。做方案时先把能力边界写清楚，才能决定是使用商品媒体、接入第三方服务，还是开发一套定制体验。

本文按素材、主题、接口、性能、无障碍、双语内容和上线验收展开。文中的平台事实以 Shopify 帮助中心和开发者文档为准；店铺版本、主题、设备和供应商变化后，仍应在自己的开发店复核。

先分清 3D 商品媒体与虚拟试穿

Shopify 商品媒体中的 3D 模型，是商品详情的一种可交互媒体。顾客可以拖动模型查看形状、缩放细节，在支持的移动环境中把物体放到空间里观察。它适合家具、箱包、鞋、设备和外形相对稳定的商品，也适合用一份可复用模型补充静态照片。这里的“放到空间”是对物体的 AR 摆放，不等于模型会识别人身并自动穿到顾客身上。

虚拟试穿是另一层业务能力。服装需要识别身体姿态、人体区域、布料遮挡、尺码或版型规则；美妆需要定位面部区域、颜色混合、光照和相机权限。平台原生商品媒体不会自动提供这些追踪、合身判断或妆效算法。项目可能需要第三方 SDK、应用代理、定制前端和单独的隐私同意流程，供应商的能力、费用、数据处理和退出方式也要单独审查。

用顾客任务定义交付边界

先问顾客要完成什么动作：看清商品轮廓、判断摆放比例、比较材质，还是在相机画面里查看服装或妆容效果。前几项通常可以从 3D 商品媒体开始，最后一项应进入虚拟试穿评估。需求记录要写出设备范围、商品类型、市场、主题、数据流、失败回退和负责人，避免用“AR”一个词掩盖不同的工程工作。

Shopify 原生 3D 能力的组成

Shopify 的商品媒体支持图片、视频和 3D 模型等类型。3D 交付常见的文件格式是 GLB 与 USDZ，单个文件有 500MB 的上限；超过 15MB 时平台可能执行自动优化。部分建模交付建议会提到 4MB 或 15MB，它们是特定流程中的建议值，不应被写成所有店铺和接口都适用的硬限制。上传前应记录文件大小、格式、压缩方式和模型版本。

模型查看器与 AR 摆放

Online Store 2.0 和 Horizon 等官方主题对商品媒体有相应支持，旧主题或深度定制主题则要检查 section、媒体循环、按钮样式和 JavaScript 事件。主题可以使用 model_viewer_tag 生成 Model Viewer 标记，并通过 Shopify-XR 连接 iOS Quick Look 或 Android Scene Viewer。不同操作系统、浏览器、相机权限和模型格式会改变实际行为，因此只能把这些路径列为待测适配项，不能把设备覆盖写成统一结果。

模型查看器的首屏要有清楚的静态预览，加载失败时仍能回到照片或视频。按钮文案要告诉顾客是“查看 3D”还是“在空间中查看”，并说明需要相机权限。模型被打开后，用户应能旋转和缩放；退出 AR 后应回到商品媒体而非丢失商品选择。

Storefront 数据与展示字段

使用 Storefront API 读取商品媒体时，Model3d 对象可提供 alt、previewImage 和 sources 等信息。前端应把替代文本、预览图和可用来源当作展示数据的一部分，不要只保存一个模型 URL。不同 API 版本和商店配置的字段可用性需要实测；文档示例若显示 latest，也不代表项目可以忽略版本锁定和升级验收。

从建模文件到可用商品媒体

一份能旋转的模型不等于一份可交付的商品资产。建模任务先确定真实尺寸、单位、坐标原点、朝向、可见部件和文件命名。随后检查 UV、PBR 材质、纹理路径、法线、透明度、动画是否必要，以及在不同光照下颜色是否仍可辨认。模型应与静态照片、商品标题、变体名称和包装尺寸互相对应，顾客才不会把展示比例误解为购买规格。

真实尺寸与静态回退

AR 摆放依赖模型的尺度信息。家具、鞋和设备需要用可解释的单位校验长度、宽度与高度；不能只凭导出软件中的数字判断比例。为每份模型保留源文件、导出设置、纹理和审核记录，并在开发店中拿一件有实测尺寸的实物做比对。模型没有通过检查时，静态图片应继续作为可用回退，错误模型不应阻塞顾客阅读价格、库存和购买信息。

预览图、替代文本与命名

预览图要在移动网络下有合理的清晰度和裁切，替代文本要描述商品及视角，而不是只写“3D model”。文件名、媒体顺序和商品内部字段应使用稳定规则，方便内容、开发和客服排查。中文和英文的媒体说明要分别审核；机器翻译可能把材质、颜色或部件名称翻错，影响顾客理解。

主题接入与渐进增强

主题实现应把 3D 当作商品媒体序列的一部分，而不是另起一个无法回退的页面。先确认商品页能输出主图、缩略图、模型查看器、视频和回退内容，再把交互按钮放在同一媒体区域。检查桌面和移动断点、懒加载触发、焦点顺序、关闭动作、错误状态和切换商品时的清理动作。应用区块或自定义脚本若修改同一媒体区域，要记录所有权和发布流程。

按需加载与缓存

商品页首屏先交付标题、价格、主图、购买控件和必要说明，模型在用户选择后再加载。预览图、模型和纹理要设置一致的缓存与失效规则，避免旧文件与新商品信息混在一起。检查网络较慢、低内存设备、旋转多次和返回页面时的表现；浏览器控制台的错误、请求时间和资源大小要留在验收记录中。Shopify 的性能建议可作为主题检查入口，但实际结果仍以目标店铺页面测量为准。

无障碍交互

每个媒体要有有意义的 alt，3D 控件要有可读的按钮名称。键盘用户应能进入、使用和退出模型区域，焦点不能在打开 AR 后丢失；相机权限拒绝、模型加载失败和状态变化要通过可感知的文字或 ARIA live 区域说明。不要让 3D 成为获取商品名称、规格、价格或购买动作的唯一途径，减少动作、视觉和设备能力的差异对购买路径的影响。

虚拟试穿项目需要额外的系统

服装虚拟试穿通常要从相机或上传照片取得人体画面，进行人体分割、姿态估计、服装图层合成和遮挡处理。真实布料会折叠、拉伸、透光，宽松版型和尺码差异也会改变结果。美妆体验要处理脸部关键点、肤色、光照、颜色混合和相机权限。Shopify 原生 3D 媒体可以作为商品模型或静态参考，却不自动完成上述算法。

第三方或定制接入的评估清单

若采用应用或外部服务，应核对它需要的顾客、相机、图片、设备标识和分析数据，确认存储地区、保留、删除、子处理者、跨境传输和同意撤回路径。还要确认服务是否支持 Shopify 商品、选项和库存的映射，是否能在顾客拒绝相机时展示照片或尺寸说明，以及卸载后是否会留下主题代码、脚本或追踪配置。能力和隐私评估应与 Shopify 商品媒体验收分开记录。

何时选择商品媒体，何时选择试穿

如果核心问题是“商品长什么样、放在房间里是否合适”，先做 3D 模型和 AR 摆放；如果核心问题是“穿上衣服或试用颜色后的外观”，再评估虚拟试穿。两者可以在同一个商品页并存，但按钮、权限、数据流和失败回退要分别说明。不要用商品模型已经上线来推导试穿功能已经完成，也不要把试穿预览当作尺寸、颜色或效果的确定判断。

Admin 与 Storefront 的媒体验收

后台上传媒体后，处理不是同步完成的。使用 Admin GraphQL 管理商品媒体时，创建或更新动作可能返回处理中状态；自动化应等待媒体达到 READY，同时记录失败、重试和原始文件，避免在尚未完成时把空预览发布到商品页。GraphQL schema 可能比后台帮助文档展示更宽，尤其涉及媒体与变体关系时，必须按使用的 API 版本、店铺权限和主题行为实测。

记录媒体状态与版本

验收表应包含商品 ID、媒体 ID、语言、文件格式、模型版本、预览图、处理状态、主题版本、测试设备和审核人。更新模型时保留旧版本的回退路径，确认 CDN 地址、缓存失效和缩略图没有串到另一件商品。失败记录要能从后台动作追到前端请求，便于判断是素材、权限、主题还是设备问题。

不把媒体当成自动变体切换

Shopify 帮助文档对后台管理语义的说明并不把 3D 或视频当作后台的 variant media；GraphQL schema 在某些版本和场景中可能提供更宽的关联字段。即使接口接受关联，也不能由此推断主题会自动切换模型、AR 按钮和图片。项目应明确每个变体的图片、模型、标题、颜色和尺寸关系，在真实主题上点选、刷新、回退并记录结果。

双语内容、SEO 与上线门槛

中文和英文应是两份独立正文，而不是同一段通过翻译插件临时转换。中文页面使用 /cn/，英文页面使用 /en/；两页各自输出同语言的标题、描述、正文、FAQ、媒体替代文本和站内链接。本文的中文服务入口是 WESWOO Shopify 服务。链接帮助顾客继续阅读，不替代商品页的能力说明。

Canonical 与 hreflang 验收

本文保留数据库 slug xunishichuanjishushendujiexishopify-argongnengkaifashijian，中文 canonical 应指向 /cn/ 清洁 URL，英文 canonical 应指向 /en/ 清洁 URL。两页均应有精确的 zh-CN、en-US 与 x-default hreflang，x-default 回到中文清洁 URL；查询参数、旧语言前缀或跳转链不能被写入 canonical。clean URL 与查询 URL 的 HTTP 行为要分开留证，内容接管并不等于修改全站路由规则。

能力与验收对照表

能力或边界	Shopify 原生商品媒体	虚拟试穿项目	验收证据
3D 展示	GLB/USDZ 模型查看、旋转、缩放和静态预览	可作为商品参考，但不提供人体或脸部追踪	商品页录屏、模型版本、回退图
AR 行为	通过主题与 Shopify-XR 连接支持的 Quick Look 或 Scene Viewer	需要相机、追踪、遮挡与合成服务	设备矩阵、权限拒绝、错误提示
数据字段	`Model3d` 的 alt、previewImage、sources 等媒体信息	顾客图像、相机、试穿结果和供应商数据需单独治理	数据流图、同意与删除记录
变体关系	按 API 版本和主题实测，不推断自动切换	需明确尺码、颜色、版型与效果的映射	点选测试、刷新测试、主题版本
性能与无障碍	按需加载、静态回退、键盘、焦点和可感知状态	还要测试相机失败、低光、追踪丢失和不适用场景	网络记录、键盘检查、ARIA 与回退截图

常见问题

Shopify 的 3D 商品媒体就是虚拟试穿吗？

不是。3D 商品媒体让顾客查看商品模型并在支持的设备上进行 AR 摆放；虚拟试穿还需要人体或脸部追踪、遮挡、合成和相机数据治理。两项能力可以同页出现，但应使用不同按钮和验收记录。

3D 模型应该使用什么格式和大小？

常见格式是 GLB 与 USDZ，单文件上限为 500MB，超过 15MB 时可能触发自动优化。4MB 或 15MB 的数字可能来自部分建模交付建议，不宜当作所有接口的统一硬限制。最终以当前 Shopify 文档、目标店铺和真实设备处理结果为准。

旧主题能直接显示 Model Viewer 和 AR 按钮吗？

不能直接假定。Online Store 2.0 与 Horizon 有官方支持路径，旧主题或定制主题需要检查媒体循环、脚本、按钮、权限、回退、键盘焦点和移动布局。应在目标主题的开发店中验证，再安排发布。

为什么后台上传成功，前台仍看不到模型？

媒体处理可能是异步的，Admin GraphQL 的处理状态达到 READY 后才适合继续前台验收。还要检查媒体是否被正确关联、预览图是否可用、主题是否输出模型标记、缓存是否更新，以及设备是否支持对应查看路径。

服装或美妆店铺应先装 AR 应用还是先做 3D？

先根据顾客任务选择路线。看外形和空间比例时，3D 商品媒体是较小的起点；服装合身或美妆叠加则应先评估追踪算法、相机隐私、商品映射、供应商退出和失败回退，再决定第三方应用或定制开发。可以从 WESWOO Shopify 服务获取实施讨论入口。

Shopify 3D/AR 商品媒体与虚拟试穿：开发边界与上线验收