Shopify 與 Builder.io 整合指南：方法與優勢

1

Shopify 與 Builder.io 整合指南：方法與優勢

Builder.io 作為一個視覺化開發平台，提供了與 Shopify 豐富的整合選項，使商家能夠提升其電子商務網站的功能性和使用者體驗。本報告將詳細探討整合這兩個平台的方法及其所帶來的顯著優勢。

整合 Shopify 與 Builder.io 的方法

使用 Builder.io 的 Shopify 插件

最直接且推薦的整合方式是通過 Builder.io 的官方 Shopify 插件：

  1. 在 Builder.io 後台進入「Integrations」頁面
  2. 點擊 Shopify 插件的「Enable」按鈕
  3. 啟用完成後，點擊通知中的「Configure」按鈕（如錯過通知，可點擊集成磁貼上的「Settings」按鈕）
  4. 提供您的「storefront access token」和「store domain」（可在 Shopify 儀表板的「Manage private apps」部分找到）
  5. 點擊「Connect Your Shopify Custom App」按鈕完成連接

在進行設置前，請確保已在 Shopify 中啟用自定義（以前稱為「私有」）應用程序開發功能。參考 Shopify 的自定義應用文檔獲取詳細說明。

使用 API 進行集成

對於需要更靈活控制的開發者，可以使用 Builder.io 的 API 進行集成：

// 在 Shopify 主題文件中嵌入 Builder 內容
<div id="builder-section">
  <script>
    window.builderApiKey = 'YOUR_API_KEY';
  </script>
  <div id="builder-component" data-builder-component="custom-section"></div>
</div>
<script>
  (function() {
    var script = document.createElement('script');
    script.src = 'https://cdn.builder.io/js/webcomponents';
    script.async = true;
    document.head.appendChild(script);
  })();
</script>

這種方法允許將 Builder.io 中創建的內容嵌入到 Shopify 模板中。

Shopify Hydrogen 框架整合

對於使用 Shopify’s Hydrogen 框架的商店，Builder.io 提供了專門的整合支持：

const MODEL_NAME = 'page';

export default function Page(props: any) {
  const content = useQuery([MODEL_NAME, props.pathname], async () => {
    return await builder
      .get(MODEL_NAME, {
        userAttributes: {
          urlPath: props.pathname,
        },
      })
      .promise();
  });
  
  // 其餘組件代碼...
  
  return (
    <div>
      {!content.data && !isPreviewing ? (
        <NotFound></NotFound>
      ) : (
        <Layout>
          <PageHeader heading={content?.data?.data?.title}>
            <BuilderComponent model={MODEL_NAME} content={content?.data} />
          </PageHeader>
        </Layout>
      )}
    </div>
  );
}

Hydrogen 與 Builder.io 的結合提供了 React 驅動的電子商務框架與靈活的前端設計能力。

整合 Shopify 與 Builder.io 的優勢

降低開發依賴度

整合 Builder.io 與 Shopify 後，營銷團隊能夠在無需大量技術支持的情況下自行進行網站更新。這種能力轉移使開發團隊能夠專注於更具戰略性的項目，而非日常內容更新。

「借助 Builder，我們將 20% 的開發預算從內容管理維護轉向了優化轉化率和提高會員忠誠度等戰略性增長計劃。」

無代碼視覺化編輯

Builder.io 的拖放式視覺編輯器使非技術用戶能夠輕鬆創建和編輯頁面，這在電子商務環境中特別有價值，因為產品頁面和促銷活動經常需要更新。

「使用無代碼內容管理系統（CMS）如 Builder.io 可以允許您添加豐富的功能，連接到您的主題但在很大程度上獨立於您的主題代碼運行。」

提升網站性能

Builder.io 專注於優化性能，這對電子商務網站至關重要，因為加載時間直接影響轉化率：

「您可能不知道，您對店面進行的許多更改實際上都帶來了性能成本。無論是您添加的新應用還是為您構建的新功能，每項更改都有可能減慢您的店面速度。諷刺的是，由於性能減慢，可能會降低轉化率，潛在地抵消您最初進行的更新的好處。」

多渠道內容展示

作為無頭 CMS，Builder.io 允許將內容通過 API 顯示在多種設備上，不僅限於桌面或移動設備：

「無頭 CMS 通過 API 使內容可在任何設備上查看的能力，使其成為希望在多種設備上顯示內容的客戶的熱門選擇。我們不僅僅談論桌面或移動設備。無頭 CMS 可以幫助您輕鬆地在展示板、信息亭和其他顯示設備上顯示內容。」

提高內容創建效率

使用 Builder.io，團隊可以更快地創建和發布內容，而無需經歷傳統的開發週期：

「借助 Builder，我們推出了 250 多個新頁面，平均每月吸引約 100 萬訪問者。此外，我們現在可以運行網站實驗，幫助提高首頁轉化率。」

AI 驅動的內容生成

Builder.io 的 AI 功能可以幫助生成內容或整個視覺部分，進一步提高內容創建效率：

