Shopify 3D 商品模型:GLB、AR 與檢視器工作流程指南

重點摘要
- Shopify 原生支援 3D 商品模型:無需安裝應用程式即可顯示或啟用 AR。
- Shopify 接受 GLB 與 USDZ 格式。採用 GLB 優先的工作流程較為便利,因為 Shopify 會自動為相容裝置建立所需的配套格式。
- 真正的瓶頸往往不在效能,而是如何取得 3D 模型。您可以自行製作、生成或委外製作。
- 上傳前先進行優化:控制多邊形數量與材質解析度,確保行動裝置能流暢運作。
- 選擇您的路徑:大多數商店使用原生 3D 媒體(免費);進階需求則可選擇第三方應用程式或自訂 Liquid 檢視器/設定器。
Shopify 支援 3D 商品模型作為商品媒體,讓顧客能在商品頁面上旋轉模型,並在相容手機上使用 AR。通常較困難的部分是取得合適的 3D 模型。本指南涵蓋從模型建立、優化到上傳、檢視器設定及行動裝置測試的完整流程。
3D 商品模型在 Shopify 上如何運作
Shopify 支援 3D 模型作為原生商品媒體,與圖片和影片並列。相容的主題可直接在商品圖庫中呈現模型,無需額外的店面應用程式。
顧客可在瀏覽器中旋轉、縮放與檢視模型。在支援的行動裝置上,商品頁面還可提供 「在您的空間中查看」 功能,讓商品透過 AR 置入顧客的環境中。
Shopify 接受 GLB 與 USDZ 兩種格式,並會處理上傳的模型,讓相容的格式可在不同裝置上使用。本指南採用 GLB 優先的工作流程,因為 GLB 將幾何、材質與紋理整合在單一檔案中。出貨前請先確認 Shopify 最新的商品媒體要求。

您的 3D 模型從何而來?
您可以自行建模、使用 AI 生成,或委託 3D 藝術家製作。根據產品的精確度需求、目錄規模、預算與上市時程來選擇。
自行建模:Blender 或 CAD
Blender 和 CAD 工具能提供對尺寸、拓撲、UV 與材質的最大控制。此途徑適合工程導向的產品及需要符合精確尺寸的物品,但需要建模專業知識與較長的製作時間。
使用 AI 生成
若要加快迭代速度,Tripo Image to 3D 可將商品圖片轉換為 3D 起點。但產生的結果仍需與實際產品比對,特別是隱藏面、薄型零件、對稱性與精確比例。
典型的工作流程很簡單:
- 上傳商品照片(或輸入文字提示)。
- 使用 AI 生成 3D 模型。
- 檢視並視需要調整結果。
- 將模型匯出為 GLB 格式並上傳至 Shopify。
此途徑能縮短大量目錄的製作時間,但複雜或尺寸關鍵的產品可能需要手動清理,才能適用於面向客戶的 3D 或 AR。
購買或委外
現有素材可用於通用產品,而獨特商品通常需要客製化模型。請要求符合實際比例、PBR 材質、乾淨的拓撲結構,以及 Shopify 相容的交付格式。
AI 在重視速度與目錄覆蓋率時相當有用;而當尺寸精度或高品質近距離細節至關重要時,手動建模或專業調整則更為可靠。混合工作流程可結合快速生成與具針對性的美術人員調整。

上傳前進行模型優化
網頁模型必須在視覺品質、下載大小與裝置效能之間取得平衡。上傳前請檢查幾何、紋理、比例、方向與原點。
多邊形與檔案大小
移除不影響產品輪廓或可見細節的幾何。複雜度較低的網格通常能在行動裝置上更有效率地下載與渲染。
對於 AI 生成或密集的網格,Tripo Smart Mesh 可建立更乾淨、多邊形數量更低的拓撲結構,適用於 Web3D 與即時工作流程。壓縮紋理,並僅在完整匯出與檢視器管線支援時使用 Draco 壓縮。
Shopify 目前接受 500 MB 以下的 3D 模型上傳,並會自動優化大於 15 MB 的檔案。請將 15 MB 視為優化門檻,而非上傳上限,並在 Shopify 的商品媒體文件中確認最新要求。
真實世界比例與方向
錯誤的單位、方向或原點位置可能導致產品在 AR 中顯得過大、過小或定位不當。
以真實世界的比例匯出,確認模型的向上與向前軸向,並將原點置於邏輯接觸點,例如底座中心。在顧客可能放置產品的表面上測試結果。
紋理與 PBR
移除未使用的材質,使用合理的紋理解析度,並在減少開銷且不影響可見細節的情況下,將貼圖合併為圖集。
使用標準的 PBR 材質,並在 Shopify 的檢視器中測試其外觀。高度反射、透明或分層材質可能需要在不同瀏覽器與裝置上進行額外調整。

