Shopify Schema 與 Metafields 差異比較：Theme Editor、商品自訂欄位與 Liquid 實務教學

Shopify Schema 與 Metafields 是 Shopify Theme 開發中最常被混淆的兩個概念。簡單來說，Schema 是用來建立 Theme Editor 裡的版型設定欄位，讓商家可以調整標題、圖片、按鈕、顏色與區塊顯示；Metafields 則是用來替商品、集合、頁面等 Shopify 資料新增自訂欄位，例如材質、尺寸表、保固、影片、規格與補充資訊。兩者不是互相取代，而是分工合作：用 Schema 控制版面，用 Metafields 管理資料。

本文重點

Shopify Schema 是什麼
Shopify Metafields 是什麼
Schema 和 Metafields 最大差異
什麼時候該用 Schema
什麼時候該用 Metafields
Schema 和 Metafields 可以一起使用
最常見錯誤用法
最推薦的 Shopify 商品頁架構

Shopify Theme 開發筆記

完整整理 Shopify Schema 與 Metafields 的本質、用途、資料歸屬、Liquid 寫法、常見錯誤與實務架構。

Shopify Schema 與 Metafields 的差異

一句話先講清楚：
Schema 是「版型後台編輯介面」；Metafields 是「商品、集合、頁面、訂單等資料本身的自訂欄位」。

也可以這樣理解：
Schema 負責讓商家在 Theme Editor 裡可以調整版面。
Metafields 負責讓 Shopify 的資料物件可以存放更多自訂內容。

一、核心差異比較表

比較項目	Shopify Schema	Shopify Metafields
中文理解	版型設定欄位、區塊設定	自訂資料欄位
主要用途	控制版面、區塊、按鈕、圖片、顏色、開關	儲存商品規格、材質、保固、尺寸表、影片、圖片、補充資訊
出現位置	Theme Editor 主題編輯器	Shopify Admin 的商品、集合、頁面、訂單、客戶等資料頁
寫在哪裡	Theme code 裡的 `{% schema %}` 或 `settings_schema.json`	Shopify Admin 後台或 App 建立
資料歸屬	跟「主題／section／block」有關	跟「商品、集合、頁面、訂單、客戶」等資源有關
適合誰改	店主、設計師、行銷人員調整版面	店主、商品管理者、營運人員維護商品資料
Liquid 讀取方式	`section.settings.xxx` 、 `block.settings.xxx` 、 `settings.xxx`	`product.metafields.custom.xxx.value`
是否跟商品綁定	不一定，通常跟版面區塊綁定	是，通常直接綁定商品、集合、頁面等資源
是否適合大量商品不同內容	不適合	非常適合
是否適合控制版面呈現	非常適合	可輔助，但不是主要用途
常見用途	首頁 Banner、標題、按鈕文字、版面開關、區塊圖片	商品成分、尺寸表、保固資訊、技術規格、產品影片、下載檔案

Shopify 官方文件說明，Theme settings 可以透過 JSON 建立，讓商家在 Theme Editor 中調整主題，並且可以放在 theme、section 或 block 層級；section schema 則可建立 section settings 與 block settings，分別透過 section.settings 和 block.settings 取用。而 Metafields 是用來替特定 Shopify 資源增加個別自訂欄位，例如商品、集合等，並可存放規格、尺寸表、下載文件、圖片、零件編號等資料。

二、Schema 是什麼？

Shopify Schema 通常指的是 Shopify Theme 裡面的：

Liquid

{% schema %}
{
  "name": "Custom section",
  "settings": []
}
{% endschema %}

它的主要功能是：

定義這個 section 或 block 在 Shopify Theme Editor 裡會出現哪些可編輯欄位。

例如：

Liquid

<section class="custom-banner">
  <h2>{{ section.settings.heading }}</h2>
  <p>{{ section.settings.description }}</p>
</section>

{% schema %}
{
  "name": "自訂 Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "標題"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "描述文字"
    }
  ]
}
{% endschema %}

這段 Schema 的作用不是「建立商品資料」，而是讓後台主題編輯器出現：

標題輸入框
描述文字輸入框

商家可以在 Theme Editor 裡修改這個區塊的文字。

Schema 比較像什麼？

Schema 比較像是：

網站版面的控制面板。

例如你做一個首頁 Banner section，你可以用 Schema 讓客戶自己改：

這些都很適合用 Schema。

Shopify 的 section schema 可以定義 settings，也可以定義 blocks；blocks 是可新增、移除、重新排序的內容模組。

三、Metafields 是什麼？

Metafields 是 Shopify 的「自訂資料欄位」。

例如商品原本有：

但如果你還想新增：

這些就很適合用 Metafields。

例如：

Liquid

{% if product.metafields.custom.material.value %}
  <p>材質：{{ product.metafields.custom.material.value }}</p>
{% endif %}

或是：

Liquid

{% if product.metafields.custom.warranty.value %}
  <p>保固：{{ product.metafields.custom.warranty.value }}</p>
{% endif %}

Metafields 支援多種資料型別，不同型別會決定欄位中能存放什麼資料，也可以用特定的 metafield filters 輸出。Shopify 也明確說明，Metafields 不能直接在 Liquid 裡建立，只能在 Shopify Admin 或透過 App 建立。

Metafields 比較像什麼？

Metafields 比較像是：

商品、集合、頁面、訂單等資料表裡新增的欄位。

例如你有 100 個商品，每個商品都有不同的材質、保固、尺寸表。

這時候不應該用 Schema，應該用 Metafields。

因為 Schema 是版型設定，不是商品資料庫。

四、最容易搞混的地方

1. Schema 不是資料庫

很多 Shopify 新手會以為：

我在 Schema 裡新增一個欄位，就等於幫商品新增一個欄位。

這是不對的。

Schema 只是讓 Theme Editor 多一個可編輯欄位。

例如：

JSON

{
  "type": "text",
  "id": "product_material",
  "label": "商品材質"
}

這只是在某個 section 裡新增一個「商品材質」輸入框。

它不會變成商品資料的一部分，也不會出現在每個商品後台。

2. Metafields 不是版型控制器

Metafields 可以存資料，但它不是用來控制整個版型結構的主要工具。

例如你想讓客戶在首頁自由新增多張 Banner、調整按鈕、排序區塊，這種應該用 Schema blocks。

但如果你想讓每個商品有不同的「材質、產地、保固、成分」，這種應該用 Metafields。

五、實務案例比較

案例 1：首頁 Banner

需求：

可以上傳 Banner 圖片
可以改標題
可以改按鈕文字
可以改按鈕連結

適合用：

Schema

原因：

這是版面區塊的內容，不是某個商品的固定資料。

範例：

Liquid

<section class="hero-banner">
  {% if section.settings.image %}
    {{ section.settings.image | image_url: width: 1600 | image_tag }}
  {% endif %}

  <h2>{{ section.settings.heading }}</h2>

  {% if section.settings.button_label != blank %}
    <a href="{{ section.settings.button_link }}">
      {{ section.settings.button_label }}
    </a>
  {% endif %}
</section>

