Headless Shopify 讓品牌自行開發前端,商品、庫存、顧客與結帳仍由 Shopify 管理。它適合需要特殊體驗、多通路內容或獨立前端發布節奏的商家;若問題只是圖片太大、App 太多或佈景主題沒有整理,先做現有商店優化通常更合理。
這個決定不該從框架偏好開始。先回答六個問題:現有佈景主題限制了哪一段顧客旅程?效能問題有沒有實測資料?內容是否要供多個通路使用?台灣金流與履約怎麼接?誰負責長期維護?三年總成本和預期改善是否能放在同一張表上?
現有佈景主題究竟做不到什麼?
「想做得更有品牌感」還不夠具體。需要把限制寫成可驗收的情境,例如商品需要即時 3D 配置、同一份內容要供網站與門市螢幕使用,或全球市場需要各自發布而又共用商品資料。若需求可以用區塊、theme app extension 或較小範圍的客製完成,重建前端的成本未必合理。
Shopify 官方目前提供多種 Headless 建置方式。Hydrogen 是以 React Router 與 Storefront API 為基礎的 Shopify 前端工具組,也可以選其他框架搭配 Headless channel。選擇 Hydrogen、Next.js 或其他技術,不會自動解決內容模型、搜尋、分析與維運責任;這些仍要由專案團隊設計。
需要先理解服務邊界時,可查看 Headless 開發服務及 Shopify Plus 代理商服務。兩頁說明的是可交付範圍,不代表每個品牌都需要採用 Headless。
效能問題是否真的來自佈景主題?
web.dev 對 Largest Contentful Paint的良好門檻是 2.5 秒以下,評估時應看行動裝置與桌機各自第 75 百分位的真實使用者資料。一次 Lighthouse 測試只能提供實驗室線索,不能取代 Chrome UX Report 或正式環境的 field data。
先把 LCP 拆成伺服器回應、資源載入、圖片解碼與渲染延遲,再看第三方腳本、字型和 App 的成本。Headless 可以讓團隊掌控快取、資料請求與圖片策略,也可能因為實作不佳而更慢。沒有基準數據與效能預算,就無法證明重建比整理現有佈景主題更有效。
速度也不能單獨決定投資。應把效能變化連到商品瀏覽、加入購物車與完成付款等指標,並排除促銷、來源與裝置組成的影響。宣稱「快 0.5 秒就能多多少營收」之前,需要自己的實驗或可靠來源。
內容是否需要離開單一商店前端?
當商品與品牌內容要同時供網站、App、門市裝置或不同市場前端使用,API 與 Headless CMS 的價值比較清楚。若內容只服務一個官網,而且行銷團隊已經熟悉 Shopify theme editor,增加 CMS 可能只是多一個後台。
評估時要畫出內容擁有者與發布流程:商品欄位由電商團隊維護,品牌專題由內容團隊負責,翻譯由誰審核,預覽與排程在哪裡完成。前端解耦後,這些責任不會消失,只是需要重新連起來。
台灣金流與履約能不能完整走通?
Shopify 官方的 Shopify Payments 支援地區目前未列出台灣。台灣商家通常需要第三方付款服務,實際可用方式、交易費與結帳限制要依服務商及 Shopify 方案核對。
Headless 專案還要測試超商取貨、宅配、電子發票、會員點數、折扣與退換貨。不要只確認商品能加入購物車;從商品頁一路走到付款成功、訂單回寫、出貨通知與退款,才是一條完整旅程。第三方整合若依賴特定佈景主題程式碼,也要先確認是否支援自訂 storefront。
誰會維護第二套 production system?
佈景主題商店由 Shopify 承擔較多前端基礎設施;Headless 前端則需要自己的程式庫、部署、監控、相依套件更新、資安修補與值班責任。Shopify 平台仍會更新 API,瀏覽器、搜尋引擎和第三方服務也不會停在上線那一天。
專案預算應分成探索、設計與建置、資料與整合、遷移、測試、上線,以及後續維運。平台方案只是其中一項,可先用 Shopify 方案費用指南核對;真正容易漏算的是每月工程容量、監控服務、內容維護與重大活動支援。
哪些情況應該先暫緩?
如果沒有明確的佈景主題限制、沒有真實效能資料、關鍵整合尚未確認,或上線後沒有維護人力,先暫緩。可以先清理 App、調整圖片與字型、簡化版型,並建立分析基準。這些工作不會浪費;未來真的走 Headless 時,它們仍是需求與驗收依據。
反過來說,當限制已經具體、商業影響可量化、內容與多通路需求成立,而且組織願意長期負責另一套 production system,Headless 才進入值得估算的範圍。免費架構評估會把這六個問題放進同一份決策表,答案也可能是先不要重建。
