Headless Shopify 綜合指南：您需要知道的一切

Shopify 是前五名領先的電子商務平台之一，截至 2021 年 4 月，其市場份額為 3.69%。它是不斷推出新功能的平台之一。 這就是 Shopify 首先如此受歡迎的原因。

但是電子商務領域比以往任何時候都更加充滿活力。 客戶越來越精通技術，獲客成本不斷上升，打造個性化購物體驗變得越來越必要。

儘管您的 Shopify 商店可以處理大部分這些事情，但如果您的品牌快速擴張，這還不夠。 原生 Shopify 功能可能無法幫助您擴大覆蓋面、增加轉化率以及不斷吸引新的數字接觸點。 這就是無頭商務（或無頭 Shopify）的用武之地。

在本無頭 Shopify 指南中，您將了解：

A. 什麼是無頭 Shopify？

這是一個無頭商務設置，其中後端（Shopify plus）與前端（表示層）是分開的。 API 形成了兩者之間的連接鏈接。 但是，在傳統的 Shopify 平台中，前端和後端都是捆綁在一起的。

在 headless Shopify 中，您可以選擇自己喜歡的技術或框架從頭開始構建前端。 後端通常是 Shopify。 因此，您可以獲得 Shopify Plus 的敏捷性、安全性和用戶友好性，以及遠遠超出 Shopify 開發的創作自由。

問題是，為什麼要把前端和後端分開呢？

• 首先，它為您提供了創建高度個性化數字體驗的自由，這是建立品牌忠誠度的必要條件。
• 其次，您在編程語言、技術或內容渠道方面沒有限制。
• 無論是智能手錶還是電視屏幕，您都可以輕鬆快速地接觸到目標受眾。

這就是電子商務商店在日益多樣化的數字世界中想要的那種自由。

B. 無頭 Shopify 如何工作？

如前所述，無頭 Shopify 由兩個獨立的部分組成，前端和後端。 將這兩個部分（頭部和身體）粘合在一起的粘合劑是 API，或應用程序接口。 它本質上是在表示層（前端）和數據庫或後端之間交換信息。

您可以使用以下任何系統來構建您的後端，該後端包含和管理您想要與客戶共享的內容。

• 內容管理系統 (CMS)
• 客戶關係管理 (CRM)
• 數字體驗平台（DXP）
• 漸進式 Web 應用程序 (PWA)

好消息是 Shopify 在構建時考慮了無頭商務功能。 因此，將 Shopify 支持的網站轉變為更靈活的無頭商業商店可以是無縫的。

C. 將 Shopify 理解為無頭結構

雖然無頭商務聽起來是一筆不錯的交易，但並不全是玫瑰。 所以，在你開槍之前，你必須徹底了解無頭 Shopify 結構。 在遷移到無頭 Shopify 之前，您需要考慮以下幾點。

1. 主題和富文本編輯器

我們都知道 Shopify 主題編輯器如何讓我們的生活變得輕鬆。 主題定制感覺就像輕而易舉。 不幸的是，在無頭商務環境中將缺少這個漂亮的功能。

同樣，富文本編輯器也是 Shopify 平台不可或缺的一部分。 但是，當您轉向無頭商務時，這也會丟失。 這意味著文本的格式和样式將是古老的歷史。 想想產品描述、博客、CTA 等。

您必須牢記這一點，特別是如果您的在線商店無法取消這兩個功能。

2. 原生功能

與主題和富文本編輯器一樣，在無頭模式下您將失去其他幾個本機功能。 例如，您將丟失 Shopify 分析和 Shopify 腳本。 相反，您將不得不依賴谷歌分析等第三方工具。 如果您嚴重依賴 Shopify 分析，它可能會影響您的工作效率。

同樣，您將無法使用特定 Shopify 應用複制您以前的店面。 您可以藉助 API 獲得相關功能。 然而，這可能並不總是可能的。

3. Shopify 應用商店

沒有人可以想像沒有應用商店的 Shopify 平台。 有如此多的應用程序和插件可供選擇，您的 Shopify 開髮變得更加順暢和快捷。 不幸的是，你無法使用應用程序和插件在無頭後向前端添加新功能。

您也許可以使用一些插件和應用程序與其他集成。 但是，如果您不能，請準備好與多個應用程序/插件說再見。 唯一的一線希望是您可以繼續使用在後端運行的應用程序/插件。 請記住，您的後端仍然是 Shopify Plus。

4. 客戶賬戶

您需要了解的另一個關鍵點是客戶帳戶的丟失。 Shopify 的客戶帳戶將無法在無頭商務中使用。 如果沒有帳戶，您的客戶只能以訪客客戶的身份結賬。