將 3D 模型加入 Shopify 商品(逐步說明)
優化後,將模型上傳為商品媒體,並在發布前設定其初始呈現方式。
- 開啟 Shopify 管理後台,前往 商品,然後選擇要更新的商品。
- 在 媒體 區塊中,點擊 新增媒體 並上傳支援的 GLB 或 USDZ 檔案。Shopify 會處理該檔案並將其加入媒體庫。
- 選取上傳的 3D 模型,點擊 編輯檔案,使用 Shopify 的無程式碼編輯器調整環境或照明、背景,以及模型的初始旋轉與縮放。
- 預覽商品頁面。在桌機上檢查旋轉與縮放,然後在支援的 iOS 與 Android 裝置上測試 「在您的空間中查看」。
如需最新的編輯器路徑與可用控制項,請參閱 Shopify 的 3D 模型編輯器文件。

啟用 AR:「在您的空間中查看」
單一上傳的模型在 Shopify 處理成相容格式後,即可支援互動式店面檢視器與 AR。您通常不需要為每個支援的裝置分別管理店面素材。
「在您的空間中查看」 控制項僅在裝置、瀏覽器、主題與模型都支援 AR 時才會顯示。請在實體裝置上測試,而非依賴桌機預覽。
相容的 Apple 裝置使用 USDZ 搭配 Apple Quick Look;支援的 Android 裝置則可使用 Google Scene Viewer。Shopify 會準備相容的模型格式,而主題則負責呈現商品媒體與 AR 控制項。
在發布商品前,請在真實行動裝置上測試體驗:
- 在支援的智慧型手機上開啟商品頁面。
- 確認 「在您的空間中查看」 按鈕出現。
- 點擊 AR 按鈕,將產品放置在地板或桌面上。
- 驗證模型的大小、方向與照明是否自然。

原生 3D vs 第三方應用程式 vs 自訂檢視器
根據產品所需的互動方式,選擇使用原生商品媒體、第三方設定器或自訂主題實作。
原生 3D 媒體
原生 3D 媒體是實現旋轉、縮放與支援 AR 最簡單的途徑。當主題已正確處理 Shopify 商品媒體時,此方式效果最佳。
第三方應用程式與設定器
當顧客需要在 3D 體驗中更換材質、設定元件、觸發熱點或與商品選項互動時,請使用第三方平台。
- 顏色與材質切換
- 商品配置
- 元件選擇
- 互動熱點
- 引導式商品體驗
自訂 Liquid 檢視器
對於自訂主題,可從 Shopify 支援的 Liquid 路徑開始:使用 model_viewer_tag 渲染產品模型媒體,並依照 Shopify 的商品媒體與 Shopify-XR 指南設定裝置特定的 AR。
當主題需要自訂控制項、熱點、動畫或載入行為時,原始的 Google <model-viewer> 整合仍可作為進階選項,但需要開發人員管理無障礙功能、媒體狀態、備援方案與 AR 設定。
您該選擇哪一種?
- 需要簡單方案? 使用 Shopify 的 原生 3D 媒體。
- 需要商品客製化或設定器? 選擇 第三方 3D 平台。
- 需要完全控制? 擴充 Shopify 的原生媒體整合,或建立進階的自訂檢視器。

3D 模型真的有用嗎?效能與轉換率
3D 可提供有用的產品背景資訊,但其價值取決於產品與實作方式。請衡量效能與顧客行為,而非假設每個目錄都能獲得相同效益。
效能:迷思 vs 現實
載入行為因主題與檢視器而異。優化的幾何與紋理可減少傳輸、記憶體與渲染成本,但商家仍應在中階行動裝置與較慢的連線上測試代表性的商品頁面。
轉換率與退貨率
互動式 3D 與 AR 可幫助顧客了解平面圖片難以呈現的比例、形狀與細節。
轉換率與退貨率的結果因類別、受眾、素材品質與放置位置而有極大差異。請將外部案例研究視為參考而非預測,並使用商店特有的互動、轉換與退貨數據來評估此功能。
何時值得使用 3D
並非每個產品都需要 3D 模型。最大的價值來自於顧客在購買前需要了解 比例、材質或空間契合度 的商品。
3D 模型尤其適用於:
- 家具與居家裝飾
- 鞋子與時尚配件
- 珠寶與奢侈品
- 消費性電子產品
- 工業設備與技術產品
- 具可配置選項的產品
對於價格低廉或高度標準化的產品,傳統照片可能已提供足夠資訊。良好的策略是從 價值最高或退貨率最高的 SKU 開始,衡量互動與轉換率,然後根據結果是否值得投資,再將 3D 擴展到目錄的其他部分。

