Builder.io 與 Shopify 主題整合指南
整合方法概述
Builder.io 為 Shopify 商店提供多種整合選項，讓不同技術背景的用戶都能找到適合的解決方案。從直接嵌入程式碼到使用插件，Builder.io 讓電子商務網站建設變得更加靈活高效。
嵌入式整合方法
最直接的整合方式是將 Builder.io 內容嵌入到 Shopify 主題檔案中。這種方法涉及添加自訂程式碼到 Shopify 模板：
{% comment %}
添加此代碼片段到您的 Shopify 主題以渲染 Builder 區段
{% endcomment %}
<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 主題中。您只需將「YOUR_API_KEY」替換為您實際的 Builder.io 公開 API 密鑰，並設置適當的組件名稱即可。
Shopify 插件設置
Builder.io 提供了官方 Shopify 插件，使整合過程更加簡化：
- 進入 Builder.io 中的「Integrations」頁面
- 點擊 Shopify 插件的「Enable」按鈕
- 完成啟用後，點擊通知中的「Configure」按鈕
- 提供您的「storefront access token」和「store domain」
- 點擊「Connect Your Shopify Custom App」按鈕完成連接
使用這種方法，您需要在 Shopify 中啟用自定義（以前稱為「私有」）應用程序開發功能。設置完成後，您可以將 Shopify 商店作為 Builder.io 的數據源，訪問產品目錄和其他重要電子商務數據。
創建靜態主題
對於希望創建可直接安裝的 Shopify 主題的開發者，Builder.io 提供了從設計到代碼的路徑：
- 使用 Builder.io 視覺編輯器創建和設計頁面或部分
- 導出構建好的 HTML 和 CSS 代碼
- 將導出的代碼轉換為 Shopify 的 Liquid 模板
- 將靜態內容替換為必要的動態 Liquid 標籤
這種方法適合希望創建完全定制的 Shopify 主題而不需要維持 Builder.io 連接的情況。
框架特定整合
對於使用現代框架的商店，Builder.io 提供了特定框架的整合選項：
Next.js 整合
import { BuilderComponent, builder } from '@builder.io/react';
// 初始化 Builder
builder.init('YOUR_API_KEY');
export default function Page() {
// 獲取 Builder 內容
const [content, setContent] = useState(null);
useEffect(() => {
builder.get('page', { url: window.location.pathname })
.promise().then(setContent);
}, []);
return (
<>
<Header /> {/* 保留您自己的頁眉 */}
<BuilderComponent model="page" content={content} />
<Footer /> {/* 保留您自己的頁腳 */}
</>
);
}
Hydrogen 框架整合
Shopify 的 Hydrogen 框架與 Builder.io 配合使用時，可以創建高性能的無頭商務體驗：
const MODEL_NAME = 'page';
export default function Page(props) {
const content = useQuery([MODEL_NAME, props.pathname], async () => {
return await builder
.get(MODEL_NAME, {
userAttributes: {
urlPath: props.pathname,
},
})
.promise();
});
return (
<div>
{!content.data ? (
<NotFound />
) : (
<Layout>
<BuilderComponent model={MODEL_NAME} content={content?.data} />
</Layout>
)}
</div>
);
}
頁面結構與組件整合模式
當整合 Builder.io 與 Shopify 主題時，常見的模式是保留頁眉和頁腳在 Shopify 主題中，而使用 Builder.io 管理頁面中間的內容。這種「三明治」方法讓開發人員能保留對關鍵導航元素的控制，同時允許營銷團隊自主管理頁面內容。
對於特定部分（如產品展示區域或英雄橫幅），可以創建 Builder.io 區段模型，然後通過 Liquid 代碼片段在適當的位置包含這些部分：
{% include 'builder-section.liquid' %}
產品數據整合
為了充分利用 Shopify 產品數據，可以在 Builder.io 中設置動態產品顯示：
- 在 Builder.io 中啟用 Shopify 插件
- 使用插件創建產品卡片、產品畫廊等
- 連接產品 ID、URL 和標題以實現動態顯示
對於 Shopify 應用中的產品頁面，Builder.io 可以自動獲取當前產品的上下文，無需手動設置產品 ID。
代碼提取與性能考量
Builder.io 生成的內容可以導出為乾淨、優化的 Liquid 代碼，確保高性能的網站速度。每個佈局發布時都會自動轉換為優化代碼，支持：
- 本地化翻譯（與 Shopify Markets 功能兼容）
- Metafield 集成
- 實時產品同步
結論
Builder.io 提供多種與 Shopify 主題整合的方法，從簡單的嵌入式代碼到深度框架集成。選擇哪種方法取決於您的技術需求、團隊結構和業務目標。
不論選擇哪種整合方式，Builder.io 都能幫助您創建更具吸引力、更易於管理的 Shopify 商店，讓非技術團隊成員能夠自主更新內容，同時保持網站的高性能和品牌一致性。
隨著 Builder.io 及 Shopify 平台的持續發展，整合選項和功能將繼續擴展，為電子商務網站建設提供更多可能性。