但是，您可以在 Shopify Admin API 的幫助下創建自定義解決方案。 在這裡，您的客戶將能夠手動添加他們的詳細信息。 如有必要，您可以使用 cookie 保存消費者詳細信息。

D. 如何使用 Shopify 去無頭？ （設置）

一旦你決定去無頭，你將需要首先計劃整個過程。 通常，使用 Shopify 支持的網站進行無頭操作涉及以下步驟。

1. 為您的 Shopify 前端選擇合適的技術

使用 Shopify 的第一步是選擇正確的前端技術。 大多數 Shopify 開發機構依賴以下四個選項來構建強大、可擴展且直觀的 Shopify 店面。

a) 氫氣和氧氣

Shopify 宣佈在 Unite 2021 上推出 Hydrogen 和 Oxygen。Hydrogen 是一個開發人員工具包，其中包含一些反應組件，可讓您構建具有獨特樣式和設計功能的前端解決方案。

另一方面，Oxygen 允許您直接在 Shopify 服務器上託管 Hydrogen 店面。 您可以享受更快的加載時間，而不必擔心開發操作。

這對二人組的唯一缺點是它仍然是新的。 你會發現很少有現實生活中的用例。 因此，在使用此店面解決方案時，您可能需要靠自己。

b) 框架

您還可以使用 Next.js 或 Vue Storefront 等前端 Web 開發框架來構建您的 Shopify 前端。 您可以使用許多其他框架。 您可以將它們託管在 Shopify 的 Storefront Cloud 服務上。

然而，使用框架從頭開始構建前端非常耗時，即使對於最有經驗的開發人員也是如此。 它通常需要自定義集成、自定義和經過測試的購物車管理實施，以及從頭開始重建功能。

c) 前端即服務

構建 Shopify 前端的另一種相對簡單快捷的方法是將前端用作服務。 最著名的是 Shogun Front End 和 Builder.io。 它們只不過是帶有預構建連接器的 PWA 構建器。

d) 前端中間件

第四種選擇是使用 API 優先的商務中間件，例如 Nacelle。 像這樣的中間件通常將電子商務平台、CMS 和微服務整合到一個 API 中。 這是連接 Shopify 前端和後端的橋樑。

2. 了解 Shopify Storefront API

上一點討論的所有前端開發選項都使用 Shopify Storefront API。 換句話說，您必須先熟悉 Shopify Storefront API，然後才能進行下一步。

Shopify Storefront API 可用於 GraphQL。 因此，如果您想利用 Storefront API 的潛力，就必須了解 GraphQL。 您可以查看 GraphQL 指南以獲取更多信息。

3. 創建訪問令牌

接下來，您將需要生成訪問令牌。 這是你必須做的。

• 登錄您的 Shopify 後台
• 轉到應用程序部分，然後單擊管理私人應用程序按鈕。
• 現在，單擊創建新的私有應用程序選項。
• 添加應用名稱和電子郵件。
• 轉到Storefront API部分並選中Allow this app to access your storefront data using the Storefront API複選框。
• 接下來，選擇要向應用公開的數據類型。
• 單擊保存。

保存後，您可以在 Storefront API 頁面底部看到生成的店面訪問令牌。

4. 構建您的前端（Shopify 店面）

創建訪問令牌後，您可以開始構建和/或自定義您的 Shopify 店面。 但首先，您應該看一下 Shopify 前端開發的自定義店面示例應用程序。 如果您正在構建基於 React 的前端應用程序，請確保通過 react-js-buy 存儲庫。

• 在構建 React.js 應用程序時，您需要使用 NPM 或 Yarn 安裝 JavaScript Buy SDK。
• 安裝 SDK 後，將Client對象導入您的應用程序代碼。
• 初始化客戶端並開始向 Storefront API 發出請求。

請務必先查看 JavaScript Buy SDK 文檔和 Shopify 的官方 API 文檔。 它將幫助您了解可用的數據。

E. 由 Shopify 提供支持的頂級無頭商務

許多由 Shopify 提供支持的網站都採取了無頭行動來幫助擴大其品牌。 這裡有五個電子商務商店/網站已經掌握了他們的無頭方法，同樣，風格和復雜性。

1.科頓

當這個可持續的服裝和家居用品品牌 Kotn 需要一個快速加載的在線商店時，他們轉向了無頭 Shopify。 從那以後，他們再也沒有回頭。 該網站擁有一個非常直觀的前端，具有快速添加等功能。

2. 全鳥

另一個可持續服裝、配飾和鞋類品牌 Allbirds 擁有豐富多樣的產品目錄。 使用 Shopify 可以更輕鬆地管理目錄，而不會影響速度、風格和用戶體驗。