{% schema %}
{
  "name": "首頁 Banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Banner 圖片"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "標題"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "按鈕文字"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "按鈕連結"
    }
  ]
}
{% endschema %}

案例 2：商品材質

需求：

每個商品都有不同材質，例如：

A 商品：100% 棉
B 商品：聚酯纖維
C 商品：牛皮
D 商品：不鏽鋼

適合用：

Metafields

原因：

這是每個商品自己的資料，不是版型設定。

範例：

Liquid

{% if product.metafields.custom.material.value %}
  <div class="product-material">
    <strong>材質：</strong>
    {{ product.metafields.custom.material.value }}
  </div>
{% endif %}

案例 3：商品頁新增「商品特色區塊」

需求：

商品頁上有一個區塊，區塊標題可以改，例如：

區塊標題：商品特色
內容來自每個商品自己的 metafield

適合用：

Schema + Metafields 搭配

原因：

區塊標題是版面設定，用 Schema
商品特色內容是商品資料，用 Metafields

範例：

Liquid

<section class="product-feature">
  <h2>{{ section.settings.heading }}</h2>

  {% if product.metafields.custom.feature_content.value %}
    <div class="product-feature__content">
      {{ product.metafields.custom.feature_content.value }}
    </div>
  {% endif %}
</section>

{% schema %}
{
  "name": "商品特色",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "區塊標題",
      "default": "商品特色"
    }
  ]
}
{% endschema %}

這就是 Shopify Theme 開發裡很常見的組合方式。

六、什麼時候用 Schema？

以下情境適合用 Schema：

1. 控制版面顯示

例如：

Liquid

{% if section.settings.show_title %}
  <h2>{{ section.settings.title }}</h2>
{% endif %}

2. 控制區塊內容

例如：

3. 控制 section 或 block 的排列

例如：

新增多個 FAQ block
新增多張輪播圖
新增多個賣點卡片
新增多個 icon block

Liquid

{% for block in section.blocks %}
  <div class="feature-card">
    <h3>{{ block.settings.title }}</h3>
    <p>{{ block.settings.text }}</p>
  </div>
{% endfor %}

七、什麼時候用 Metafields？

以下情境適合用 Metafields：

1. 每個商品都有不同資料

例如：

2. 商品頁需要動態顯示不同內容

例如：

A 商品顯示：

Text

適合乾性肌膚

B 商品顯示：

Text

適合油性肌膚

C 商品顯示：

Text

適合敏感肌膚

這種就應該用 product metafields。

3. 集合頁、品牌頁、文章頁需要補充資料

例如：

Collection metafields：

集合 SEO 介紹
集合 Banner
集合 FAQ
集合底部說明文

Page metafields：

頁面副標題
頁面 Banner
頁面延伸內容

Article metafields：

作者資訊
文章摘要
延伸閱讀
社群分享圖

八、Schema 和 Metafields 可以一起用嗎？

可以，而且非常常見。

Shopify 的 Dynamic sources 就是 Schema 和 Metafields 之間的重要橋樑。Theme setting 可以連接到與目前資源相關的 metafields，例如 product template 裡的 section settings 或 block settings 可以使用商品相關的 metafields。

簡單說：

Schema 負責設計欄位介面，Metafields 負責提供商品資料來源。

例如你在 Schema 裡建立一個 richtext 或 image_picker 設定，店主可以手動填入，也可以透過 Dynamic source 綁定到商品 metafield。

這讓同一個 section 可以在不同商品頁自動顯示不同資料。

九、最實用的判斷方式

你可以用這個問題快速判斷：

問題 1：這個內容是不是每個商品都不一樣？
如果是，用 Metafields 。

例如：每個商品不同尺寸表、每個商品不同影片、每個商品不同成分、每個商品不同注意事項。
問題 2：這個內容是不是控制版面或區塊顯示？
如果是，用 Schema 。

例如：這個 section 標題叫什麼、按鈕要不要顯示、一列顯示幾個商品、圖片在左還是右、背景色是白色還是灰色。
問題 3：這個內容是不是要被商品、集合、頁面重複使用？
如果是，用 Metafields 。
問題 4：這個內容是不是只跟這個版型區塊有關？
如果是，用 Schema 。

十、常見錯誤用法

錯誤 1：用 Schema 存商品規格

不建議：

JSON

{
  "type": "text",
  "id": "product_spec",
  "label": "商品規格"
}

如果商品很多，每個商品規格都不一樣，這樣會很難管理。

正確做法：

用 product metafield，例如：

Liquid

{{ product.metafields.custom.spec.value }}

錯誤 2：用 Metafields 控制首頁 Banner

不建議：

Liquid

{{ shop.metafields.custom.homepage_banner.value }}

除非你有很特殊的資料結構需求，否則首頁 Banner 這類版面內容應該用 Schema section 讓客戶在 Theme Editor 編輯。

錯誤 3：所有內容都塞進商品描述

不建議把所有東西都塞進 product.description ，例如：

尺寸表
材質
保固
商品影片
FAQ
成分
使用方式

這樣後續很難做版面控制、篩選、結構化資料、樣式管理。

比較好的做法是：

商品主描述：放銷售文案
Metafields：放結構化商品資訊
Schema：控制前台版面怎麼顯示

十一、最推薦的實務架構

商品頁開發時，建議這樣分工：

內容類型	建議做法
商品主標題	Shopify product title
商品主文案	Shopify product description
商品材質	Product metafield
商品尺寸表	Product metafield
商品影片	Product metafield
商品保固	Product metafield
商品 FAQ	Product metafield 或 Metaobjects
商品頁區塊標題	Schema
商品頁區塊開關	Schema
商品頁版面順序	Sections / Blocks
首頁 Banner	Schema
首頁圖文區	Schema
品牌故事	Schema 或 Page metafields，看內容是否需要跨頁共用

十二、最簡單的記憶法

可以這樣記：

Schema

給版型用。
控制「這個區塊長什麼樣子、可以怎麼編輯」。

Metafields

給資料用。
控制「這個商品、集合、頁面有哪些額外內容」。

十三、完整結論

Shopify Schema 和 Metafields 不是互相取代的關係，而是分工不同。

Schema 是 Theme 開發裡的版型設定工具 ，主要用來建立 Theme Editor 裡的可編輯欄位，讓商家可以調整 section、block、按鈕、圖片、標題、顏色與版面顯示。

Metafields 是 Shopify 資料模型的擴充工具 ，主要用來替商品、集合、頁面、訂單、客戶等 Shopify 資源增加自訂欄位，讓每個商品或資料物件可以擁有不同的規格、內容、圖片、影片、檔案或補充資訊。

最好的 Shopify Theme 架構通常不是二選一，而是：

用 Schema 控制版面，用 Metafields 管理資料。

這樣網站才會好維護、好擴充，也比較適合未來做 SEO、商品資料結構化、篩選、客製化商品頁與多語系內容管理。

