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 應用程式

您可以使用註冊頁面來安裝 3D Warehouse 應用程式。

步驟:

  1. 開啟註冊頁面
  2. 輸入您的 myshopify.com 商店網域。
  3. 按一下「安裝」。
  4. 檢閱詳細資訊,然後按一下「安裝應用程式」。

您可以在 Shopify 管理員的「應用程式」頁面上,取用 3D Warehouse 應用程式。

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

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

您可以透過 Shopify 合作夥伴計畫取得商品的 3D 模型。

步驟:

  1. 在 Shopify 管理員中,按一下您的帳號選單,然後按一下「聘請 Shopify 專家」:

    聘請 Shopify 專家

  2. 按一下以展開「新功能」區段。

  3. 按一下「建立您商品的 3D 模型以用於擴增實境 (100 美元起)」。

  4. 回覆必答問題。如果您這時想提供商品照片和商品尺寸,請務必遵循連結的準則。

  5. 按一下「傳送工作」。

您提交工作要求時,並不代表承諾聘請 Shopify Expert。此步驟僅會向可配合的專家提交專案說明,他們接著會檢閱您的要求。若專家決定與您合作,他們會聯絡您以告知費用以及如何開始程序。

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

商品照片

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 模型時,您需加以檢查,並確認您是否滿意品質。專家應提供您預覽模型的說明。

從各個角度查看模型,過程中請思考以下問題:

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

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 Experts 針對每個 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 銷售商品了嗎?

免費試用