3.瑜伽女孩

當您是生活方式品牌時，更新內容是您的首要任務。 毫不奇怪，像 Yoga Girl 這樣的新興品牌選擇與 Shopify 合作。 您可以做任何事情，從更新博客文章到以閃電般的速度管理您的帳戶。

4. 全體會議

作為一個護膚品牌，Plenaire 成功地利用了無頭商務。 該網站速度很快，並且明智地利用了動態頁面。 總體而言，它為您提供了令人印象深刻的用戶體驗。

5. Verishop

Verishop 是典型的電子商務商店之一，銷售從化妝品到保健品的各種商品。 他們已將無頭 Shopify 用於創建可自定義的 URL 結構、深入的 SEO、快速的頁面加載速度和高度個性化的用戶體驗等功能。

F. 無頭 Shopify 的好處

當您的在線商店僅依賴 Shopify Plus 時，Headless Shopify 提供了難以探索的功能。 這就是為什麼您需要了解 Shopify 在何處以及如何實現無頭模式可以幫助您的業務。 讓我們深入了解它必須提供的一些顯著好處。

1. 更好的靈活性

在這裡，我們談論的是開發人員的靈活性。 對於傳統的 CMS，您將需要依賴Shopify 開發人員。 當然，由於技能組合有限且定義明確，因此可以節省時間和金錢。 但它也阻止您利用其他新興和流行的電子商務技術。

使用無頭 Shopify，您可以使用任何技術。 它可以是氫框架或任何其他前端即服務選項。 這使您的 Shopify 開發比以往更加靈活。 最終結果是您可以構建高度定制的用戶體驗、設計、架構和輕量級店面。

簡而言之，您的在線商店將面向未來。

2.可定制的網址

我們都知道 Shopify 僅提供四種預定義的 URL 類型。 因此，為產品頁面創建自定義 URL 是不可能的。 但是，如果您使用無頭 Shopify 構建架構，您將擁有這種自由。

它為擁有多品牌市場的商店提供了大量機會。 這就是為什麼像 Verishop 這樣的商店首先選擇了無頭商務。 您可以自定義 URL 以包含完整的產品描述。

此外，如果您將商店從其他電子商務平台導入 Shopify，您可以保持原始 URL 結構不變。 它可以讓您規避 SEO 遷移的風險。 對於擁有不同產品、市場和目標受眾的電子商務商店來說，這是一種解脫。

3. 增強的安全性

在無頭 Shopify 中，前端獨立於後端運行。 由於只有 API 將兩者連接起來，DDoS 等攻擊幾乎沒有剩餘的表面積。 這將您的在線商店安全性提高了一英里。

隨著 DDoS 攻擊變得更具創造性和利用性，您必須找到一切可能的方法來阻止此類攻擊。 無頭化本質上是朝著這個方向邁出的正確一步。

4. 對用戶體驗的出色控制

完全控制用戶體驗是無頭 Shopify 最令人垂涎​​的好處之一。 這就像從頭開始建造自己的汽車。 因此，您可以自由選擇一切，從發動機到儀表板內飾。

換句話說，您可以毫不費力地設計出獨特且響應迅速的客戶體驗，並幫助您的品牌脫穎而出。 您可以擺脫 Shopify 設計和架構限制的束縛。

您可以根據需要重新設計、擴展和/或添加新的用戶體驗。 這是大多數擁有多品牌市場渴望的電子商務商店的自主權。

5. 更高的可擴展性

Headless Shopify 架構讓您可以無縫地將新商店添加到您的電子商務領域。 例如，您可以將特定國家或地區的商店添加到您的集中式中心。 借助靈活且高度可定制的 Shopify 店面，您可以輕鬆更改：

• 價格
• 產品說明
• 語言
• 佈局
• CTA

這使您可以以閃電般的速度擴展您的在線商店。 自然，需要快速擴展的品牌現在正轉向無頭商務作為可靠的解決方案。

6. 提高速度

頁面加載速度現在是最關鍵的 Core Web Vitals 之一。 建立一個加載速度超快的在線商店對許多人來說仍然是一項艱鉅的任務。 它還需要大量的編碼，品牌很少願意投入。然而，這是必要的邪惡。 更高的加載速度，尤其是在移動設備上，可以提高您的銷售轉化率。

幸運的是，無頭 Shopify 讓開發人員和店主都更輕鬆。 以 Oxygen 服務器和 Hydrogen 框架為例。 儘管仍處於起步階段，但此類功能已經在幫助店主顯著提高頁面加載速度。

