Shopify AR 由 3D Warehouse 提供技術支援

Shopify AR 可讓客戶使用 iOS 12 裝置上的 Safari 瀏覽器,運用擴增實境 (AR) 以逼真互動的方式檢視產品品。您可以透過 AR 讓客戶更確實瞭解您產品的大小、比例和細節。3D Warehouse 應用程式可用來上傳 3D 模型並連結至您商店中的產品,藉此提供 AR 體驗。

檢視 3D 花瓶

若要讓客戶以 AR 檢視您的產品,請安裝 3D Warehouse 應用程式、取得您產品的 3D 模型、將 3D 模型新增至應用程式中、編輯您的佈景主題以啟用 AR Quick Look,然後將 AR 徽章加到您的 3D 產品上。

第 1 步:安裝 3D Warehouse 應用程式

第 2 步:取得您商品的 3D 模型

您需要產品的 3D 模型,客戶才能以 AR 檢視您的產品。3D 模型是物體或平面的三維虛擬展示,可用來從任何角度檢視物體。

您可以聘請 Shopify 專家協助您製作產品的 3D 模型。請在 Shopify 專家平台中瀏覽可以提供 3D 模型建模服務,然後選取專家並向他們聯繫。

使用專家聯絡資訊表單來提供有關專案的詳細資訊。如果您這時想提供產品照片和產品尺寸,請務必遵循連結的準則。

若您聯絡 Shopify 專家,也不代表一定要聘請該專家。此步驟僅為提交要求以供專家查看。若專家決定與您合作,他們就會與您聯絡,提供更多資訊說明相關費用以及如何開始合作。

若您尚未提供產品圖片及產品尺寸作為工作要求的一部分,專家會向您要求這些內容。拍照和測量時,請遵循以下規格。

商品照片

3D 模型需使用照片來建立。為了建立 3D 模型,Shopify 專家需要從多個角度拍攝的商品照片:

商品照片角度

拍攝商品照片時,請遵循以下準則:

  • 拍攝商品時請務必使用充足的照明。
  • 確認整個商品都位於焦距範圍內。
  • 請盡可能不要使用手機相機。若為家具等大型商品,請使用 50mm 鏡頭;若為小型至中型商品,請使用 70mm 或 100mm 鏡頭。
  • 額外拍攝任何獨特細節或紋理的照片。
  • 為照片檔案提供明確易懂的標題,例如 blue vase - topblue vase - left,並儲存在清楚標示的資料夾中。

商品維度尺寸

為建立準確的 3D 模型,Shopify 專家需要您商品的詳細測量尺寸。提供測量尺寸時,請遵循以下準則:

  • 以清晰簡潔的語詞描述商品的每個維度尺寸。
  • mm 為單位提供測量尺寸。
  • 加入圖表以顯示測量尺寸所對應的維度。
  • 如果您有與商品相關聯的技術繪圖或 CAD 檔案,請一併附上。

製作 3D 模型的範例

Naomi 要販賣這個藍色花瓶:

花瓶

她安裝了 3D Warehouse 應用程式,然後使用專家平台來聘請 Shopify 專家幫她建立花瓶的 3D 模型。Naomi 提供以 70mm 鏡頭拍攝的六張高畫質照片給專家:

商品照片角度

Naomi 提供一個包含對應商品維度的測量圖給專家 (以公釐為單位):

花瓶

  • 花瓶的高度 (1) 是 ____ 公釐
  • 花瓶頂端到瓶頸底端的長度 (2) 是 ____ 公釐
  • 花瓶瓶頸底端到花瓶底部的長度 (2) 是 ____ 公釐
  • 瓶口的直徑 (4) 是 ____ 公釐
  • 瓶口周圍的厚度 (5) 是 ____ 公釐
  • 瓶頸底端的半徑 (6) 是 ____ 公釐
  • 瓶身為 8 個六邊形面
  • 六邊形面的高度 (8) 是 ____ 公釐
  • 六邊形面的寬度 (8) 是 ____ 公釐
  • 花瓶最寬部分的直徑 (10) 是 ____ 公釐
  • 花瓶底部的直徑 (11) 是 ____ 公釐
  • 泡綿墊的直徑是 ____ 公釐

Shopify 專家會使用這些照片和尺寸,來建立藍色花瓶的 3D 模型。專家會傳送 .glb.usdz 檔案給 Naomi,方便她將其新增至 3D Warehouse 應用程式。

第 3 步:檢查模型品質

Shopify 專家向您提供 3D 模型時,您需加以檢查,並確認是否滿意品質。專家應提供您預覽模型的說明。

請從所有角度檢查模型。您可以使用 glTF 檢視器預覽您的 3D 模型。在檢視模型時,請同時考量以下問題:

  • 模型的形狀是否與您提供給專家的產品參考照片一致?
  • 模型的所有部分是否互成比例?
  • 如果您可以在增強實境中預覽模型,那麼請確認模型的比例看起來與場景中的其餘部分相比是否正確無誤?
  • 模型看起來是否與商品的製作材質相同?
  • 模型的材質看起來是否經過拉伸、模糊或扭曲?
  • 是否有摩擦痕跡或刮痕等細節,讓模型的材質看起來更逼真?
  • 如果商品的某部分透明、反光或發光,看起來是否正常?
  • 邊緣看起來都很逼真嗎?是否有任何邊緣太銳利且需要柔化?
  • 如果加上商標或一些文字等任何裝飾細節,是否更容易辨識?
  • 是否有任何不應存在的空隙或孔洞?

Shopify 專家應依據特定標準建置 3D 模型。如需深入瞭解這些標準,方便您更妥善審核模型,請參閱「為商家建立 3D 模型」。

如果您認為模型品質不夠好,請聯絡 Shopify 專家並說明不滿意之處。

第 4 步:將 3D 模型新增至 3D Warehouse 應用程式中

若您已安裝 3D Warehouse 應用程式且取得了 3D 模型,您需要將模型新增至 3D Warehouse 應用程式中。

步驟:

  1. 在 Shopify 管理員中,按一下「應用程式」。
  2. 按一下「3D Warehouse」。
  3. 按一下「新增 3D 模型」。
  4. 在「標題」欄位中輸入 3D 模型的標題。
  5. 在「連結的商品」欄位中,選擇與這個 3D 模型相關聯的商品和變體,然後按一下「選擇商品」。
  6. 按一下「上傳檔案」,然後選擇 Shopify 專家提供的 .usdz 檔案。
  7. 點擊「儲存」。

重複上傳流程,上傳 Shopify 專家提供的 .gltf.glb 檔案。確認連結至同一個產品,讓兩種類型的 3D 模型檔案都與該產品建立關聯。

接受的檔案類型

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. 在「Layout」資料夾中,按一下「{/} 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 銷售商品了嗎?

免費試用