如何在 Shopify 和 WooCommerce 商品页添加 AR
简单来说: 要给商品页添加 AR，你需要商品的 3D 模型：GLB 用于 Android 和网页，USDZ 用于 iPhone，并且都要是商品的真实尺寸。Shopify 支持把 3D 模型作为商品媒体；在 WooCommerce 或其他网站上，则用两个文件嵌入免费的 model-viewer 组件。
第 1 步：制作 3D 文件
- 平面商品（艺术印刷品、海报、画布、地毯、壁纸样品）：把商品照片上传到 jpgtousdz，输入真实的宽度或高度，就能得到该尺寸的 GLB 和 USDZ。
- 立体物品（花瓶、椅子、鞋子）：绕着商品缓慢拍一段视频，使用视频转 3D，并输入真实高度。
- 每个文件都要小一些（贴图 2048 px 或以下），让商品页保持流畅。
第 2a 步：Shopify
- 在 Shopify 后台打开商品，进入媒体，把 GLB 文件作为 3D 模型上传。
- Shopify 会用自带的 3D 查看器展示它，支持该功能的主题会在手机上添加“在你的空间中查看”按钮。
- 分别在 iPhone 和 Android 手机上检查商品页。Shopify 帮助中心列出了当前的文件大小限制和支持的主题。
第 2b 步：WooCommerce、WordPress 或任何网站
把 GLB 和 USDZ 上传到媒体库，然后在商品描述中添加一个自定义 HTML 区块，使用 model-viewer：
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="/media/print-50x70.glb" ios-src="/media/print-50x70.usdz"
ar ar-modes="quick-look scene-viewer webxr" ar-placement="wall"
camera-controls alt="50 x 70 cm 印刷品"></model-viewer>第 2c 步：无需代码的方式
如果你不能编辑页面，可以添加一个按钮或二维码，链接到该商品的 jpgtousdz AR 查看链接。它无需安装应用，在 iPhone 和 Android 上都能以 AR 打开。
上线前检查清单
| 检查项 | 原因 |
|---|---|
| 真实尺寸正确 | 顾客会通过 AR 判断尺寸，比例错误会导致退货。 |
| 摆放方式正确（墙面或地面） | 艺术品放在墙上，家具放在地面上。 |
| 在 iPhone 和 Android 上都能用 | 两者使用不同的文件。 |
| 设置了替代文本（alt） | 有利于无障碍访问和搜索。 |
常见问题
Shopify 需要 USDZ 吗？
把 GLB 上传到 Shopify 即可，展示由它处理。也建议保留一份 USDZ，以备主题或其他渠道需要。
WooCommerce 原生支持 AR 吗？
不支持。请使用插件，或按上面的方法用 GLB 和 USDZ 文件嵌入 model-viewer。
要花多少钱？
model-viewer 免费。jpgtousdz 的照片转 AR 第一次免费，之后属于套餐的一部分。API 价格是每张照片 $0.15，每个视频 3D 模型 $1.50。