「使用 AI 生成內容或整個視覺部分」

「Visual Copilot 使用 AI 幫助開發人員減少 50% 的時間將 Figma 設計轉換為新商務組件或定制頁面的乾淨代碼。」

高級功能支持

對於企業用戶，Builder.io 提供了一系列高級功能：

  1. A/B 測試能力：快速啟動 A/B 測試和個性化體驗，無需經過繁瑣的流程
  2. 本地化支持：大規模提供高度個性化和本地化的體驗
  3. 角色和權限：決定誰可以輸入內容，誰可以使用您批准的設計系統
  4. 環境管理：創建預生產環境以測試更新和功能

結論

將 Shopify 與 Builder.io 整合提供了多方面的優勢，從降低技術依賴到提升網站性能和內容創建效率。隨著電子商務競爭的加劇，這種整合使商家能夠更快速、更靈活地響應市場需求，同時提供更好的用戶體驗。

無論是通過官方插件實現簡單集成，還是使用 API 進行更深度的自定義，Builder.io 都為 Shopify 商店提供了強大的視覺開發和內容管理能力，有助於提升轉化率並釋放開發資源。

What are the main benefits of using Builder.io over Shopify’s native CMS

Builder.io 相較於 Shopify 原生 CMS 的主要優勢

視覺化編輯與減少開發依賴

Builder.io 提供直觀的拖放式視覺編輯器，使非技術人員能夠自行建立和管理網站內容。這是其最顯著的優勢之一，因為它消除了對開發人員的重度依賴。根據用戶反饋，「使用 Builder，我們能夠看到過去只有通過依賴工程團隊才能實現的相同品質結果」。相比之下，Shopify 的原生 CMS 需要開發人員的協助來創建、編輯和刪除自定義模板。

無代碼自由與簡化工作流程

Builder.io 為營銷團隊提供「無代碼無頭 CMS 框架的自由」，使他們能夠以最少的技術支持建立網頁、CMS 頁面、商店頁面和博客頁面。這種簡化的工作流程讓團隊能夠快速迭代內容，無需等待開發資源。正如一位客戶所述：「借助 Builder，我們將 20% 的開發預算從內容管理維護轉向了戰略性增長計劃，如優化轉化率和提高會員忠誠度」。

多渠道內容展示

作為無頭 CMS，Builder.io 的一個主要優勢是能夠通過 API 在多種設備上顯示內容。「無頭 CMS 通過 API 使內容可在任何設備上查看，使其成為希望在多種設備上顯示內容的客戶的熱門選擇」。這不僅限於桌面或移動設備，還包括展示板、信息亭和其他顯示設備，為品牌提供更廣泛的觸達能力。

靈活性與可擴展性

Builder.io 提供了比 Shopify 原生 CMS 更高的靈活性。它與所有 Shopify 主題兼容，並允許開發人員輕鬆決定 CMS 控制的內容以及不同用戶在不同部分可用的選項。此外，Builder.io 的 API 驅動設計使其高度可擴展，開發人員可以通過插件、原生集成和 API 輕鬆擴展系統功能。

高級功能與測試能力

Builder.io 內置了 A/B 測試和個性化功能，而這些在傳統 CMS 中通常是「附加」的而非原生支持。用戶可以「快速啟動 A/B 測試和個性化體驗，無需經過繁瑣的流程」。這使營銷團隊能夠輕鬆優化內容性能，提高轉化率。

AI 驅動功能

Builder.io 的 AI 功能為內容創建帶來了額外的效率。「Visual Copilot 使用 AI 幫助開發人員減少 50% 的時間將 Figma 設計轉換為新商務組件或定制頁面的乾淨代碼」。這種自動化設計到代碼的過程在 Shopify 原生 CMS 中是不可用的。

實時協作與團隊賦能

Builder.io 提供實時協作功能，讓團隊成員能夠同時處理設計，使營銷人員和開發人員能夠在單一平台上協同工作。這促進了跨職能團隊的協作，如用戶所述：「實施 Builder 就像從陰影中走入光明。它給了我們保持領先所需的靈活性和速度，並使我們的團隊能夠專注於他們最擅長的事情 — 創造和創新」。

高性能內容分發

Builder.io 作為高性能內容中心，可以快速輕鬆地將內容傳遞到無限的「頭部」，如社交商務、可穿戴設備、網絡應用、原生應用等。所有內容都從邊緣節點交付，可以在服務器端或靜態渲染，並經過全面優化，確保電子商務網站的卓越性能。

結論

與 Shopify 的原生 CMS 相比，Builder.io 提供了更直觀的用戶體驗、更高的靈活性、減少對開發人員的依賴，以及更強大的功能集。這使得營銷團隊能夠更自主地管理內容，同時釋放開發資源處理更高價值的項目。對於尋求提升其 Shopify 商店體驗的商家，Builder.io 提供了現代化、視覺化的解決方案，以滿足當今競爭激烈的電子商務格局的需求。