常見陷阱與疑難排解
大多數問題來自於素材複雜度、比例錯誤、裝置條件不支援或主題媒體處理不當。請在發布前使用下列檢查清單。
模型載入緩慢或無法在行動裝置上載入
若載入緩慢,請檢查幾何、紋理解析度、材質數量與總檔案大小。Shopify 接受 500 MB 以下的檔案,並會優化超過 15 MB 的檔案,但較小且有效率的素材仍較有利於行動傳輸。
檢查清單:
- 減少多邊形數量。
- 壓縮紋理。
- 匯出優化的 GLB 檔案。
- 在 Wi-Fi 與行動數據下分別測試。
產品在 AR 中顯示為錯誤尺寸
若產品在 AR 中顯得過大或過小,模型的比例或方向可能不正確。請確保使用真實世界單位、正確的前向軸,並在匯出前將原點置於物體底部。
檢查清單:
- 確認單位(真實世界比例)。
- 檢查模型方向。
- 確認原點/樞軸位置正確。
- 在真實行動裝置上再次測試。
「在您的空間中查看」按鈕未出現
若模型可旋轉但 AR 無法使用,請確認上傳的是支援的 GLB 或 USDZ 模型,在相容的實體裝置上測試,並確認主題能呈現 Shopify 的 AR 控制項。
檢查清單:
- 確認模型為支援格式。
- 在實體 iPhone 或 Android 裝置上測試。
- 確保作業系統與瀏覽器支援 AR。
- 若最近更換過模型,請重新發布商品。
AR 在 iPhone 上無法運作
在 iOS 上,請在支援 Quick Look 的裝置上使用 Safari 測試。若 AR 仍然失敗,請等待 Shopify 處理完成,重新檢查比例與材質,並確認主題使用 Shopify 支援的商品媒體整合。
檢查清單:
- 在支援的 iPhone 或 iPad 上使用 Safari 測試。
- 檢查裝置是否支援 Apple Quick Look。
- 若問題持續存在,請參閱最新的 Shopify 文件。
在發布前花幾分鐘在真實行動裝置上測試,可以及早發現大多數問題,確保顧客獲得流暢的 3D 與 AR 體驗。

常見問題
Shopify 使用哪種 3D 模型檔案格式?
Shopify 接受 GLB 與 USDZ 兩種格式。GLB 優先的工作流程便於網頁傳遞,因為它將模型與紋理整合在一個檔案中,而 USDZ 則用於 Apple Quick Look。Shopify 會處理上傳檔案,以在支援的裝置上提供相容格式。
如何將 3D 模型加入 Shopify 商品?
開啟 Shopify 管理後台 → 商品,選擇商品,然後在 媒體 區塊上傳支援的 GLB 或 USDZ 檔案。選取上傳的模型,使用 編輯檔案 調整其初始呈現方式。發布前請預覽店面,並在實體行動裝置上測試 AR。
3D 商品模型在 Shopify 上是免費的嗎?還是需要安裝應用程式?
Shopify 的原生商品媒體功能不需要額外的檢視器應用程式即可支援基本 3D 與 AR。但對於設定器、材質切換、熱點、分析或特殊整合,第三方應用程式仍有其用途。請確認使用中的主題支援 Shopify 商品媒體。
如何為我的 Shopify 商品啟用 AR?
上傳支援的 3D 模型,並使用能呈現 Shopify 商品媒體與 AR 控制項的主題。Shopify 會準備相容的 GLB 與 USDZ 素材;支援的 Apple 裝置使用 Quick Look,而相容的 Android 裝置則可使用 Scene Viewer。請在實體裝置上確認結果。
3D 模型會拖慢我的 Shopify 商店嗎?
如果素材過大或主題載入效率不佳,確實可能造成影響。請減少不必要的幾何、優化紋理,並在行動硬體與較慢的網路上測試實際商品頁面。載入行為取決於實作方式,請實際衡量而非依賴普遍性的效能宣稱。
如何取得 Shopify 商品的 3D 模型?
您可以在 Blender 或 CAD 中自行建模、使用 Tripo Image to 3D 生成起點、購買合適的授權素材,或委託 3D 藝術家製作。無論選擇哪種方式,請務必在發布前確認尺寸、材質、拓撲結構與使用權利。
GLB 與 USDZ 在 Shopify 上有何不同?
GLB 是緊湊的網頁導向格式,可包含幾何、材質與紋理於單一檔案中。USDZ 則用於 Apple Quick Look AR。Shopify 接受兩種格式,並會處理上傳檔案以提供相容的店面與裝置體驗。
結論
Shopify 提供互動式 3D 與 AR 的商品媒體基礎;體驗品質取決於模型、主題與測試。建立或取得精確的素材、進行優化、上傳支援的格式,並在實體裝置上驗證結果。若要從商品圖片建立起始模型,請試試 Tripo AI Studio。