7. 漸進式 Web 應用程序 (PWA)

漸進式 Web 應用程序 (PWA) 是無頭 Shopify 的另一個好處。 PWA 直接通過您的網站提供類似原生應用程序的功能。 無需下載您的在線商店應用程序。 無頭 Shopify 讓使用 PWA 變得輕而易舉。

PWA 大部分時間都是離線工作的。 當然，它需要使用服務工作者進行初始加載。 您可以將其添加為智能手機主屏幕上的應用程序圖標。

它還帶有推送通知功能，這對數字營銷很有幫助。 但最重要的是，PWA 速度非常快，因為大部分內容都是預加載的。 這有助於產生更多的銷售轉化。

8. 縮短上市時間

最後，無頭 Shopify 最重要的好處之一是縮短了上市時間。 借助 API 驅動的 Shopify 前端，您的營銷人員可以：

• 更快地創建營銷活動
• 通過網站佈局和產品放置獲得創意
• 工作不用擔心對後端的影響
• 精確控制您的品牌外觀和感覺

這有助於您快速、高效地製作廣告系列。 這就是當今時代的營銷 101。

G. Headless Shopify 的缺點

就像獨特的好處一樣，無頭 Shopify 也有一些缺點。 您必須像了解好處一樣徹底了解這些缺點。 這是您需要牢記的。

1. 失去對應用程序/服務的支持

當您轉向無頭商務時，Shopify 商店的即插即用功能將停止工作。 您的大多數應用程序也將停止工作。 您將需要自定義集成以使這些應用程序/服務在無頭環境中工作。 此外，應用程序/服務將需要 API，以便您的後端能夠識別它們。 它可能需要您創建一些自定義代碼。

2. 複雜性增加

添加新的前端體驗意味著增加無頭商務系統的複雜性。 您添加的功能、服務和體驗越多，您的電子商務環境就越複雜。

它可能會導致與應用程序相關的集成問題、維護問題以及需要不斷修復錯誤。 總而言之，這意味著您將不得不在各種經驗豐富的開發人員身上花費更多的錢。

由於所有這些額外的 Shopify 開發和對其他技術的需求，您的基礎設施成本也將飆升。 隨著您向在線商店添加新功能/服務，這些成本將繼續上升。

3. 尋找實施合作夥伴

說到技術專長，您需要找到能夠處理無頭項目的 Shopify 開發機構。 如果不這樣做，您將花費大部分時間來管理您的在線商店、修復錯誤等。 您寧願花時間開展營銷活動並吸引更多客戶。

然而，找到一個合適的實施合作夥伴是一個難以破解的難題。 可能需要一段時間才能找到最適合您品牌的人。 問題是，你有時間等到找到可靠的人嗎？

4.沒有所見即所得的編輯器

我們非常確定您團隊中的非技術成員喜歡所見即所得的編輯器。 它不適用於無頭 Shopify。 因此，您必須告別無縫編輯、版本控制和預覽。 雖然 Shogun Front End 和 Builder.io 等一些前端系統提供了此功能，但並不相同。

5. 沒有新的 Shopify 功能

Shopify 平台以推出新功能而聞名，無論是多幣種還是內置分析。 但是，當您無頭時，這些將不可用。 您可以將此類功能自定義構建到您的前端。 但這需要更多的金錢和精力。

H. Headless Shopify 的 SEO 是否不同？

當談到無頭商務時，搜索引擎優化完全不是一個不同的球類游戲。 但是您確實需要考慮一些事情才能充分利用您的網站。 這是一個簡短的 Shopify SEO 清單，可幫助您入門。

1. 內容和可讀性

您可能已經知道，您的 Shopify 店面將使用某種形式的 JavaScript。 但是谷歌仍然在努力閱讀一些框架。 您必須確保 Google 了解您的框架。

• 您可以使用 fetch as Google、站點搜索和內容文本搜索等測試來檢查 Google 是否已將您的 JavaScript 編入索引。
• 確保根據您的前端運行免費的服務器端 JavaScript。
• 可讀性取決於內容的顯示方式。 由於這是一個特定於前端的問題，因此您必須為每個前端運行單獨的測試並相應地進行 SEO 更改。

2.動態服務

Headless Shopify 依靠動態服務來加速您的網站並改善用戶體驗。 但除非另有說明，否則谷歌可能會認為這是一個狡猾的 SEO 舉措。 您將需要使用 HTTP-vary 代碼，告訴 Google 您正在使用動態服務來提高速度，而不是做一些可疑的事情。

3. 散列 URL

