AZC Shopify 设置指南

在主题中设置 AZC 3D Viewer

连接工作空间、添加商品区块,并验证顾客的浏览体验。

开始前

需要使用带 JSON 商品模板、且分区支持应用区块的 Online Store 2.0 主题。不支持旧版主题。本区块仅用于商品模板。

在在线商店 → 主题中选择要配置的主题并打开编辑器。应用中的“添加商品页 3D 区块”按钮打开当前主题并请求插入区块;请先检查是否已经插入,避免重复添加。

未发布主题的修改先在预览中生效。准备就绪后再发布主题。共享模板的修改影响所有使用该模板的商品,但各商品加载自己的关联模型。

1. 连接工作空间并关联模型

  1. 在 Shopify 后台打开 AZC 3D Viewer。在 AZC 连接设置中,使用应用显示的店铺前台地址创建或选择 Shopify 连接。生成连接码,在应用中点击连接工作空间。连接码有效期 10 分钟,仅可使用一次。
  2. 在 AZC 资产库上传 STEP 或 GLB 文件,或选择已有资产。等待预览就绪。点击模型菜单中的发布到网站,选择此商店连接,再授权到店铺。
  3. 回到应用点击刷新,选择商品和模型,保存关联。商品应为已发布到在线商店的有效商品,至少添加一张图片,以便验证图片与 3D 切换。

2. 添加主题应用区块

  1. 在目标主题编辑器中选择商品和该商品实际使用的模板,选择对应的预览商品。如有疑问,在 Shopify 商品设置中检查模板分配。
  2. 在支持应用区块的分区内点击添加区块 → 应用 → AZC 3D model。支持应用分区的主题也可以通过添加分区 → 应用添加。应用快捷按钮可能已经创建了应用分区。
  3. 每个商品模板添加一个 AZC 区块;需要显示模型的其他商品模板也应分别配置。
  4. 如果没有应用选项,请换用支持应用区块的分区或兼容的 Online Store 2.0 主题,无需手工修改主题代码。
Horizon 主题编辑器中已选中的 AZC 3D 模型区块
Horizon 中的真实设置示例,截图为英文界面;不同主题的布局可能不同。

3. 配置展示方式

展示位置商品媒体:缩略图导航,使用兼容主题的商品图库。独立区块:在模板中当前区块位置展示。
默认媒体图库模式可首先显示 3D 模型或商品图片;未关联模型的商品保留图片展示。
缩略图顺序图库模式可选择 3D 在图片之前或图片在 3D 之前,与默认媒体独立设置。
标题、最大宽度、查看器高度为独立展示配置可选标题和宽高;图库模式沿用商品媒体区域尺寸。
材质、相机与工具在 AZC 资产预览的展示设置中管理并保存,刷新商品页验证。

图库集成取决于主题媒体结构。图库模式不能正确集成时,请切换独立展示并在主题预览中验证。

4. 移位、移除和恢复

移位:在编辑器侧栏拖动 AZC 区块或所在应用分区到允许的位置,调整独立展示的位置。图库中的 3D 缩略图位置通过缩略图顺序设置调整。

移除:选中 AZC 3D model,点击移除区块并保存。其他模板需要分别操作。移除主题展示不会删除 AZC 资产或商品模型关联。

恢复:重新添加区块并保存。有效且已授权的商品模型关联可以再次显示。

仅移除一个商品的模型:在应用中使用移除模型,保留共享模板区块和商品图片。重新选择模型并保存关联可恢复。

5. 保存并验证

  1. 保存主题。预览刚刚编辑的同一个主题;验证已发布主题时再使用正式商品页。
  2. 打开目标商品,拖动模型旋转,使用鼠标滚轮缩放,确认模型与商品一致。
  3. 兼容图库模式中测试图片和 3D 缩略图切换,分别核对默认媒体与缩略图顺序。
  4. 检查移动端预览,并验证其他已配置的商品模板。
Demo Sneaker 商品页中的交互式三维鞋模型和图片缩略图
真实商品页示例:模型与普通商品媒体共同展示。

常见问题

  • 没有 AZC 应用区块:检查主题兼容性、商品模板和分区是否支持应用区块。
  • 模型未显示:确认工作空间已连接,模型已就绪并授权到此商店,商品关联已保存。核对商品模板,以及当前查看主题中是否已添加区块并保存。
  • 应用可预览而前台没有:应用内预览不会自动安装主题区块,请完成第 2 步。
  • 模型不匹配:核对应用所选商品和主题预览商品。
  • 不能切换图片与 3D:添加商品图片并检查图库兼容性,必要时使用独立展示。
  • 连接码过期:为当前店铺前台地址重新生成连接码。