Section 與 Metafields 進階
這是 Shopify Online Store 2.0 最強大的兩個功能。學會它們，你可以在不碰代碼的情況下，打造高度客製化的商品頁面。
Section（區塊）：讓頁面動起來
Section 是什麼
Section 是可以自由添加、拖曳、刪除的頁面模塊：
商品頁面（OS 2.0）
├── [Section] 商品圖片 + 商品信息（固定）
├── [Section] 特點介紹（你可以添加）
├── [Section] 評價展示（你可以添加）
├── [Section] 使用說明視頻（你可以添加）
├── [Section] FAQ 折疊問答（你可以添加）
└── [Section] 相關商品（你可以添加）
每個 Section 都可以在主題編輯器中拖曳改變順序。
如何添加 Section
路徑： 主題 → 自訂 → 選擇頁面模板 → 添加 Section
- 點擊頁面左側的「+」添加 Section
- 選擇你想添加的 Section 類型
- 配置 Section 的內容（文字、圖片、設置）
- 拖曳調整位置
Metafields（元字段）：存儲額外商品信息
Metafields 解決什麼問題
Shopify 商品默認字段：標題、描述、價格、SKU……
但你的商品可能還需要： - 材質成分 - 護理說明 - 尺碼規格表 - 產地信息 - 搭配建議 - 認證標章
這些「額外信息」就存在 Metafields（元字段）中。
設置 Metafields 的步驟
步驟一：定義 Metafield 結構
路徑： 設置 → 自定義數據 → 商品
- 點擊「添加定義」
- 填入名稱（例如：材質成分）
- 選擇命名空間（例如：
custom）和鍵（例如：material） - 選擇類型（文字、數字、日期、圖片等）
- 保存
常用 Metafield 定義示例：
| 名稱 | 命名空間.鍵 | 類型 |
|---|---|---|
| 材質成分 | custom.material | 多行文本 |
| 護理說明 | custom.care | 多行文本 |
| 製造地 | custom.origin | 單行文本 |
| 尺碼表圖片 | custom.size_guide | 圖片文件 |
| 保固期 | custom.warranty | 單行文本 |
| FAQ | custom.faq | JSON |
步驟二：填入 Metafield 數據
路徑： 商品 → 選擇商品 → 頁面最下方 → Metafields 區塊
定義設置好後，每個商品頁面下方會出現 Metafields 填寫區域，直接填入即可。
步驟三：在主題中顯示 Metafields
方法一：主題編輯器連接（無代碼）
在主題的文字 Section 中，點擊文字字段旁的「連接動態來源」圖標，選擇你的 Metafield。
方法二：Liquid 代碼（需要編輯主題）
{% if product.metafields.custom.material %}
<div class="product-material">
<h3>材質成分</h3>
<p>{{ product.metafields.custom.material.value }}</p>
</div>
{% endif %}
實戰：添加「尺碼表」Metafield
這是最常見的使用場景之一：
設置過程
-
定義 Metafield： - 名稱：尺碼表 - 鍵：
custom.size_chart- 類型：圖片文件 -
填入數據： - 在每個需要尺碼表的商品頁面，上傳尺碼表圖片
-
在主題中顯示： - 在商品頁面添加一個圖片 Section - 點擊「連接動態來源」→ 選擇
custom.size_chart
實戰：添加「FAQ」到商品頁
使用 JSON Metafield 存儲多個問答
Metafield 設置：
- 名稱：FAQ
- 鍵：custom.faq
- 類型：JSON
JSON 格式（在商品 Metafield 中填入）：
[
{
"question": "這款手錶防水嗎？",
"answer": "是的，防水深度 100m，可以游泳佩戴。"
},
{
"question": "電池可以更換嗎？",
"answer": "可以，建議每 2 年更換一次，可到任何鐘錶店處理。"
}
]
在商品頁面 Liquid 中顯示：
{% assign faq = product.metafields.custom.faq.value %}
{% if faq %}
<div class="product-faq">
<h3>常見問題</h3>
{% for item in faq %}
<details>
<summary>{{ item.question }}</summary>
<p>{{ item.answer }}</p>
</details>
{% endfor %}
</div>
{% endif %}
Section Templates（模板）：不同商品用不同佈局
OS 2.0 讓每個商品可以使用不同的頁面模板：
創建商品模板
路徑： 主題 → 自訂 → 商品 → 右上角「創建模板」
例如：
- product.default：一般商品模板
- product.apparel：服裝類商品（帶尺碼表 Section）
- product.digital：數位商品（不顯示配送信息）
- product.preorder：預購商品（顯示預計發貨日期）
指定商品使用哪個模板
路徑： 商品 → 選擇商品 → 右側「主題模板」→ 選擇模板
本章執行清單
- [ ] 識別你的商品需要哪些額外信息（材質、尺寸、說明等）
- [ ] 在設置中建立對應的 Metafield 定義
- [ ] 為主力商品填入 Metafield 數據
- [ ] 在主題編輯器中連接 Metafield 到對應 Section
- [ ] 如果有不同類型的商品，考慮創建多個商品頁面模板
下一節：品牌一致性設計系統——建立讓買家一眼認出的品牌視覺。