由 3D Warehouse 提供支持的 Shopify AR

Shopify AR 能够让使用 iOS 12 设备上的 Safari 浏览器的客户使用增强现实 (AR) 查看产品的实际和交互版本。通过 AR,您可以让客户更好地感受产品的尺寸、比例和细节。3D Warehouse 应用让您能够上传 3D 模型并将它们链接到商店中的产品,从而实现 AR 体验。

以 3D 模式查看花瓶

若要使客户能够使用 AR 查看您的产品,请安装 3D Warehouse 应用,获取产品的 3D 模型,将 3D 模型添加到应用,编辑模版以启用 AR Quick Look,然后将 AR 徽章添加到 3D 产品中。

步骤 1:安装 3D 仓库应用

您可以使用注册页面安装 3D Warehouse 应用。

步骤:

  1. 打开注册页面
  2. 输入您的 myshopify.com 商店域名。
  3. 单击安装
  4. 查看详细信息,然后单击安装应用

您可以在 Shopify 后台的应用页面上访问 3D Warehouse 应用。

步骤 2:获取产品的 3D 模型

您首先需要有产品的 3D 模型,客户才能以 AR 模式查看您的产品。3D 模型是采用三维模式呈现物体或表面的虚拟表现形式。通过 3D 模型,可以从任何角度观察物体。

您可通过 Shopify 合作伙伴项目获取产品的 3D 模型。

步骤:

  1. 在 Shopify 后台中,单击您的帐户菜单,然后单击聘用 Shopify 专家

    聘请 Shopify Expert

  2. 单击以展开 New functionality(新功能)部分。

  3. 单击创建产品的 3D 模型用于增强现实(100 美元起)

  4. 回答必填问题。如果您想现在提供产品照片和产品尺寸,请确保遵循链接的指南。

  5. 单击 Send job(发送工作)。

提交工作请求并不表示一定要聘请一位 Shopify 专家。此步骤只是将您的项目描述提交给合适的专家,这些专家随后会查看您的请求。如果有专家决定与您合作,他会与您联系,以便您详细了解其费用以及如何开始此过程。

如果您没有在工作请求中提供产品照片和产品尺寸,那么专家会要求您提供这些内容。拍摄照片和进行测量时,请遵循以下规范。

产品照片

3D 模型是使用照片创建的。若要创建 3D 模型,Shopify 专家需要您产品的多个角度的照片:

产品照片角度

在拍摄产品照片时,请遵循以下准则:

  • 确保您的产品处于一个明亮的空间内。
  • 确保以您的整个产品为焦点。
  • 如果可能,请勿使用手机相机。对于家具等大型产品,请使用 50mm 镜头的相机。对于中小型产品,请使用 70mm 或 100mm 镜头的相机。
  • 拍摄任何附带独特细节或纹理的额外照片。
  • 为照片文件提供明确的标题,例如 blue vase - topblue vase - left,并将这些照片文件存储在标记明确的文件夹中。

产品尺寸

为了创建精确的 3D 模型,Shopify 专家需要产品的详细测量信息。在提供测量信息时,请遵循以下准则:

  • 简单清楚地描述产品的每个尺寸。
  • 提供测量(以 mm 为单位)。
  • 包括一个图表,以显示测量对应的尺寸。
  • 如果您有与产品关联的技术图纸或 CAD 文件,也请提供这些内容。

制作 3D 模型的示例

Naomi 正在销售这款蓝色的花瓶:

花瓶

她安装了 3D 仓库应用,然后使用专家市场寻找 Shopify 专家来创建花瓶的 3D 模型。Naomi 向专家提供了六张使用 70mm 镜头的相机拍摄的高品质照片:

产品照片角度

Naomi 为专家提供了相应产品尺寸的测量图(以毫米为单位):

花瓶

  • 花瓶的高度 (1) 为 ____mm
  • 花瓶顶部到颈底 (2) 为____mm
  • 颈口底部到花瓶底部 (1) 为 ____mm
  • 花瓶口的直径 (4) 为____mm
  • 瓶口的边沿宽度 (5) 为____mm
  • 颈底直径 (6) 为 ____mm
  • 花瓶上有 8 个六边形面
  • 六边形面的高度 (8) 为____mm
  • 六边形面 (9) 的宽度为____mm
  • 花瓶最宽部分的直径 (10) 为 ____mm
  • 花瓶底部的直径 (11) 为____mm
  • 底部泡沫的直径为____mm

Shopify 专家使用这些照片和尺寸创建蓝色花瓶的 3D 模型。专家向 Naomi 发送了 .glb.usdz 文件,供她添加到 3D 仓库应用。

步骤 3:检查模型质量

当 Shopify 专家为您提供 3D 模型时,您应该检查它的质量是否令您感到满意。专家应该为您提供预览模型的说明。

