Builder.io 內容轉換為 Shopify Liquid 模板指南
從 Builder.io 到 Shopify 的轉換流程
將 Builder.io 中建立的視覺化內容轉換為 Shopify Liquid 模板是一個強大的方法，可讓您創建可直接安裝的靜態主題，而無需維持與 Builder.io 的持續連接。本指南將引導您完成整個轉換過程，幫助您有效地將設計轉化為功能性 Shopify 主題。
設計與建構階段
首先，您需要在 Builder.io 中設計和構建您的頁面或部分：
- 使用 Builder.io 視覺編輯器創建並設計您的頁面或部分
- 根據您的主題需求自定義內容和樣式
- 預覽並測試您的設計，確保它符合您的要求
在這個階段，您可以充分利用 Builder.io 的拖放功能和視覺編輯器來創建理想的設計，而不必擔心代碼層面的細節。
從 Builder.io 導出代碼
設計完成後，您需要從 Builder.io 導出 HTML 和 CSS 代碼：
- 進入您建構的內容頁面
- 點擊右上角的三點圖標
- 選擇「Export Code」選項
- 複製導出的 HTML 和 CSS 代碼
此步驟將為您提供可以轉換為 Liquid 模板的基礎代碼。
將 HTML 和 CSS 轉換為 Liquid 模板
這是整個過程中最關鍵的步驟。您需要將靜態的 HTML 和 CSS 轉換為動態的 Liquid 模板：
- 創建新的 Liquid 文件，如
sections/custom-section.liquid - 將導出的 HTML 粘貼到文件中
- 將靜態內容替換為動態 Liquid 標籤，使它可以通過 Shopify 管理員進行自定義
例如，將靜態英雄橫幅：
<section class="hero-section">
<h1 class="hero-title">Welcome to Our Store</h1>
<p class="hero-description">The best products available online.</p>
<a href="/collections/all" class="btn btn-primary">Shop Now</a>
</section>
<style>
.hero-section {
background: url('banner.jpg') no-repeat center center;
text-align: center;
padding: 50px;
}
/* 更多 CSS 樣式 */
</style>
轉換為動態 Liquid 模板：
{% if section.settings.background_image %}
<section class="hero-section" style="background: url('{{ section.settings.background_image | img_url: 'master' }}') no-repeat center center;">
{% else %}
<section class="hero-section">
{% endif %}
<h1 class="hero-title">{{ section.settings.title }}</h1>
<p class="hero-description">{{ section.settings.description }}</p>
<a href="{{ section.settings.button_link }}" class="btn btn-primary">{{ section.settings.button_text }}</a>
</section>
<style>
.hero-section {
text-align: center;
padding: 50px;
}
/* 保留其他 CSS 樣式 */
</style>
添加設置模式 (Schema)
為了讓店主能夠自定義 Liquid 模板的內容，您需要添加設置模式：
{% schema %}
{
"name": "Hero Section",
"settings": [
{
"type": "image_picker",
"id": "background_image",
"label": "Background Image"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Welcome to Our Store"
},
{
"type": "textarea",
"id": "description",
"label": "Description",
"default": "The best products available online."
},
{
"type": "url",
"id": "button_link",
"label": "Button Link",
"default": "/collections/all"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Shop Now"
}
],
"presets": [
{
"name": "Hero Section",
"category": "Custom"
}
]
}
{% endschema %}
這個模式定義了可以在 Shopify 主題自定義器中調整的設置。
創建 Shopify 部分並集成到主題
將轉換後的代碼放入 Shopify 主題的部分（sections）目錄中：
- 在您的 Shopify 主題中，進入
sections目錄 - 創建新文件，如
hero-section.liquid - 粘貼完整的轉換代碼（包括 HTML、CSS 和模式）
- 保存文件
然後，您可以在 Shopify 模板中引用此部分：
{% section 'hero-section' %}
或者，將其添加到主題自定義器中使其可選。
處理商店數據和動態內容
如果您需要在轉換的部分中包含 Shopify 商店數據（如產品信息），您可以使用 Liquid 標籤來引用這些信息：
{% if product %}
<h2>{{ product.title }}</h2>
<p>{{ product.price | money }}</p>
<div>{{ product.description }}</div>
{% endif %}
這使您的模板能夠顯示來自 Shopify 的動態數據。
使用自定義 Liquid 代碼
如果您需要更複雜的功能，可以在 Shopify 主題中添加自定義 Liquid 元素：
- 在 Shopify 管理員面板中，轉到「主題」下的「在線商店」部分
- 點擊當前主題旁的「編輯代碼」下拉菜單
- 在 Sections 目錄中添加新部分，命名為 “custom-liquid-section”
- 添加以下代碼：
{{ section.settings.custom_liquid }}
{% schema %}
{
"name": "Custom Liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom Liquid",
"info": "Add app snippets or other liquid code to create advanced customizations."
}
],
"presets": [
{
"name": "Custom Liquid"
}
]
}
{% endschema %}
這將允許您在主題編輯器中添加自定義 Liquid 代碼。
結論
將 Builder.io HTML 和 CSS 轉換為 Shopify Liquid 模板是一個多步驟的過程，但它提供了創建靜態、可自定義主題的強大方法。通過遵循這些步驟，您可以創建專業的 Shopify 主題，讓客戶能夠直接安裝到他們的商店，無需維持與 Builder.io 的連接。
雖然這個過程可能需要一些技術知識，但使用 Builder.io 的視覺編輯器作為起點，可以大大簡化設計過程，使您能夠專注於創建美觀、功能豐富的電子商務體驗。