超越傳統電商限制：Headless CMS 與Shopify 的創新整合策略

隨著電商市場的高速發展，依賴傳統平台如 Shopify 已無法全面滿足企業迅速跨境擴展的多樣化需求。面對這一挑戰，Tomofun 引進 Headless CMS 技術並與 Shopify 進行整合。此創新策略不僅提升了我們的運營效率，還大幅增強了對全球市場需求的靈活應對能力，為客戶帶來了即時且個性化的購物體驗。

在 Tomofun 發展初期，Shopify 確實帶給我們建立電商網站的便利性。但隨著 Furbo 產品在全球市場的迅猛擴張，MKT 需要一個可以和客戶快速溝通及銷售的平台，因此，Shopify 高度依賴 Liquid 模板語言的客製化要求，為非技術人員帶來了學習上的挑戰，這不僅增加了操作成本，也影響了市場的快速反應能力。因此，尋找一個更靈活、可擴展的解決方案成了我們的迫切需求。

什麼是 Headless CMS

Headless CMS vs. Traditional CMS (https://prismic.io/blog/headless-cms-vs-traditional-cms)

不同於傳統的 CMS，Headless CMS 通過前後端分離的架構，使得內容通過API 在任何裝置上展現，從而為開發者提供更大的自由度來適應各種前端技術和平台。這種架構不僅為技術人員帶來了便利，也極大地提升了非技術團隊的工作效率：

對非技術人員的優勢

• 靈活的系統整合：允許內容跨前端框架發布，提升了跨系統整合的便捷性。
• 簡化的操作介面：提供一個友好的用戶介面，使技術和非技術團隊成員可以方便地共同協作，無需深入了解底層技術細節。
• 內容的多平台重用：一次創建，多處應用，極大地節省了內容管理的時間與資源。

對前端工程師的優勢

• 減輕安全和管理負擔：Headless CMS 服務商負責維護和更新平台，前端工程師可以專注於優化用戶體驗。
• 適應未來發展需求：前後端分離，使前端團隊能自由地更新網站外觀與功能，並在需要時無縫切換到新的技術棧或平台。
• 提升網站性能：易於利用現代技術如靜態網站生成器，提高網站載入速度和性能。

Headless CMS 與 Shopify 整合的優勢

除了前端網頁管理及客製化系統，Shopify 依舊有其他強大的電商功能，例如：產品管理、物流及支付方式在地化、結帳流程國際化等等，這對跨國後勤作業管理而言是極大的幫助。

通過 Headless CMS 和 Shopify 的整合，保留 Shopify 強大的電商功能，又不受其平台限制，實現更加多元和靈活的內容交付策略。這種結合方式還幫助我們解決了多語言和跨境運營的挑戰，確保了全球擴張的順利進行。

實際案例分析

在這次的技術升級案例中，我們成功地將 Headless CMS 與 Shopify 的強大功能結合起來，以優化整個電子商務平台。

Headless CMS 與 Shopify 的整合策略

我們將 Furbo 電商網站的用戶界面分為「購物前」和「結帳」兩大部分。

在購物前階段，所有的頁面如首頁、產品介紹頁和部落格等，均通過 Headless CMS 管理，並利用 NextJS ISR 動態生成，部署於 AWS Amplify，以提供更快的頁面載入速度和更佳的 SEO 表現。

當用戶進入結帳流程後，則通過 URL Redirection，轉至 Shopify 提供的結帳流程，此部分完美地整合了在地化的支付方式和物流服務，保證了交易的安全性和便利性。

As is: Multiple Shopify Stores (1 Country to 1 Shopify Store)

To be: Decoupled Flow for Landings and Checkout flow. (1 CMS to 15 eComm Landings + 4 Languages Blog)

整合前後的效益

此技術實施不僅顯著提升了用戶體驗，還大幅改進了運營效率。過去，在 Shopify 平台上實現客製化需求，尤其是在高銷售季節，前端團隊需投入大量人力進行網頁調整。現在，這些調整可以通過非技術人員在 CMS 後台迅速完成，大大降低了對前端開發資源的依賴。

舉例來說，一個銷售活動可能「至少」是以下兩個區塊的改動：

Campaign Element

• Campaign Banner (紅色區域)：內容、左右圖示、背景顏色、內容顏色
• Key Visual (橘色區域)：背景圖片、主要文字、是否顯示按鈕、按鈕樣式、按鈕行為

而這兩個區塊都支援多內容輪播，另外可能還會有日常的內容調整，如 Key Visual (橘色區域)裡「貓、狗入口」的文字、導轉連結、樣式。

在年度黑色星期五至聖誕節銷售季期間，我們實現了

🎉平均每一個銷售活動，減少了62%的人力 🎉

這不僅提升了反應市場的速度，也使得團隊能夠更加集中精力於創新和改進其他關鍵性能指標，例如：系統和效能優化等。

From Maintenance to Engineering Excellence

技術實施步驟

實施 Headless CMS 與 Shopify 整合的過程分為三個階段：

• 階段一：策劃 → 最小可行版本的成功部署和評估
  選擇流量大但可控的市場進行最小可行產品部署，評估其穩定性並根據反饋進行初步優化。
• 階段二： 15個 Furbo 電商網站的全球部署
  擴展 Headless CMS 與 Shopify 的整合到其他 14 個國家，不僅提高了我們網站的性能和可用性，更確保了無縫的全球運營。
• 階段三：4個語言的 Furbo 部落格的全球部署
  將 Headless CMS 整合到 4 種不同語言的 Furbo 部落格中，並確保所有語言版本的內容的有效管理和更新。

Headless CMS Integration Phases Breakdown

下一步計劃

為了進一步提升靈活性和內容的重用性，我們計劃持續優化 CMS 設計，簡化內容更新流程，並提升非技術人員操作的便利性。此外，我們也在探索如何將 Shopify 最新的 Shopify Market 及 Headless eCommerce 更好地融合至我們的結帳流程中，以進一步提高跨國營運的效率。

結語

隨著 Headless CMS 和 Shopify 的成功整合，Tomofun 不僅突破了傳統電商平台的界限，更在全球市場中確立了創新的標杆。這場變革顯著提升了我們的運營效率，並大幅改善了用戶體驗，使我們能夠迅速且有效地回應全球各地市場的變化。未來，我們將繼續探索和實施更多創新解決方案，以確保 Tomofun 在寵物 AIoT 的全球電商領域保持領先。