<style>
.il-shopify-schema-guide .il-section > h2:first-child{margin-top:0;}
.il-shopify-schema-guide .il-note{font-weight:500;}
.il-shopify-schema-guide .tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px;padding:0;list-style:none;}
.il-shopify-schema-guide .tag-list li{padding:6px 10px;border-radius:999px;background:var(--il-green-soft);color:var(--il-green-dark);font-size:13px;font-weight:800;}
.il-shopify-schema-guide .decision-list{display:grid;gap:12px;padding-left:22px;}
.il-shopify-schema-guide .decision-list li{padding:12px 14px;border:1px solid var(--il-line);border-radius:14px;background:#fff;}


.il-shopify-schema-guide {
  --il-bg:#f6f6f7;
  --il-surface:#fff;
  --il-soft:#f1f2f3;
  --il-text:#202223;
  --il-muted:#6d7175;
  --il-line:#dfe3e8;
  --il-code-bg:#17191c;
  --il-code-text:#f6f6f7;
  --il-green:#008060;
  --il-green-dark:#005e46;
  --il-green-soft:#e6f4ef;
  --il-shopify-green:#95bf47;
  --il-warning:#b98900;
  --il-danger:#d72c0d;
  color:var(--il-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  line-height:1.78;
}
.il-shopify-schema-guide *{box-sizing:border-box}
.il-shopify-schema-guide .il-hero{
  margin:0 0 28px;
  padding:clamp(28px,5vw,56px);
  border:1px solid var(--il-line);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(250,251,251,.96)),radial-gradient(circle at 88% 14%,rgba(149,191,71,.24),transparent 18rem);
  box-shadow:0 14px 36px rgba(32,34,35,.08);
}
.il-shopify-schema-guide .il-eyebrow{
  display:inline-flex;
  margin-bottom:18px;
  padding:7px 12px;
  border:1px solid rgba(0,128,96,.22);
  border-radius:999px;
  color:var(--il-green-dark);
  background:var(--il-green-soft);
  font-size:13px;
  font-weight:800;
}
.il-shopify-schema-guide h1{
  margin:0 0 16px;
  color:var(--il-text);
  font-size:clamp(36px,6vw,64px);
  line-height:1.05;
  letter-spacing:-.05em;
}
.il-shopify-schema-guide h2{
  margin:0 0 18px;
  color:var(--il-text);
  font-size:clamp(26px,4vw,38px);
  line-height:1.18;
  letter-spacing:-.03em;
}
.il-shopify-schema-guide h3{
  margin:30px 0 12px;
  color:var(--il-text);
  font-size:22px;
  line-height:1.35;
}
.il-shopify-schema-guide p{margin:0 0 14px}
.il-shopify-schema-guide .il-muted{color:var(--il-muted)}
.il-shopify-schema-guide .il-palette{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.il-shopify-schema-guide .il-palette span{width:42px;height:12px;border:1px solid rgba(32,34,35,.12);border-radius:999px}
.il-shopify-schema-guide .il-section{
  margin:28px 0;
  padding:clamp(22px,4vw,34px);
  border:1px solid var(--il-line);
  border-radius:22px;
  background:var(--il-surface);
  box-shadow:0 10px 28px rgba(32,34,35,.05);
}
.il-shopify-schema-guide .il-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.il-shopify-schema-guide .il-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.il-shopify-schema-guide .il-card,.il-shopify-schema-guide .il-type-card{padding:20px;border:1px solid var(--il-line);border-radius:18px;background:#fff}
.il-shopify-schema-guide .il-card strong{display:block;margin-bottom:6px;font-size:16px}
.il-shopify-schema-guide .il-tag{display:inline-flex;margin-bottom:8px;padding:4px 9px;border-radius:999px;color:var(--il-green-dark);background:var(--il-green-soft);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;font-weight:800}
.il-shopify-schema-guide .il-note{margin:18px 0;padding:16px 18px;border-left:4px solid var(--il-green);border-radius:14px;background:var(--il-green-soft);color:var(--il-text)}
.il-shopify-schema-guide .il-table-wrap{width:100%;margin:16px 0 24px;overflow-x:auto;border:1px solid var(--il-line);border-radius:16px;background:#fff}
.il-shopify-schema-guide table{width:100%;min-width:720px;border-collapse:collapse}
.il-shopify-schema-guide th,.il-shopify-schema-guide td{padding:14px 16px;border-bottom:1px solid var(--il-line);text-align:left;vertical-align:top}
.il-shopify-schema-guide th{background:#f6f6f7;color:#42474c;font-size:13px;letter-spacing:.02em}
.il-shopify-schema-guide td{font-size:14px}
.il-shopify-schema-guide tr:last-child td{border-bottom:0}
.il-shopify-schema-guide code{padding:2px 6px;border-radius:7px;color:var(--il-green-dark);background:var(--il-green-soft);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.92em}
.il-shopify-schema-guide .il-code-card{margin:16px 0 24px;overflow:hidden;border-radius:18px;background:var(--il-code-bg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.il-shopify-schema-guide .il-code-title{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.1);color:#c9cccf;font-size:12px;font-weight:700}
.il-shopify-schema-guide pre{margin:0;padding:18px;overflow-x:auto;color:var(--il-code-text);background:var(--il-code-bg);font-size:13px;line-height:1.65;tab-size:2}
.il-shopify-schema-guide pre code{display:block;padding:0;border-radius:0;color:inherit;background:transparent;font-size:inherit}
.il-shopify-schema-guide details{margin:12px 0;border:1px solid var(--il-line);border-radius:16px;background:#fff;overflow:hidden}
.il-shopify-schema-guide summary{cursor:pointer;padding:16px 18px;font-weight:800}
.il-shopify-schema-guide .il-details-body{padding:0 18px 18px;color:var(--il-muted)}
.il-shopify-schema-guide .il-footer{margin-top:28px;padding:24px;border:1px solid var(--il-line);border-radius:20px;color:var(--il-muted);background:#fff;text-align:center}

.il-shopify-schema-guide .il-code-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.il-shopify-schema-guide .il-copy-button{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:6px 10px;
  color:#202223;
  background:#95bf47;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.il-shopify-schema-guide .il-copy-button:hover{
  background:#b7db67;
}

.il-shopify-schema-guide .il-copy-button:focus{
  outline:3px solid #ffe500;
  outline-offset:2px;
}

.il-shopify-schema-guide .il-copy-button.is-copied{
  color:#ffffff;
  background:#008060;
}

.il-shopify-schema-guide .il-code-card pre,
.il-shopify-schema-guide .il-code-card code{
  user-select:text;
}

.il-shopify-schema-guide .il-code-card pre::selection,
.il-shopify-schema-guide .il-code-card code::selection,
.il-shopify-schema-guide .il-code-card pre *::selection,
.il-shopify-schema-guide .il-code-card code *::selection{
  color:#000000;
  background:#ffe500;
  text-shadow:none;
}

.il-shopify-schema-guide .il-code-card pre::-moz-selection,
.il-shopify-schema-guide .il-code-card code::-moz-selection,
.il-shopify-schema-guide .il-code-card pre *::-moz-selection,
.il-shopify-schema-guide .il-code-card code *::-moz-selection{
  color:#000000;
  background:#ffe500;
  text-shadow:none;
}








/* IL TOC CSS START */
.il-shopify-schema-guide h2[id],
.il-shopify-schema-guide h3[id]{
  scroll-margin-top:96px;
}

.il-shopify-schema-guide .il-toc{
  margin:0 0 28px;
  padding:clamp(22px,4vw,34px);
  border:1px solid var(--il-line);
  border-radius:22px;
  background:linear-gradient(135deg,#ffffff,#fafbfb);
  box-shadow:0 10px 28px rgba(32,34,35,.05);
}

.il-shopify-schema-guide .il-toc-header{
  margin-bottom:18px;
}

.il-shopify-schema-guide .il-toc-kicker{
  display:inline-flex;
  margin-bottom:8px;
  padding:5px 10px;
  border-radius:999px;
  color:var(--il-green-dark);
  background:var(--il-green-soft);
  font-size:12px;
  font-weight:800;
}

.il-shopify-schema-guide .il-toc h2{
  margin:0;
  font-size:clamp(24px,3vw,34px);
}

.il-shopify-schema-guide .il-toc p{
  margin:8px 0 0;
  color:var(--il-muted);
}

.il-shopify-schema-guide .il-toc-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.il-shopify-schema-guide .il-toc-list > li{
  margin:0;
  padding:16px 18px;
  border:1px solid var(--il-line);
  border-radius:16px;
  background:#ffffff;
}

.il-shopify-schema-guide .il-toc-list a{
  color:var(--il-text);
  text-decoration:none;
}

.il-shopify-schema-guide .il-toc-main-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}

.il-shopify-schema-guide .il-toc-main-link::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--il-green);
  box-shadow:0 0 0 4px var(--il-green-soft);
  flex:0 0 auto;
}

.il-shopify-schema-guide .il-toc-list a:hover{
  color:var(--il-green-dark);
  text-decoration:underline;
  text-underline-offset:4px;
}

.il-shopify-schema-guide .il-toc-desc{
  margin:8px 0 0;
  color:var(--il-muted);
  font-size:14px;
}

.il-shopify-schema-guide .il-toc-sublist{
  margin:10px 0 0;
  padding:0 0 0 22px;
  color:var(--il-muted);
}

.il-shopify-schema-guide .il-toc-sublist li{
  margin:5px 0;
}

.il-shopify-schema-guide .il-toc-sublist a{
  color:var(--il-muted);
  font-size:14px;
  font-weight:700;
}
/* IL TOC CSS END */


/* IL MOBILE CODE FIX START */
.il-shopify-schema-guide .il-grid,
.il-shopify-schema-guide .il-type-grid,
.il-shopify-schema-guide .il-card,
.il-shopify-schema-guide .il-type-card,
.il-shopify-schema-guide .il-code-card,
.il-shopify-schema-guide .il-code-card pre,
.il-shopify-schema-guide .il-code-card code{
  min-width:0;
  max-width:100%;
}

.il-shopify-schema-guide .il-type-card{
  overflow:hidden;
}

.il-shopify-schema-guide .il-type-card .il-code-card{
  width:100%;
}

.il-shopify-schema-guide .il-type-card .il-code-title{
  flex-wrap:wrap;
  align-items:flex-start;
}

.il-shopify-schema-guide .il-type-card pre{
  white-space:pre-wrap;
  overflow-x:auto;
  word-break:normal;
  overflow-wrap:anywhere;
}

.il-shopify-schema-guide .il-type-card pre code{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:normal;
}

.il-shopify-schema-guide .il-type-card .il-copy-button{
  margin-left:auto;
}

@media(max-width:640px){
  .il-shopify-schema-guide .il-type-card{
    padding:16px;
  }

  .il-shopify-schema-guide .il-type-card .il-code-card{
    border-radius:14px;
  }

  .il-shopify-schema-guide .il-type-card .il-code-title{
    padding:9px 10px;
    font-size:11px;
  }

  .il-shopify-schema-guide .il-type-card pre{
    padding:14px;
    font-size:12px;
    line-height:1.58;
  }

  .il-shopify-schema-guide .il-type-card .il-copy-button{
    padding:6px 9px;
    font-size:11px;
  }
}

@media(max-width:420px){
  .il-shopify-schema-guide .il-type-card{
    padding:14px;
  }

  .il-shopify-schema-guide .il-type-card pre{
    padding:12px;
    font-size:11.5px;
  }
}
/* IL MOBILE CODE FIX END */

@media(max-width:900px){
  .il-shopify-schema-guide .il-grid,.il-shopify-schema-guide .il-type-grid{grid-template-columns:1fr}
  .il-shopify-schema-guide table{min-width:640px}
}
@media(max-width:560px){
  .il-shopify-schema-guide .il-hero,.il-shopify-schema-guide .il-section{border-radius:18px}
  .il-shopify-schema-guide h1{font-size:38px}
}
</style>



<article class="il-shopify-schema-guide">
 <header class="il-hero">
  <span class="il-eyebrow">
   Shopify Theme 開發筆記
  </span>

  <p class="il-muted">
   完整整理 Shopify Schema 與 Metafields 的本質、用途、資料歸屬、Liquid 寫法、常見錯誤與實務架構。
  </p>
  <div aria-label="Shopify Dev inspired color palette" class="il-palette">
   <span style="background:#202223">
   </span>
   <span style="background:#6d7175">
   </span>
   <span style="background:#f6f6f7">
   </span>
   <span style="background:#008060">
   </span>
   <span style="background:#95bf47">
   </span>
  </div>
 </header>
 <nav aria-label="文章大綱" class="il-toc">
  <div class="il-toc-header">
   <span class="il-toc-kicker">
    Article Outline
   </span>
   <h2>
    文章大綱
   </h2>
   <p>
    點擊下方標題可直接跳到相對應內容。大綱採單欄由上到下排序，方便在 WordPress 長文中快速瀏覽。
   </p>
  </div>
  <ul class="il-toc-list">
   <li>
    <a class="il-toc-main-link" href="#summary">
     核心差異
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#comparison">
     一、核心差異比較表
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#schema">
     二、Schema 是什麼？
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#metafields">
     三、Metafields 是什麼？
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#confusion">
     四、最容易搞混的地方
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#cases">
     五、實務案例比較
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#use-schema">
     六、什麼時候用 Schema？
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#use-metafields">
     七、什麼時候用 Metafields？
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#together">
     八、可以一起用嗎？
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#decision">
     九、最實用的判斷方式
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#mistakes">
     十、常見錯誤用法
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#architecture">
     十一、最推薦的實務架構
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#memory">
     十二、最簡單的記憶法
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#conclusion">
     十三、完整結論
    </a>
   </li>
   <li>
    <a class="il-toc-main-link" href="#sources">
     參考來源
    </a>
   </li>
  </ul>
 </nav>
 <section class="il-section" id="summary">
  <h2>
   Shopify Schema 與 Metafields 的差異
  </h2>
  <div class="il-note">
   <p>
    <strong>一句話先講清楚：</strong>
    <br/>
    Schema 是「版型後台編輯介面」；Metafields 是「商品、集合、頁面、訂單等資料本身的自訂欄位」。
   </p>
   <p>
    <strong>也可以這樣理解：</strong>
    <br/>
    Schema 負責讓商家在 Theme Editor 裡可以調整版面。
    <br/>
    Metafields 負責讓 Shopify 的資料物件可以存放更多自訂內容。
   </p>
  </div>
 </section>
 <section class="il-section" id="comparison">
  <h2>
   一、核心差異比較表
  </h2>
  <div class="il-table-wrap">
   <table>
    <thead>
     <tr>
      <th>
       比較項目
      </th>
      <th>
       Shopify Schema
      </th>
      <th>
       Shopify Metafields
      </th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>
       中文理解
      </td>
      <td>
       版型設定欄位、區塊設定
      </td>
      <td>
       自訂資料欄位
      </td>
     </tr>
     <tr>
      <td>
       主要用途
      </td>
      <td>
       控制版面、區塊、按鈕、圖片、顏色、開關
      </td>
      <td>
       儲存商品規格、材質、保固、尺寸表、影片、圖片、補充資訊
      </td>
     </tr>
     <tr>
      <td>
       出現位置
      </td>
      <td>
       Theme Editor 主題編輯器
      </td>
      <td>
       Shopify Admin 的商品、集合、頁面、訂單、客戶等資料頁
      </td>
     </tr>
     <tr>
      <td>
       寫在哪裡
      </td>
      <td>
       Theme code 裡的
       <code>
        {% schema %}
       </code>
       或
       <code>
        settings_schema.json
       </code>
      </td>
      <td>
       Shopify Admin 後台或 App 建立
      </td>
     </tr>
     <tr>
      <td>
       資料歸屬
      </td>
      <td>
       跟「主題／section／block」有關
      </td>
      <td>
       跟「商品、集合、頁面、訂單、客戶」等資源有關
      </td>
     </tr>
     <tr>
      <td>
       適合誰改
      </td>
      <td>
       店主、設計師、行銷人員調整版面
      </td>
      <td>
       店主、商品管理者、營運人員維護商品資料
      </td>
     </tr>
     <tr>
      <td>
       Liquid 讀取方式
      </td>
      <td>
       <code>
        section.settings.xxx
       </code>
       、
       <code>
        block.settings.xxx
       </code>
       、
       <code>
        settings.xxx
       </code>
      </td>
      <td>
       <code>
        product.metafields.custom.xxx.value
       </code>
      </td>
     </tr>
     <tr>
      <td>
       是否跟商品綁定
      </td>
      <td>
       不一定，通常跟版面區塊綁定
      </td>
      <td>
       是，通常直接綁定商品、集合、頁面等資源
      </td>
     </tr>
     <tr>
      <td>
       是否適合大量商品不同內容
      </td>
      <td>
       不適合
      </td>
      <td>
       非常適合
      </td>
     </tr>
     <tr>
      <td>
       是否適合控制版面呈現
      </td>
      <td>
       非常適合
      </td>
      <td>
       可輔助，但不是主要用途
      </td>
     </tr>
     <tr>
      <td>
       常見用途
      </td>
      <td>
       首頁 Banner、標題、按鈕文字、版面開關、區塊圖片
      </td>
      <td>
       商品成分、尺寸表、保固資訊、技術規格、產品影片、下載檔案
      </td>
     </tr>
    </tbody>
   </table>
  </div>
  <p>
   Shopify 官方文件說明，Theme settings 可以透過 JSON 建立，讓商家在 Theme Editor 中調整主題，並且可以放在 theme、section 或 block 層級；section schema 則可建立 section settings 與 block settings，分別透過
   <code>
    section.settings
   </code>
   和
   <code>
    block.settings
   </code>
   取用。而 Metafields 是用來替特定 Shopify 資源增加個別自訂欄位，例如商品、集合等，並可存放規格、尺寸表、下載文件、圖片、零件編號等資料。
  </p>
 </section>
 <section class="il-section" id="schema">
  <h2>
   二、Schema 是什麼？
  </h2>
  <p>
   Shopify Schema 通常指的是 Shopify Theme 裡面的：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Liquid
   </div>
   <pre><code>{% schema %}
{
  "name": "Custom section",
  "settings": []
}
{% endschema %}</code></pre>
  </div>
  <p>
   它的主要功能是：
  </p>
  <div class="il-note">
   定義這個 section 或 block 在 Shopify Theme Editor 裡會出現哪些可編輯欄位。
  </div>
  <p>
   例如：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Liquid
   </div>
   <pre><code>&lt;section class="custom-banner"&gt;
  &lt;h2&gt;{{ section.settings.heading }}&lt;/h2&gt;
  &lt;p&gt;{{ section.settings.description }}&lt;/p&gt;
&lt;/section&gt;

{% schema %}
{
  "name": "自訂 Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "標題"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "描述文字"
    }
  ]
}
{% endschema %}</code></pre>
  </div>
  <p>
   這段 Schema 的作用不是「建立商品資料」，而是讓後台主題編輯器出現：
  </p>
  <ul>
   <li>
    標題輸入框
   </li>
   <li>
    描述文字輸入框
   </li>
  </ul>
  <p>
   商家可以在 Theme Editor 裡修改這個區塊的文字。
  </p>
  <h3>
   Schema 比較像什麼？
  </h3>
  <p>
   Schema 比較像是：
  </p>
  <div class="il-note">
   網站版面的控制面板。
  </div>
  <p>
   例如你做一個首頁 Banner section，你可以用 Schema 讓客戶自己改：
  </p>
  <ul class="tag-list">
   <li>
    Banner 圖片
   </li>
   <li>
    主標題
   </li>
   <li>
    副標題
   </li>
   <li>
    按鈕文字
   </li>
   <li>
    按鈕連結
   </li>
   <li>
    是否顯示按鈕
   </li>
   <li>
    桌機版高度
   </li>
   <li>
    手機版高度
   </li>
   <li>
    背景顏色
   </li>
   <li>
    文字對齊方式
   </li>
  </ul>
  <p>
   這些都很適合用 Schema。
  </p>
  <p>
   Shopify 的 section schema 可以定義 settings，也可以定義 blocks；blocks 是可新增、移除、重新排序的內容模組。
  </p>
 </section>
 <section class="il-section" id="metafields">
  <h2>
   三、Metafields 是什麼？
  </h2>
  <p>
   Metafields 是 Shopify 的「自訂資料欄位」。
  </p>
  <p>
   例如商品原本有：
  </p>
  <ul class="tag-list">
   <li>
    商品名稱
   </li>
   <li>
    商品描述
   </li>
   <li>
    商品圖片
   </li>
   <li>
    價格
   </li>
   <li>
    庫存
   </li>
   <li>
    Vendor
   </li>
   <li>
    Product type
   </li>
   <li>
    Tags
   </li>
  </ul>
  <p>
   但如果你還想新增：
  </p>
  <ul class="tag-list">
   <li>
    商品材質
   </li>
   <li>
    商品產地
   </li>
   <li>
    保固期限
   </li>
   <li>
    使用方式
   </li>
   <li>
    尺寸表
   </li>
   <li>
    商品影片
   </li>
   <li>
    成分表
   </li>
   <li>
    注意事項
   </li>
   <li>
    適用年齡
   </li>
   <li>
    技術規格
   </li>
   <li>
    下載說明書 PDF
   </li>
  </ul>
  <p>
   這些就很適合用 Metafields。
  </p>
  <p>
   例如：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Liquid
   </div>
   <pre><code>{% if product.metafields.custom.material.value %}
  &lt;p&gt;材質：{{ product.metafields.custom.material.value }}&lt;/p&gt;
{% endif %}</code></pre>
  </div>
  <p>
   或是：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Liquid
   </div>
   <pre><code>{% if product.metafields.custom.warranty.value %}
  &lt;p&gt;保固：{{ product.metafields.custom.warranty.value }}&lt;/p&gt;
{% endif %}</code></pre>
  </div>
  <p>
   Metafields 支援多種資料型別，不同型別會決定欄位中能存放什麼資料，也可以用特定的 metafield filters 輸出。Shopify 也明確說明，Metafields 不能直接在 Liquid 裡建立，只能在 Shopify Admin 或透過 App 建立。
  </p>
  <h3>
   Metafields 比較像什麼？
  </h3>
  <p>
   Metafields 比較像是：
  </p>
  <div class="il-note">
   商品、集合、頁面、訂單等資料表裡新增的欄位。
  </div>
  <p>
   例如你有 100 個商品，每個商品都有不同的材質、保固、尺寸表。
  </p>
  <p>
   這時候不應該用 Schema，應該用 Metafields。
  </p>
  <p>
   因為 Schema 是版型設定，不是商品資料庫。
  </p>
 </section>
 <section class="il-section" id="confusion">
  <h2>
   四、最容易搞混的地方
  </h2>
  <h3>
   1. Schema 不是資料庫
  </h3>
  <p>
   很多 Shopify 新手會以為：
  </p>
  <div class="il-note">
   我在 Schema 裡新增一個欄位，就等於幫商品新增一個欄位。
  </div>
  <p>
   這是不對的。
  </p>
  <p>
   Schema 只是讓 Theme Editor 多一個可編輯欄位。
  </p>
  <p>
   例如：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    JSON
   </div>
   <pre><code>{
  "type": "text",
  "id": "product_material",
  "label": "商品材質"
}</code></pre>
  </div>
  <p>
   這只是在某個 section 裡新增一個「商品材質」輸入框。
  </p>
  <p>
   它不會變成商品資料的一部分，也不會出現在每個商品後台。
  </p>
  <h3>
   2. Metafields 不是版型控制器
  </h3>
  <p>
   Metafields 可以存資料，但它不是用來控制整個版型結構的主要工具。
  </p>
  <p>
   例如你想讓客戶在首頁自由新增多張 Banner、調整按鈕、排序區塊，這種應該用 Schema blocks。
  </p>
  <p>
   但如果你想讓每個商品有不同的「材質、產地、保固、成分」，這種應該用 Metafields。
  </p>
 </section>
 <section class="il-section" id="cases">
  <h2>
   五、實務案例比較
  </h2>
  <h3>
   案例 1：首頁 Banner
  </h3>
  <p>
   需求：
  </p>
  <ul>
   <li>
    可以上傳 Banner 圖片
   </li>
   <li>
    可以改標題
   </li>
   <li>
    可以改按鈕文字
   </li>
   <li>
    可以改按鈕連結
   </li>
  </ul>
  <p>
   適合用：
  </p>
  <div class="il-note">
   Schema
  </div>
  <p>
   原因：
  </p>
  <p>
   這是版面區塊的內容，不是某個商品的固定資料。
  </p>
  <p>
   範例：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Liquid
   </div>
   <pre><code>&lt;section class="hero-banner"&gt;
  {% if section.settings.image %}
    {{ section.settings.image | image_url: width: 1600 | image_tag }}
  {% endif %}

  &lt;h2&gt;{{ section.settings.heading }}&lt;/h2&gt;

  {% if section.settings.button_label != blank %}
    &lt;a href="{{ section.settings.button_link }}"&gt;
      {{ section.settings.button_label }}
    &lt;/a&gt;
  {% endif %}
&lt;/section&gt;

{% schema %}
{
  "name": "首頁 Banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Banner 圖片"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "標題"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "按鈕文字"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "按鈕連結"
    }
  ]
}
{% endschema %}</code></pre>
  </div>
  <h3>
   案例 2：商品材質
  </h3>
  <p>
   需求：
  </p>
  <p>
   每個商品都有不同材質，例如：
  </p>
  <ul>
   <li>
    A 商品：100% 棉
   </li>
   <li>
    B 商品：聚酯纖維
   </li>
   <li>
    C 商品：牛皮
   </li>
   <li>
    D 商品：不鏽鋼
   </li>
  </ul>
  <p>
   適合用：
  </p>
  <div class="il-note">
   Metafields
  </div>
  <p>
   原因：
  </p>
  <p>
   這是每個商品自己的資料，不是版型設定。
  </p>
  <p>
   範例：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Liquid
   </div>
   <pre><code>{% if product.metafields.custom.material.value %}
  &lt;div class="product-material"&gt;
    &lt;strong&gt;材質：&lt;/strong&gt;
    {{ product.metafields.custom.material.value }}
  &lt;/div&gt;
{% endif %}</code></pre>
  </div>
  <h3>
   案例 3：商品頁新增「商品特色區塊」
  </h3>
  <p>
   需求：
  </p>
  <p>
   商品頁上有一個區塊，區塊標題可以改，例如：
  </p>
  <ul>
   <li>
    區塊標題：商品特色
   </li>
   <li>
    內容來自每個商品自己的 metafield
   </li>
  </ul>
  <p>
   適合用：
  </p>
  <div class="il-note">
   Schema + Metafields 搭配
  </div>
  <p>
   原因：
  </p>
  <ul>
   <li>
    區塊標題是版面設定，用 Schema
   </li>
   <li>
    商品特色內容是商品資料，用 Metafields
   </li>
  </ul>
  <p>
   範例：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Liquid
   </div>
   <pre><code>&lt;section class="product-feature"&gt;
  &lt;h2&gt;{{ section.settings.heading }}&lt;/h2&gt;

  {% if product.metafields.custom.feature_content.value %}
    &lt;div class="product-feature__content"&gt;
      {{ product.metafields.custom.feature_content.value }}
    &lt;/div&gt;
  {% endif %}
&lt;/section&gt;

{% schema %}
{
  "name": "商品特色",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "區塊標題",
      "default": "商品特色"
    }
  ]
}
{% endschema %}</code></pre>
  </div>
  <p>
   這就是 Shopify Theme 開發裡很常見的組合方式。
  </p>
 </section>
 <section class="il-section" id="use-schema">
  <h2>
   六、什麼時候用 Schema？
  </h2>
  <p>
   以下情境適合用 Schema：
  </p>
  <h3>
   1. 控制版面顯示
  </h3>
  <p>
   例如：
  </p>
  <ul class="tag-list">
   <li>
    是否顯示標題
   </li>
   <li>
    是否顯示按鈕
   </li>
   <li>
    是否顯示圖片
   </li>
   <li>
    是否顯示價格
   </li>
   <li>
    是否啟用輪播
   </li>
   <li>
    是否啟用滿版寬度
   </li>
  </ul>
  <div class="il-code-card">
   <div class="il-code-title">
    Liquid
   </div>
   <pre><code>{% if section.settings.show_title %}
  &lt;h2&gt;{{ section.settings.title }}&lt;/h2&gt;
{% endif %}</code></pre>
  </div>
  <h3>
   2. 控制區塊內容
  </h3>
  <p>
   例如：
  </p>
  <ul class="tag-list">
   <li>
    首頁 Banner
   </li>
   <li>
    圖文區塊
   </li>
   <li>
    品牌故事區塊
   </li>
   <li>
    FAQ 區塊
   </li>
   <li>
    Logo list
   </li>
   <li>
    Featured collection
   </li>
   <li>
    Image with text
   </li>
  </ul>
  <h3>
   3. 控制 section 或 block 的排列
  </h3>
  <p>
   例如：
  </p>
  <ul>
   <li>
    新增多個 FAQ block
   </li>
   <li>
    新增多張輪播圖
   </li>
   <li>
    新增多個賣點卡片
   </li>
   <li>
    新增多個 icon block
   </li>
  </ul>
  <div class="il-code-card">
   <div class="il-code-title">
    Liquid
   </div>
   <pre><code>{% for block in section.blocks %}
  &lt;div class="feature-card"&gt;
    &lt;h3&gt;{{ block.settings.title }}&lt;/h3&gt;
    &lt;p&gt;{{ block.settings.text }}&lt;/p&gt;
  &lt;/div&gt;
{% endfor %}</code></pre>
  </div>
 </section>
 <section class="il-section" id="use-metafields">
  <h2>
   七、什麼時候用 Metafields？
  </h2>
  <p>
   以下情境適合用 Metafields：
  </p>
  <h3>
   1. 每個商品都有不同資料
  </h3>
  <p>
   例如：
  </p>
  <ul class="tag-list">
   <li>
    商品材質
   </li>
   <li>
    商品尺寸
   </li>
   <li>
    商品產地
   </li>
   <li>
    商品重量
   </li>
   <li>
    商品規格
   </li>
   <li>
    商品成分
   </li>
   <li>
    商品影片
   </li>
   <li>
    商品保固
   </li>
   <li>
    商品說明書
   </li>
  </ul>
  <h3>
   2. 商品頁需要動態顯示不同內容
  </h3>
  <p>
   例如：
  </p>
  <p>
   A 商品顯示：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Text
   </div>
   <pre><code>適合乾性肌膚</code></pre>
  </div>
  <p>
   B 商品顯示：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Text
   </div>
   <pre><code>適合油性肌膚</code></pre>
  </div>
  <p>
   C 商品顯示：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Text
   </div>
   <pre><code>適合敏感肌膚</code></pre>
  </div>
  <p>
   這種就應該用 product metafields。
  </p>
  <h3>
   3. 集合頁、品牌頁、文章頁需要補充資料
  </h3>
  <p>
   例如：
  </p>
  <h4>
   Collection metafields：
  </h4>
  <ul>
   <li>
    集合 SEO 介紹
   </li>
   <li>
    集合 Banner
   </li>
   <li>
    集合 FAQ
   </li>
   <li>
    集合底部說明文
   </li>
  </ul>
  <h4>
   Page metafields：
  </h4>
  <ul>
   <li>
    頁面副標題
   </li>
   <li>
    頁面 Banner
   </li>
   <li>
    頁面延伸內容
   </li>
  </ul>
  <h4>
   Article metafields：
  </h4>
  <ul>
   <li>
    作者資訊
   </li>
   <li>
    文章摘要
   </li>
   <li>
    延伸閱讀
   </li>
   <li>
    社群分享圖
   </li>
  </ul>
 </section>
 <section class="il-section" id="together">
  <h2>
   八、Schema 和 Metafields 可以一起用嗎？
  </h2>
  <p>
   可以，而且非常常見。
  </p>
  <p>
   Shopify 的 Dynamic sources 就是 Schema 和 Metafields 之間的重要橋樑。Theme setting 可以連接到與目前資源相關的 metafields，例如 product template 裡的 section settings 或 block settings 可以使用商品相關的 metafields。
  </p>
  <p>
   簡單說：
  </p>
  <div class="il-note">
   Schema 負責設計欄位介面，Metafields 負責提供商品資料來源。
  </div>
  <p>
   例如你在 Schema 裡建立一個
   <code>
    richtext
   </code>
   或
   <code>
    image_picker
   </code>
   設定，店主可以手動填入，也可以透過 Dynamic source 綁定到商品 metafield。
  </p>
  <p>
   這讓同一個 section 可以在不同商品頁自動顯示不同資料。
  </p>
 </section>
 <section class="il-section" id="decision">
  <h2>
   九、最實用的判斷方式
  </h2>
  <p>
   你可以用這個問題快速判斷：
  </p>
  <ol class="decision-list">
   <li>
    <strong>
     問題 1：這個內容是不是每個商品都不一樣？
    </strong>
    <br/>
    如果是，用
    <strong>
     Metafields
    </strong>
    。
    <br/>
    <br/>
    例如：每個商品不同尺寸表、每個商品不同影片、每個商品不同成分、每個商品不同注意事項。
   </li>
   <li>
    <strong>
     問題 2：這個內容是不是控制版面或區塊顯示？
    </strong>
    <br/>
    如果是，用
    <strong>
     Schema
    </strong>
    。
    <br/>
    <br/>
    例如：這個 section 標題叫什麼、按鈕要不要顯示、一列顯示幾個商品、圖片在左還是右、背景色是白色還是灰色。
   </li>
   <li>
    <strong>
     問題 3：這個內容是不是要被商品、集合、頁面重複使用？
    </strong>
    <br/>
    如果是，用
    <strong>
     Metafields
    </strong>
    。
   </li>
   <li>
    <strong>
     問題 4：這個內容是不是只跟這個版型區塊有關？
    </strong>
    <br/>
    如果是，用
    <strong>
     Schema
    </strong>
    。
   </li>
  </ol>
 </section>
 <section class="il-section" id="mistakes">
  <h2>
   十、常見錯誤用法
  </h2>
  <h3>
   錯誤 1：用 Schema 存商品規格
  </h3>
  <p>
   不建議：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    JSON
   </div>
   <pre><code>{
  "type": "text",
  "id": "product_spec",
  "label": "商品規格"
}</code></pre>
  </div>
  <p>
   如果商品很多，每個商品規格都不一樣，這樣會很難管理。
  </p>
  <p>
   正確做法：
  </p>
  <p>
   用 product metafield，例如：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Liquid
   </div>
   <pre><code>{{ product.metafields.custom.spec.value }}</code></pre>
  </div>
  <h3>
   錯誤 2：用 Metafields 控制首頁 Banner
  </h3>
  <p>
   不建議：
  </p>
  <div class="il-code-card">
   <div class="il-code-title">
    Liquid
   </div>
   <pre><code>{{ shop.metafields.custom.homepage_banner.value }}</code></pre>
  </div>
  <p>
   除非你有很特殊的資料結構需求，否則首頁 Banner 這類版面內容應該用 Schema section 讓客戶在 Theme Editor 編輯。
  </p>
  <h3>
   錯誤 3：所有內容都塞進商品描述
  </h3>
  <p>
   不建議把所有東西都塞進
   <code>
    product.description
   </code>
   ，例如：
  </p>
  <ul>
   <li>
    尺寸表
   </li>
   <li>
    材質
   </li>
   <li>
    保固
   </li>
   <li>
    商品影片
   </li>
   <li>
    FAQ
   </li>
   <li>
    成分
   </li>
   <li>
    使用方式
   </li>
  </ul>
  <p>
   這樣後續很難做版面控制、篩選、結構化資料、樣式管理。
  </p>
  <p>
   比較好的做法是：
  </p>
  <ul>
   <li>
    商品主描述：放銷售文案
   </li>
   <li>
    Metafields：放結構化商品資訊
   </li>
   <li>
    Schema：控制前台版面怎麼顯示
   </li>
  </ul>
 </section>
 <section class="il-section" id="architecture">
  <h2>
   十一、最推薦的實務架構
  </h2>
  <p>
   商品頁開發時，建議這樣分工：
  </p>
  <div class="il-table-wrap">
   <table>
    <thead>
     <tr>
      <th>
       內容類型
      </th>
      <th>
       建議做法
      </th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>
       商品主標題
      </td>
      <td>
       Shopify product title
      </td>
     </tr>
     <tr>
      <td>
       商品主文案
      </td>
      <td>
       Shopify product description
      </td>
     </tr>
     <tr>
      <td>
       商品材質
      </td>
      <td>
       Product metafield
      </td>
     </tr>
     <tr>
      <td>
       商品尺寸表
      </td>
      <td>
       Product metafield
      </td>
     </tr>
     <tr>
      <td>
       商品影片
      </td>
      <td>
       Product metafield
      </td>
     </tr>
     <tr>
      <td>
       商品保固
      </td>
      <td>
       Product metafield
      </td>
     </tr>
     <tr>
      <td>
       商品 FAQ
      </td>
      <td>
       Product metafield 或 Metaobjects
      </td>
     </tr>
     <tr>
      <td>
       商品頁區塊標題
      </td>
      <td>
       Schema
      </td>
     </tr>
     <tr>
      <td>
       商品頁區塊開關
      </td>
      <td>
       Schema
      </td>
     </tr>
     <tr>
      <td>
       商品頁版面順序
      </td>
      <td>
       Sections / Blocks
      </td>
     </tr>
     <tr>
      <td>
       首頁 Banner
      </td>
      <td>
       Schema
      </td>
     </tr>
     <tr>
      <td>
       首頁圖文區
      </td>
      <td>
       Schema
      </td>
     </tr>
     <tr>
      <td>
       品牌故事
      </td>
      <td>
       Schema 或 Page metafields，看內容是否需要跨頁共用
      </td>
     </tr>
    </tbody>
   </table>
  </div>
 </section>
 <section class="il-section" id="memory">
  <h2>
   十二、最簡單的記憶法
  </h2>
  <p>
   可以這樣記：
  </p>
  <div class="note-grid">
   <div class="note">
    <strong>
     Schema
    </strong>
    <p>
     給版型用。
     <br/>
     控制「這個區塊長什麼樣子、可以怎麼編輯」。
    </p>
   </div>
   <div class="note">
    <strong>
     Metafields
    </strong>
    <p>
     給資料用。
     <br/>
     控制「這個商品、集合、頁面有哪些額外內容」。
    </p>
   </div>
  </div>
 </section>
 <section class="il-section" id="conclusion">
  <h2>
   十三、完整結論
  </h2>
  <p>
   Shopify Schema 和 Metafields 不是互相取代的關係，而是分工不同。
  </p>
  <p>
   <strong>
    Schema 是 Theme 開發裡的版型設定工具
   </strong>
   ，主要用來建立 Theme Editor 裡的可編輯欄位，讓商家可以調整 section、block、按鈕、圖片、標題、顏色與版面顯示。
  </p>
  <p>
   <strong>
    Metafields 是 Shopify 資料模型的擴充工具
   </strong>
   ，主要用來替商品、集合、頁面、訂單、客戶等 Shopify 資源增加自訂欄位，讓每個商品或資料物件可以擁有不同的規格、內容、圖片、影片、檔案或補充資訊。
  </p>
  <p>
   最好的 Shopify Theme 架構通常不是二選一，而是：
  </p>
  <div class="il-note">
   用 Schema 控制版面，用 Metafields 管理資料。
  </div>
  <p>
   這樣網站才會好維護、好擴充，也比較適合未來做 SEO、商品資料結構化、篩選、客製化商品頁與多語系內容管理。
  </p>
 </section>

</article>

<script>
(function(){
  function fallbackCopy(text){
    var textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.setAttribute("readonly", "");
    textarea.style.position = "fixed";
    textarea.style.top = "0";
    textarea.style.left = "0";
    textarea.style.width = "1px";
    textarea.style.height = "1px";
    textarea.style.padding = "0";
    textarea.style.border = "0";
    textarea.style.opacity = "0";
    textarea.style.zIndex = "-1";
    document.body.appendChild(textarea);
    textarea.focus();
    textarea.select();
    textarea.setSelectionRange(0, textarea.value.length);

    var ok = false;
    try {
      ok = document.execCommand("copy");
    } catch (error) {
      ok = false;
    }

    document.body.removeChild(textarea);
    return ok ? Promise.resolve() : Promise.reject(new Error("copy failed"));
  }

  function copyText(text){
    var value = String(text || "");

    if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
      return navigator.clipboard.writeText(value).catch(function(){
        return fallbackCopy(value);
      });
    }

    return fallbackCopy(value);
  }

  function getCodeText(card){
    var code = card.querySelector("pre code") || card.querySelector("pre");
    return code ? (code.textContent || code.innerText || "").replace(/\n+$/g, "") : "";
  }

  function setButtonState(button, text, copied){
    button.textContent = text;
    button.classList.toggle("is-copied", !!copied);
  }

  function initCodeCopy(){
    document.querySelectorAll(".il-shopify-schema-guide .il-code-card").forEach(function(card){
      if (card.dataset.copyReady === "true") return;

      var title = card.querySelector(".il-code-title");
      var code = card.querySelector("pre code") || card.querySelector("pre");

      if (!title || !code) return;

      var button = document.createElement("button");
      button.type = "button";
      button.className = "il-copy-button";
      button.textContent = "複製";
      button.setAttribute("aria-label", "複製這段程式碼");

      button.addEventListener("click", function(event){
        event.preventDefault();
        event.stopPropagation();

        var text = getCodeText(card);

        copyText(text).then(function(){
          setButtonState(button, "已複製", true);

          window.setTimeout(function(){
            setButtonState(button, "複製", false);
          }, 1500);
        }).catch(function(){
          setButtonState(button, "請手動複製", false);

          window.setTimeout(function(){
            setButtonState(button, "複製", false);
          }, 1800);
        });
      });

      title.appendChild(button);
      card.dataset.copyReady = "true";
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initCodeCopy);
  } else {
    initCodeCopy();
  }

  window.setTimeout(initCodeCopy, 500);
})();
</script>