从各个角度检查模型。检查时,请思考以下问题:

  • 该模型的形状是否与您向专家提供的产品参考照片匹配?
  • 模型的所有部分是否都与其他部分相称?
  • 如果您能在增强现实环境中预览模型,那么与在其他场景中相比,模型的比例看起来是否正确?
  • 此模型看上去采用的材料是否与产品的材料相同?
  • 模型的材料看起来是拉伸的、模糊的还是扭曲的?
  • 是否有磨损或刮痕之类的细节使模型材料看起来更逼真?
  • 如果产品的某些部分为透明、反光或发光的材质,那么它们的表现是否正常?
  • 边缘看起来都很逼真吗?是否有边缘太过尖锐,需要软化?
  • 如果有 logo 或文字等任何装饰细节,它们容易被看到吗?
  • 是否有不应存在的空隙或孔洞?

Shopify 专家应根据特定标准构建 3D 模型。若要详细了解这些标准以便您更好地查看模型,请参阅为商家创建 3D 模型

如果您认为模型的质量不佳,请联系 Shopify 专家并说明问题。

步骤 4:将 3D 模型添加到 3D Warehouse 应用中

在安装了 3D Warehouse 应用并取得了 3D 模型后,您需要将此模型添加到 3D Warehouse 应用中。

备注:如果在将 AR 图片添加到 3D Warehouse 应用后看不到该图片,请联系 Apple 客服。

步骤:

  1. 在 Shopify 后台中,单击应用
  2. 单击 3D Warehouse
  3. 单击添加 3D 模型
  4. 标题字段中,输入 3D 模型的标题。
  5. Linked Product(已链接的产品)字段中,选择与此 3D 模型关联的产品和多属性,然后单击选择产品
  6. 单击上传文件,然后选择 Shopify 专家提供的 .usdz 文件。
  7. 单击保存

请对您的 Shopify 专家提供的 .gltf.glb 文件重复上传步骤。请确保将该文件链接到同一产品,以便将两种 3D 模型文件类型与产品关联。

备注:如果您上传 .gltf 文件,系统会提示您在 Linked Files(链接文件)部分中添加其他文件。单击上传文件,上传专家提供的链接纹理资源。

接受的文件类型

Shopify 专家为每个 3D 模型都提供了两种不同的文件类型,即 .usdz 文件和 .gltf.glb 文件。这些不同文件类型用于不同平台和功能。例如,要让客户在 iOS 12 设备上的 Safari 浏览器中查看 3D 产品,您需要上传 .usdz 文件。确保您的在线商店与未来增强现实和 3D 功能兼容的最佳方式是上传这两种文件类型。

步骤 5:编辑模版以启用 AR Quick Look

您需要编辑模版代码以启用 AR Quick Look,该功能允许用户在 iOS 12 设备上使用 Safari 浏览器查看您的 3D 产品的功能。

步骤:

  1. 在 Shopify 后台内,单击在线商店
  2. 在当前模版旁,单击操作 > 编辑代码
  3. 布局文件夹中,单击 {/} theme.liquid
  4. 找到 <head> 标签。此标签应该在文件顶部附近。
  5. 在下一行粘贴以下代码:
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. 单击保存

  2. Sections 文件夹中,单击 {/} product-template.liquid

  3. 将以下代码粘贴到文件顶部:

<script>
  (function(s3d) {
    if (!s3d) {
      console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
      return;
    }
    {% for variant in product.variants %}
      s3d.mapMetafieldAssets('{{ variant.id }}', '{{ variant.metafields.shopify3d['assets'] }}');
    {% endfor %}
  })(window.Shopify3d);
</script>

Quicklook 库已添加到产品模板

  1. 单击保存

如果您使用多个产品模板,那么也请将代码添加到这些模板文件中。

步骤 6:将 AR 徽章添加到 3D 产品中

当使用 iOS 12 设备的客户看到 AR 徽章叠加时,他们知道可以使用 3D 形式查看您的产品:

AR 徽章叠加

您需要编辑您的模版代码以在产品图片上显示 AR 徽章。

步骤:

  1. 在 Shopify 后台内,单击在线商店
  2. 在当前模版旁,单击操作 > 编辑代码
  3. Sections 文件夹中,单击 {/} product-template.liquid
  4. 找到与您的产品照片相关联的模板部分。查找诸如 ProductPhotofeatured_image 的关键词:
    产品照片 Liquid
  5. 在产品图片部分中,找到第一个 <img... > 标签。
  6. 在该标签的上一行粘贴以下代码:
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

包含代码的产品照片 Liquid

  1. 单击保存
  2. 打开包含模版的 CSS 的文件。此文件通常位于 Assets 文件夹中,且大多数时候标题类似于 {/}theme.scss.liquid
  3. 在文件的最底部,粘贴以下代码:
.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  }
  1. 单击保存

若要测试您的 3D 模型,请在运行 iOS 12 的设备上的 Safari 浏览器中打开您的在线商店,然后导航到产品页面。点击产品图片中的 AR 徽章以 3D 模式进行查看。

准备好开始使用 Shopify 进行销售了吗?

免费试用