JavaScript 也帶來了哈希 URL 的挑戰。 這些 URL 突出顯示瀏覽器端過濾。 換句話說，谷歌無法讀取主題標籤之外的任何內容。 這就是為什麼您必須確保您的 SEO 頁面不在主題標籤後面。

4. 維護 URL

如果您要從不同的 CMS 遷移到無頭 Shopify，這是一個重要的考慮因素。 通常，擁有多品牌市場的電子商務商店會面臨這個問題。 與其更改原始 URL，不如將它們原樣用於所有類別、列表和產品。

5. API 調用

Headless Shopify 是 API 驅動的。 這意味著會有動態 API 調用，這將影響您的 URL，影響您的 SEO。 如果您希望您的頁面排名，最好使用靜態 URL。 您還可以利用 SEO 最佳實踐，例如 no-follow、robots.txt 和規範。

6. 整理您的 SEO 基礎知識

傳統的 Shopify CMS 帶有大量內置的 SEO 功能。 但是當無頭時，您必須手動包含這些功能。 從頭開始構建前端時，您可能會忘記添加 SEO 元素。 為避免此問題，請列出 SEO 基礎知識並仔細檢查所有內容。

I. 使用 Shopify 變得無頭無腦昂貴嗎？

最後，這一切都歸結為一個問題。

無頭 Shopify 更貴嗎？

簡短的回答是肯定的。

但是，您必須正確看待它。 無頭 Shopify 也往往會帶來更多的錢。 它解決了許多傳統 CMS 無法解決的問題。 這就是它可以幫助您的品牌脫穎而出、吸引更多客戶並賺更多錢的方式。

無頭 Shopify：

• 加速您的網站，改善用戶體驗
• 提高您的搜索引擎可見性，因為它加載速度更快
• 使構建獨特而美觀的用戶界面變得更加容易
• 提高在線商店的安全性
• 將 PWA 功能帶入您的電子商務領域

無頭 Shopify 的所有這些好處都轉化為更高的銷售轉化率和更多的收入。 許多品牌已成功利用無頭 Shopify 來獲取這些好處。 在無頭之後，Ballsy 的轉化率提高了 28%。

另一方面，BonLook 在無頭之後的平均訂單價值增長了 18%。 如您所見，從長遠來看，無頭 Shopify 的高成本是合理的，因為它還帶來了更多的收入和利潤。

J. 什麼時候應該使用 Headless Shopify？

儘管無頭 Shopify 可以增加您的收入和利潤，但它可能並不總是正確的藥水。 如果您的在線商店需要以下內容，您可能希望切換到無頭商務。

1. 獨特的品牌體驗

如果您想為您的客戶打造獨特的品牌體驗，那麼無頭模式將是正確的選擇。 Shopify Plus 雖然很出色，但在定制方面提供的功能有限。

但是，無頭商務允許您從頭開始根據您的業務需求定制用戶體驗。 這有助於您的在線商店脫穎而出。

2. 更好的客戶體驗

定制與更好的客戶體驗之間存在直接關聯。 如果您的在線商店提供其他商店無法提供的功能、速度和購物體驗，那麼它肯定會轉化為更好的消費者體驗。

3. 更高的轉化率

自然，快速的頁面加載和個性化會帶來更高的轉化率。 如前所述，許多品牌在無頭之後的轉化率、訂單價值和其他指標都出現了大幅增長。

4. 高性能

Shopify Plus 在移動設備和其他小型設備上運行良好。 但是，如果您無頭，則可以享受更好的頁面加載速度。 此外，無頭 Shopify 還可以提高您的數據安全性並降低計劃外停機的風險。 如果這是您正在尋找的東西，那麼無頭電子商務就是您的選擇。

K. Headless Shopify 的未來展望

無頭商務不是趨勢，而是電子商務的未來。 隨著消費者使用不止一種設備訪問網絡，多渠道已成為新常態。 與此同時，消費者正在尋找高度個性化的數字接觸點。 這就是為什麼無頭 Shopify 革命在未來幾年可能永遠不會放緩。

由於其內容優先的結構，無頭商務正在幫助品牌提供令人難忘的全渠道客戶體驗。 總而言之，無頭是讓您的業務面向未來的最佳方式。

結論

近年來，無頭 Shopify 獲得了很大的關注。 這種新的革命性形式的 CMS 以其卓越的速度、高性能和更好的安全功能引起了人們的注意。 但是，許多人仍然不知道什麼是無頭 Shopify，它是如何工作的，或者他們應該去做什麼。 本指南將幫助您回答有關無頭 Shopify 的所有問題。

如果您想在 Shopify 中無所事事，請聯繫我們。 我們的專家可以幫助您找到正確的無頭 Shopify 方法。