Shopify Schema 語法教學：Settings、Blocks、Type 類型與 Liquid 輸出完整指南

完整整理 Shopify Schema 語法規則，包含 settings、blocks、type 類型、Liquid 取值方式、button 顏色設定、JSON 錯誤 debug 與完整 section 範例，適合 Shopify Theme 開發新手學習。

如果你正在學 Shopify Theme 開發，{% schema %} 是一定要理解的核心語法。它決定商家在 Theme Editor 後台可以編輯哪些欄位，例如文字、圖片、顏色、按鈕、商品、集合與 blocks。本篇會用 Shopify section 實作角度，完整整理 schema 的 settings、blocks、type 類型、Liquid 取值方式，以及最常見的 JSON 錯誤 debug。

Shopify Schema 是什麼？

Shopify Schema 是寫在 section 檔案底部 {% schema %} 與 {% endschema %} 之間的一段 JSON 設定，用來定義 Shopify Theme Editor 後台可編輯的欄位。Schema 本身不負責前台畫面輸出，前台仍需要透過 Liquid 讀取 section.settings 或 block.settings 的值。

本文重點

  • Shopify Schema 是用來定義 Theme Editor 後台欄位
  • settings 控制整個 section 的設定
  • blocks 控制可新增、刪除、排序的內容
  • schema 裡必須是有效 JSON，不能寫 Liquid 邏輯
  • 前台要用 section.settings 或 block.settings 讀取欄位值
  • 常見錯誤多半來自 JSON 格式、default 型別錯誤或 Liquid 取值路徑錯誤
Shopify Theme 開發筆記

這份教學整理 Shopify {% schema %} 的基本規則、settings 與 blocks 差異、常見 type 類型、前台 Liquid 輸出方式，以及最常遇到的 JSON 無效與按鈕顏色 debug 範例。

核心觀念

Schema 負責定義 Shopify 後台 Theme Editor 的欄位；Liquid 負責把欄位值輸出到前台畫面。

Schema

定義商家可以在後台編輯哪些內容，例如圖片、標題、按鈕、顏色、間距。

Settings

控制整個 section 的固定設定，例如背景色、版面寬度、上下間距。

Blocks

控制可新增、刪除、排序的內容，例如 heading、text、button、image。

1. 注意事項與規則

1-1. Schema 裡面必須是有效 JSON

Shopify 的 {% schema %} 裡面不是 JavaScript 物件，而是 JSON，所以格式必須非常嚴格。

規則正確錯誤
key 要雙引號"name"name
字串要雙引號"Button"'Button'
最後一筆不能有逗號"label": "Text""label": "Text",
陣列項目之間要逗號{...}, {...}{...} {...}
不能寫註解不寫註解// comment
正確基本架構
{% schema %}
{
  "name": "Custom section",
  "settings": [],
  "blocks": [],
  "presets": [
    {
      "name": "Custom section"
    }
  ]
}
{% endschema %}

1-2. Schema 裡面的 Liquid 不會被執行

{% schema %} 是用來描述後台欄位，不是前台渲染邏輯。不要在 schema 的 default 裡放 Liquid 變數。

不建議
{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "{{ product.title }}"
}

1-3. type 有三種不同意思

位置寫法意思
section setting 裡"type": "color"這是一個顏色選擇欄位
block 外層"type": "button"這個 block 的識別名稱
block setting 裡"type": "url"這是一個連結選擇欄位
type 差異範例
{
  "type": "button",
  "name": "Button",
  "settings": [
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button background color",
      "default": "#000000"
    }
  ]
}

1-4. settings 與 blocks 的使用時機

settings： 適合放整個 section 共用的設定，例如背景色、版面寬度、上下間距。
blocks： 適合放可以重複新增、刪除、排序的內容，例如 heading、text、button、image。
settings 與 blocks 範例
"settings": [
  {
    "type": "color",
    "id": "section_bg_color",
    "label": "Section background color",
    "default": "#ffffff"
  }
],
"blocks": [
  {
    "type": "heading",
    "name": "Heading",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Title"
      }
    ]
  }
]

1-5. Liquid 取值方式

如果欄位放在 section 的 settings 裡，用 section.settings.xxx。如果欄位放在 block 的 settings 裡，用 block.settings.xxx。

Liquid 取值
{{ section.settings.heading }}

{{ block.settings.button_bg_color }}

1-6. default 型別要符合 type

typedefault 正確範例錯誤範例
text"Shop Now"true
checkboxtrue / false"true"
color"#000000""Shop Now"
range20"20px"
select"center""Center"，除非 value 就是 Center
url通常不寫 default"#" 不一定適合

2. Type 類型詳解

Shopify schema 的 setting type 可以分成基礎輸入、樣式、圖片影片連結、Shopify 資源，以及後台說明類型。

A. 基礎輸入類型

text

單行文字，適合標題、按鈕文字、小標。

text
{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "Image with text"
}
textarea

多行純文字，不提供富文字編輯器。

textarea
{
  "type": "textarea",
  "id": "description",
  "label": "Description",
  "default": "Add your description here."
}
richtext

富文字內容，會輸出 HTML，例如 p、strong、a。

richtext
{
  "type": "richtext",
  "id": "content",
  "label": "Content",
  "default": "<p>Add your content here.</p>"
}
inline_richtext

適合標題短句，可粗體、斜體、連結，但不自動包 p。

inline_richtext
{
  "type": "inline_richtext",
  "id": "heading",
  "label": "Heading",
  "default": "Welcome to our store"
}
checkbox

開關功能，例如是否顯示按鈕、滿版、啟用影片。

checkbox
{
  "type": "checkbox",
  "id": "show_button",
  "label": "Show button",
  "default": true
}
range

範圍數值，例如間距、寬度、圓角、透明度。

range
{
  "type": "range",
  "id": "padding_top",
  "label": "Padding top",
  "min": 0,
  "max": 100,
  "step": 4,
  "unit": "px",
  "default": 40
}
select

下拉選單，default 必須對應 options 裡的 value。

select
{
  "type": "select",
  "id": "text_alignment",
  "label": "Text alignment",
  "options": [
    { "value": "left", "label": "Left" },
    { "value": "center", "label": "Center" },
    { "value": "right", "label": "Right" }
  ],
  "default": "center"
}
radio

選項少時適合使用，會直接展開顯示選項。

radio
{
  "type": "radio",
  "id": "layout",
  "label": "Layout",
  "options": [
    { "value": "image_first", "label": "Image first" },
    { "value": "text_first", "label": "Text first" }
  ],
  "default": "image_first"
}

B. 顏色與樣式類型

color

顏色選擇器，default 必須是色碼。

color
{
  "type": "color",
  "id": "button_bg_color",
  "label": "Button background color",
  "default": "#000000"
}
color_background

背景或漸層背景。

color_background
{
  "type": "color_background",
  "id": "background",
  "label": "Background",
  "default": "linear-gradient(#ffffff, #000000)"
}
font_picker

選擇 Shopify 字體，default 通常必填。

font_picker
{
  "type": "font_picker",
  "id": "heading_font",
  "label": "Heading font",
  "default": "helvetica_n4"
}

C. 圖片、影片、連結類型

image_picker

選擇圖片。通常不寫 default。

image_picker
{
  "type": "image_picker",
  "id": "image",
  "label": "Image"
}
video

Shopify-hosted video，也就是上傳到 Shopify 的影片。

video
{
  "type": "video",
  "id": "video_hosted",
  "label": "Shopify-hosted video"
}
video_url

YouTube / Vimeo 外部影片。

video_url
{
  "type": "video_url",
  "id": "video_url",
  "label": "Video URL",
  "accept": ["youtube", "vimeo"]
}
url

一般連結，例如按鈕連結。

url
{
  "type": "url",
  "id": "button_link",
  "label": "Button link"
}

D. Shopify 資源類型

product

選擇單一商品。

product
{
  "type": "product",
  "id": "product",
  "label": "Product"
}
product_list

選擇多個商品，可搭配 limit。

product_list
{
  "type": "product_list",
  "id": "products",
  "label": "Products",
  "limit": 8
}
collection

選擇單一商品集合。

collection
{
  "type": "collection",
  "id": "collection",
  "label": "Collection"
}
collection_list

選擇多個商品集合。

collection_list
{
  "type": "collection_list",
  "id": "collections",
  "label": "Collections",
  "limit": 6
}
page

選擇 Shopify Page，可輸出 page.content。

page
{
  "type": "page",
  "id": "page",
  "label": "Page"
}
blog / article

選擇部落格或文章。

blog / article
{
  "type": "blog",
  "id": "blog",
  "label": "Blog"
}
link_list

選擇選單，例如 footer menu、mega menu。

link_list
{
  "type": "link_list",
  "id": "menu",
  "label": "Menu"
}
metaobject

進階客製內容，例如品牌、門市、設計師、FAQ 資料庫。

metaobject
{
  "type": "metaobject",
  "id": "designer",
  "label": "Designer",
  "metaobject_type": "designer"
}

E. 後台說明類型

header

後台欄位分組標題，不會儲存值。

header
{
  "type": "header",
  "content": "Button style"
}
paragraph

後台說明文字，不會儲存值。

paragraph
{
  "type": "paragraph",
  "content": "Use these settings to customize the button style."
}

3. Button block 加上顏色設定

實務上最推薦把按鈕文字、按鈕連結、按鈕背景色、按鈕文字色放在同一個 button block 裡，結構最乾淨，也比較好維護。

Schema：button block
{
  "type": "button",
  "name": "Button",
  "settings": [
    {
      "type": "text",
      "id": "button_text",
      "label": "Button label",
      "default": "Shop Now",
      "info": "Leave the label blank to hide the button."
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text color",
      "default": "#ffffff"
    }
  ]
}
Liquid：前台輸出按鈕
{% for block in section.blocks %}
  {% case block.type %}
    {% when 'button' %}
      {% if block.settings.button_text != blank %}
        <a
          href="{{ block.settings.button_link }}"
          class="button"
          style="color: {{ block.settings.button_text_color }}; background-color: {{ block.settings.button_bg_color }};"
          {{ block.shopify_attributes }}
        >
          {{ block.settings.button_text }}
        </a>
      {% endif %}
  {% endcase %}
{% endfor %}
CSS inline style 裡面每個屬性都要用分號隔開：
color: ...; background-color: ...;

4. 常見錯誤 Debug

錯誤訊息 / 狀況常見原因修正方式
「結構描述」標籤中的 JSON 無效少逗號、多逗號、單引號、註解先用 JSON Validator 檢查 schema 內容
color default 錯誤"default": "Shop Now"改成 "#000000"
select default 不生效default 沒對到 options value確認 value 完全一致
圖片 default 不生效image_picker 不支援 default移除 default
block 顯示不出來Liquid 沒寫 for block in section.blocks加上 blocks loop
button 顏色沒生效inline style 少分號color: ...; background-color: ...;
後台有欄位但前台沒變用錯 section.settings / block.settingssection 設定用 section，block 設定用 block
schema 儲存錯誤同一 section 有兩個 schema只保留一組 {% schema %}
Debug 範例 1：color default 寫錯

錯誤：color 欄位不能放文字 default。

錯誤
{
  "type": "color",
  "id": "button_bg_color",
  "label": "Button label",
  "default": "Shop Now"
}
正確
{
  "type": "color",
  "id": "button_bg_color",
  "label": "Button background color",
  "default": "#000000"
}
Debug 範例 2：style 屬性少分號
錯誤
style="color: {{ block.settings.button_text_color }} background-color: {{ block.settings.button_bg_color }}"
正確
style="color: {{ block.settings.button_text_color }}; background-color: {{ block.settings.button_bg_color }};"

5. 完整 Section 範例

下面是一個可以放進 Shopify section 檔案的簡化範例，包含 section settings、blocks、presets 與前台輸出。

完整 Liquid Section 範例
<section
  class="custom-image-text"
  style="background-color: {{ section.settings.color_bg }}; color: {{ section.settings.color_text }};"
>
  <div class="custom-image-text__inner custom-image-text__inner--{{ section.settings.layout }}">

    {% if section.settings.image != blank %}
      <div class="custom-image-text__media">
        {{ section.settings.image | image_url: width: 1200 | image_tag }}
      </div>
    {% endif %}

    <div class="custom-image-text__content {{ section.settings.content_position }}">
      {% for block in section.blocks %}
        {% case block.type %}

          {% when 'subheading' %}
            {% if block.settings.text != blank %}
              <p class="custom-image-text__subheading" {{ block.shopify_attributes }}>
                {{ block.settings.text }}
              </p>
            {% endif %}

          {% when 'heading' %}
            {% if block.settings.text != blank %}
              <h2 class="custom-image-text__heading" {{ block.shopify_attributes }}>
                {{ block.settings.text }}
              </h2>
            {% endif %}

          {% when 'text' %}
            {% if block.settings.text != blank %}
              <div class="custom-image-text__text" {{ block.shopify_attributes }}>
                {{ block.settings.text }}
              </div>
            {% endif %}

          {% when 'button' %}
            {% if block.settings.button_text != blank %}
              <a
                href="{{ block.settings.button_link }}"
                class="custom-image-text__button"
                style="color: {{ block.settings.button_text_color }}; background-color: {{ block.settings.button_bg_color }};"
                {{ block.shopify_attributes }}
              >
                {{ block.settings.button_text }}
              </a>
            {% endif %}

          {% when 'space' %}
            <div style="height: {{ block.settings.height }}px;" {{ block.shopify_attributes }}></div>

        {% endcase %}
      {% endfor %}
    </div>

  </div>
</section>

{% schema %}
{
  "name": "Custom image with text",
  "class": "section-custom-image-with-text",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Desktop image placement",
      "options": [
        {
          "value": "image_first",
          "label": "Image first"
        },
        {
          "value": "text_first",
          "label": "Text first"
        }
      ],
      "default": "image_first"
    },
    {
      "type": "select",
      "id": "content_position",
      "label": "Desktop content alignment",
      "options": [
        {
          "value": "text-left",
          "label": "Left"
        },
        {
          "value": "text-center",
          "label": "Center"
        },
        {
          "value": "text-right",
          "label": "Right"
        }
      ],
      "default": "text-left"
    },
    {
      "type": "color",
      "id": "color_bg",
      "label": "Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": "Text",
      "default": "#2c2d2e"
    }
  ],
  "blocks": [
    {
      "type": "subheading",
      "name": "Subheading",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "Add a tagline"
        }
      ]
    },
    {
      "type": "heading",
      "name": "Heading",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "Image with text"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "Content",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post.</p>"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button",
      "settings": [
        {
          "type": "text",
          "id": "button_text",
          "label": "Button label",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        },
        {
          "type": "color",
          "id": "button_bg_color",
          "label": "Button background color",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "button_text_color",
          "label": "Button text color",
          "default": "#ffffff"
        }
      ]
    },
    {
      "type": "space",
      "name": "Empty space",
      "settings": [
        {
          "type": "range",
          "id": "height",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "px",
          "label": "Height",
          "default": 50
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom image with text",
      "blocks": [
        {
          "type": "subheading"
        },
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}
一句話總結： schema 定義後台欄位，Liquid 輸出前台畫面；settings 管整個 section，blocks 管可新增排序的內容。

Shopify Schema 常見問題 FAQ

Shopify Schema 是 Liquid 嗎？

不是。Schema 是 JSON 設定，用來定義 Theme Editor 後台欄位；Liquid 是前台輸出邏輯，用來把設定值顯示到頁面上。

settings 和 blocks 有什麼差別？

settings 適合控制整個 section 的固定設定，例如背景色、寬度、間距；blocks 適合可重複新增、刪除與排序的內容，例如標題、文字、按鈕、圖片。

Shopify schema 裡可以寫 Liquid 嗎？

不建議，也不會被執行。schema 裡的 default 不應該放 {{ product.title }} 這類 Liquid 變數。

Shopify color type 的 default 要怎麼寫？

color 欄位的 default 必須是色碼，例如 #000000，不能放一般文字。

為什麼 Shopify schema 會出現 JSON 無效？

常見原因包含少逗號、多逗號、使用單引號、最後一筆多逗號、寫了註解，或同一個 section 裡出現兩組 schema。

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

參考資料：Shopify 開發官方文件：Section schema

<!-- wp:html -->
<style>
.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{
  max-width:760px;
  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>
<!-- /wp:html -->

<!-- wp:html -->
<article class="il-shopify-schema-guide">

<header class="il-hero">
  <span class="il-eyebrow">Shopify Theme 開發筆記</span>
  <h1>Shopify Schema 語法撰寫指南</h1>
  <p class="il-muted">這份教學整理 Shopify <strong>{% schema %}</strong> 的基本規則、settings 與 blocks 差異、常見 type 類型、前台 Liquid 輸出方式，以及最常遇到的 JSON 無效與按鈕顏色 debug 範例。</p>
  <div class="il-palette" aria-label="Shopify Dev inspired color 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>

<!-- IL TOC START -->
<nav class="il-toc" aria-label="文章大綱">
  <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="#schema-rules">1. 注意事項與規則</a>
      <p class="il-toc-desc">掌握 schema 的 JSON 規則、type 意義、settings / blocks 差異與 Liquid 取值方式。</p>
      <ul class="il-toc-sublist">
        <li><a href="#schema-json-rules">1-1. 有效 JSON</a></li>
        <li><a href="#schema-liquid-not-run">1-2. Schema 裡的 Liquid 不會被執行</a></li>
        <li><a href="#schema-type-meaning">1-3. type 的三種意思</a></li>
        <li><a href="#schema-settings-blocks">1-4. settings 與 blocks</a></li>
        <li><a href="#schema-liquid-output">1-5. Liquid 取值方式</a></li>
        <li><a href="#schema-default-type">1-6. default 型別規則</a></li>
      </ul>
    </li>

    <li>
      <a class="il-toc-main-link" href="#schema-types">2. Type 類型詳解</a>
      <p class="il-toc-desc">整理常見 schema setting type，包含文字、顏色、圖片、影片、商品、集合、頁面、選單與 metaobject。</p>
      <ul class="il-toc-sublist">
        <li><a href="#schema-basic-types">A. 基礎輸入類型</a></li>
        <li><a href="#schema-style-types">B. 顏色與樣式類型</a></li>
        <li><a href="#schema-media-types">C. 圖片、影片、連結類型</a></li>
        <li><a href="#schema-resource-types">D. Shopify 資源類型</a></li>
        <li><a href="#schema-sidebar-types">E. 後台說明類型</a></li>
      </ul>
    </li>

    <li>
      <a class="il-toc-main-link" href="#schema-button-color">3. Button block 加上顏色設定</a>
      <p class="il-toc-desc">示範如何把按鈕文字、連結、背景色與文字色放在同一個 button block 裡。</p>
    </li>

    <li>
      <a class="il-toc-main-link" href="#schema-debug">4. 常見錯誤 Debug</a>
      <p class="il-toc-desc">快速排查 JSON 無效、color default 錯誤、select default 不生效、block 不顯示等常見問題。</p>
    </li>

    <li>
      <a class="il-toc-main-link" href="#schema-full-example">5. 完整 Section 範例</a>
      <p class="il-toc-desc">提供可放進 Shopify section 檔案的簡化完整範例，包含前台輸出與 schema 結構。</p>
    </li>
  </ul>
</nav>
<!-- IL TOC END -->

<section class="il-section">
  <h2 id="schema-core-concepts">核心觀念</h2>
  <p class="il-muted">Schema 負責定義 Shopify 後台 Theme Editor 的欄位；Liquid 負責把欄位值輸出到前台畫面。</p>
  <div class="il-grid">
    <div class="il-card"><strong>Schema</strong><p class="il-muted">定義商家可以在後台編輯哪些內容，例如圖片、標題、按鈕、顏色、間距。</p></div>
    <div class="il-card"><strong>Settings</strong><p class="il-muted">控制整個 section 的固定設定，例如背景色、版面寬度、上下間距。</p></div>
    <div class="il-card"><strong>Blocks</strong><p class="il-muted">控制可新增、刪除、排序的內容，例如 heading、text、button、image。</p></div>
  </div>
</section>

<section class="il-section">
  <h2 id="schema-rules">1. 注意事項與規則</h2>

  <h3 id="schema-json-rules">1-1. Schema 裡面必須是有效 JSON</h3>
  <p>Shopify 的 <code>{% schema %}</code> 裡面不是 JavaScript 物件，而是 JSON，所以格式必須非常嚴格。</p>

  <div class="il-table-wrap">
    <table>
      <thead><tr><th>規則</th><th>正確</th><th>錯誤</th></tr></thead>
      <tbody>
        <tr><td>key 要雙引號</td><td><code>"name"</code></td><td><code>name</code></td></tr>
        <tr><td>字串要雙引號</td><td><code>"Button"</code></td><td><code>'Button'</code></td></tr>
        <tr><td>最後一筆不能有逗號</td><td><code>"label": "Text"</code></td><td><code>"label": "Text",</code></td></tr>
        <tr><td>陣列項目之間要逗號</td><td><code>{...}, {...}</code></td><td><code>{...} {...}</code></td></tr>
        <tr><td>不能寫註解</td><td>不寫註解</td><td><code>// comment</code></td></tr>
      </tbody>
    </table>
  </div>
<div class="il-code-card">
  <div class="il-code-title">正確基本架構</div>
  <pre><code>{% schema %}
{
  "name": "Custom section",
  "settings": [],
  "blocks": [],
  "presets": [
    {
      "name": "Custom section"
    }
  ]
}
{% endschema %}</code></pre>
</div>

  <h3 id="schema-liquid-not-run">1-2. Schema 裡面的 Liquid 不會被執行</h3>
  <p><code>{% schema %}</code> 是用來描述後台欄位，不是前台渲染邏輯。不要在 schema 的 default 裡放 Liquid 變數。</p>
<div class="il-code-card">
  <div class="il-code-title">不建議</div>
  <pre><code>{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "{{ product.title }}"
}</code></pre>
</div>

  <h3 id="schema-type-meaning">1-3. type 有三種不同意思</h3>
  <div class="il-table-wrap">
    <table>
      <thead><tr><th>位置</th><th>寫法</th><th>意思</th></tr></thead>
      <tbody>
        <tr><td>section setting 裡</td><td><code>"type": "color"</code></td><td>這是一個顏色選擇欄位</td></tr>
        <tr><td>block 外層</td><td><code>"type": "button"</code></td><td>這個 block 的識別名稱</td></tr>
        <tr><td>block setting 裡</td><td><code>"type": "url"</code></td><td>這是一個連結選擇欄位</td></tr>
      </tbody>
    </table>
  </div>
<div class="il-code-card">
  <div class="il-code-title">type 差異範例</div>
  <pre><code>{
  "type": "button",
  "name": "Button",
  "settings": [
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button background color",
      "default": "#000000"
    }
  ]
}</code></pre>
</div>

  <h3 id="schema-settings-blocks">1-4. settings 與 blocks 的使用時機</h3>
  <div class="il-note"><strong>settings：</strong> 適合放整個 section 共用的設定，例如背景色、版面寬度、上下間距。<br><strong>blocks：</strong> 適合放可以重複新增、刪除、排序的內容，例如 heading、text、button、image。</div>
<div class="il-code-card">
  <div class="il-code-title">settings 與 blocks 範例</div>
  <pre><code>"settings": [
  {
    "type": "color",
    "id": "section_bg_color",
    "label": "Section background color",
    "default": "#ffffff"
  }
],
"blocks": [
  {
    "type": "heading",
    "name": "Heading",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Title"
      }
    ]
  }
]</code></pre>
</div>

  <h3 id="schema-liquid-output">1-5. Liquid 取值方式</h3>
  <p>如果欄位放在 section 的 <code>settings</code> 裡，用 <code>section.settings.xxx</code>。如果欄位放在 block 的 <code>settings</code> 裡，用 <code>block.settings.xxx</code>。</p>
<div class="il-code-card">
  <div class="il-code-title">Liquid 取值</div>
  <pre><code>{{ section.settings.heading }}

{{ block.settings.button_bg_color }}</code></pre>
</div>

  <h3 id="schema-default-type">1-6. default 型別要符合 type</h3>
  <div class="il-table-wrap">
    <table>
      <thead><tr><th>type</th><th>default 正確範例</th><th>錯誤範例</th></tr></thead>
      <tbody>
        <tr><td><code>text</code></td><td><code>"Shop Now"</code></td><td><code>true</code></td></tr>
        <tr><td><code>checkbox</code></td><td><code>true</code> / <code>false</code></td><td><code>"true"</code></td></tr>
        <tr><td><code>color</code></td><td><code>"#000000"</code></td><td><code>"Shop Now"</code></td></tr>
        <tr><td><code>range</code></td><td><code>20</code></td><td><code>"20px"</code></td></tr>
        <tr><td><code>select</code></td><td><code>"center"</code></td><td><code>"Center"</code>，除非 value 就是 Center</td></tr>
        <tr><td><code>url</code></td><td>通常不寫 default</td><td><code>"#"</code> 不一定適合</td></tr>
      </tbody>
    </table>
  </div>
</section>

<section class="il-section">
  <h2 id="schema-types">2. Type 類型詳解</h2>
  <p class="il-muted">Shopify schema 的 setting type 可以分成基礎輸入、樣式、圖片影片連結、Shopify 資源，以及後台說明類型。</p>

  <h3 id="schema-basic-types">A. 基礎輸入類型</h3>
  <div class="il-type-grid">
<div class="il-type-card"><span class="il-tag">text</span><p>單行文字，適合標題、按鈕文字、小標。</p><div class="il-code-card">
  <div class="il-code-title">text</div>
  <pre><code>{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "Image with text"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">textarea</span><p>多行純文字，不提供富文字編輯器。</p><div class="il-code-card">
  <div class="il-code-title">textarea</div>
  <pre><code>{
  "type": "textarea",
  "id": "description",
  "label": "Description",
  "default": "Add your description here."
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">richtext</span><p>富文字內容，會輸出 HTML，例如 p、strong、a。</p><div class="il-code-card">
  <div class="il-code-title">richtext</div>
  <pre><code>{
  "type": "richtext",
  "id": "content",
  "label": "Content",
  "default": "&lt;p&gt;Add your content here.&lt;/p&gt;"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">inline_richtext</span><p>適合標題短句，可粗體、斜體、連結，但不自動包 p。</p><div class="il-code-card">
  <div class="il-code-title">inline_richtext</div>
  <pre><code>{
  "type": "inline_richtext",
  "id": "heading",
  "label": "Heading",
  "default": "Welcome to our store"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">checkbox</span><p>開關功能，例如是否顯示按鈕、滿版、啟用影片。</p><div class="il-code-card">
  <div class="il-code-title">checkbox</div>
  <pre><code>{
  "type": "checkbox",
  "id": "show_button",
  "label": "Show button",
  "default": true
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">range</span><p>範圍數值，例如間距、寬度、圓角、透明度。</p><div class="il-code-card">
  <div class="il-code-title">range</div>
  <pre><code>{
  "type": "range",
  "id": "padding_top",
  "label": "Padding top",
  "min": 0,
  "max": 100,
  "step": 4,
  "unit": "px",
  "default": 40
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">select</span><p>下拉選單，default 必須對應 options 裡的 value。</p><div class="il-code-card">
  <div class="il-code-title">select</div>
  <pre><code>{
  "type": "select",
  "id": "text_alignment",
  "label": "Text alignment",
  "options": [
    { "value": "left", "label": "Left" },
    { "value": "center", "label": "Center" },
    { "value": "right", "label": "Right" }
  ],
  "default": "center"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">radio</span><p>選項少時適合使用，會直接展開顯示選項。</p><div class="il-code-card">
  <div class="il-code-title">radio</div>
  <pre><code>{
  "type": "radio",
  "id": "layout",
  "label": "Layout",
  "options": [
    { "value": "image_first", "label": "Image first" },
    { "value": "text_first", "label": "Text first" }
  ],
  "default": "image_first"
}</code></pre>
</div>
</div>

  </div>

  <h3 id="schema-style-types">B. 顏色與樣式類型</h3>
  <div class="il-type-grid">
<div class="il-type-card"><span class="il-tag">color</span><p>顏色選擇器，default 必須是色碼。</p><div class="il-code-card">
  <div class="il-code-title">color</div>
  <pre><code>{
  "type": "color",
  "id": "button_bg_color",
  "label": "Button background color",
  "default": "#000000"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">color_background</span><p>背景或漸層背景。</p><div class="il-code-card">
  <div class="il-code-title">color_background</div>
  <pre><code>{
  "type": "color_background",
  "id": "background",
  "label": "Background",
  "default": "linear-gradient(#ffffff, #000000)"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">font_picker</span><p>選擇 Shopify 字體，default 通常必填。</p><div class="il-code-card">
  <div class="il-code-title">font_picker</div>
  <pre><code>{
  "type": "font_picker",
  "id": "heading_font",
  "label": "Heading font",
  "default": "helvetica_n4"
}</code></pre>
</div>
</div>

  </div>

  <h3 id="schema-media-types">C. 圖片、影片、連結類型</h3>
  <div class="il-type-grid">
<div class="il-type-card"><span class="il-tag">image_picker</span><p>選擇圖片。通常不寫 default。</p><div class="il-code-card">
  <div class="il-code-title">image_picker</div>
  <pre><code>{
  "type": "image_picker",
  "id": "image",
  "label": "Image"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">video</span><p>Shopify-hosted video，也就是上傳到 Shopify 的影片。</p><div class="il-code-card">
  <div class="il-code-title">video</div>
  <pre><code>{
  "type": "video",
  "id": "video_hosted",
  "label": "Shopify-hosted video"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">video_url</span><p>YouTube / Vimeo 外部影片。</p><div class="il-code-card">
  <div class="il-code-title">video_url</div>
  <pre><code>{
  "type": "video_url",
  "id": "video_url",
  "label": "Video URL",
  "accept": ["youtube", "vimeo"]
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">url</span><p>一般連結，例如按鈕連結。</p><div class="il-code-card">
  <div class="il-code-title">url</div>
  <pre><code>{
  "type": "url",
  "id": "button_link",
  "label": "Button link"
}</code></pre>
</div>
</div>

  </div>

  <h3 id="schema-resource-types">D. Shopify 資源類型</h3>
  <div class="il-type-grid">
<div class="il-type-card"><span class="il-tag">product</span><p>選擇單一商品。</p><div class="il-code-card">
  <div class="il-code-title">product</div>
  <pre><code>{
  "type": "product",
  "id": "product",
  "label": "Product"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">product_list</span><p>選擇多個商品，可搭配 limit。</p><div class="il-code-card">
  <div class="il-code-title">product_list</div>
  <pre><code>{
  "type": "product_list",
  "id": "products",
  "label": "Products",
  "limit": 8
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">collection</span><p>選擇單一商品集合。</p><div class="il-code-card">
  <div class="il-code-title">collection</div>
  <pre><code>{
  "type": "collection",
  "id": "collection",
  "label": "Collection"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">collection_list</span><p>選擇多個商品集合。</p><div class="il-code-card">
  <div class="il-code-title">collection_list</div>
  <pre><code>{
  "type": "collection_list",
  "id": "collections",
  "label": "Collections",
  "limit": 6
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">page</span><p>選擇 Shopify Page，可輸出 page.content。</p><div class="il-code-card">
  <div class="il-code-title">page</div>
  <pre><code>{
  "type": "page",
  "id": "page",
  "label": "Page"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">blog / article</span><p>選擇部落格或文章。</p><div class="il-code-card">
  <div class="il-code-title">blog / article</div>
  <pre><code>{
  "type": "blog",
  "id": "blog",
  "label": "Blog"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">link_list</span><p>選擇選單，例如 footer menu、mega menu。</p><div class="il-code-card">
  <div class="il-code-title">link_list</div>
  <pre><code>{
  "type": "link_list",
  "id": "menu",
  "label": "Menu"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">metaobject</span><p>進階客製內容，例如品牌、門市、設計師、FAQ 資料庫。</p><div class="il-code-card">
  <div class="il-code-title">metaobject</div>
  <pre><code>{
  "type": "metaobject",
  "id": "designer",
  "label": "Designer",
  "metaobject_type": "designer"
}</code></pre>
</div>
</div>

  </div>

  <h3 id="schema-sidebar-types">E. 後台說明類型</h3>
  <div class="il-type-grid">
<div class="il-type-card"><span class="il-tag">header</span><p>後台欄位分組標題，不會儲存值。</p><div class="il-code-card">
  <div class="il-code-title">header</div>
  <pre><code>{
  "type": "header",
  "content": "Button style"
}</code></pre>
</div>
</div>
<div class="il-type-card"><span class="il-tag">paragraph</span><p>後台說明文字，不會儲存值。</p><div class="il-code-card">
  <div class="il-code-title">paragraph</div>
  <pre><code>{
  "type": "paragraph",
  "content": "Use these settings to customize the button style."
}</code></pre>
</div>
</div>

  </div>
</section>

<section class="il-section">
  <h2 id="schema-button-color">3. Button block 加上顏色設定</h2>
  <p>實務上最推薦把按鈕文字、按鈕連結、按鈕背景色、按鈕文字色放在同一個 <code>button</code> block 裡，結構最乾淨，也比較好維護。</p>
<div class="il-code-card">
  <div class="il-code-title">Schema：button block</div>
  <pre><code>{
  "type": "button",
  "name": "Button",
  "settings": [
    {
      "type": "text",
      "id": "button_text",
      "label": "Button label",
      "default": "Shop Now",
      "info": "Leave the label blank to hide the button."
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text color",
      "default": "#ffffff"
    }
  ]
}</code></pre>
</div>
<div class="il-code-card">
  <div class="il-code-title">Liquid：前台輸出按鈕</div>
  <pre><code>{% for block in section.blocks %}
  {% case block.type %}
    {% when 'button' %}
      {% if block.settings.button_text != blank %}
        &lt;a
          href="{{ block.settings.button_link }}"
          class="button"
          style="color: {{ block.settings.button_text_color }}; background-color: {{ block.settings.button_bg_color }};"
          {{ block.shopify_attributes }}
        &gt;
          {{ block.settings.button_text }}
        &lt;/a&gt;
      {% endif %}
  {% endcase %}
{% endfor %}</code></pre>
</div>

  <div class="il-note">CSS inline style 裡面每個屬性都要用分號隔開：<br><code>color: ...; background-color: ...;</code></div>
</section>

<section class="il-section">
  <h2 id="schema-debug">4. 常見錯誤 Debug</h2>
  <div class="il-table-wrap">
    <table>
      <thead><tr><th>錯誤訊息 / 狀況</th><th>常見原因</th><th>修正方式</th></tr></thead>
      <tbody>
        <tr><td>「結構描述」標籤中的 JSON 無效</td><td>少逗號、多逗號、單引號、註解</td><td>先用 JSON Validator 檢查 schema 內容</td></tr>
        <tr><td>color default 錯誤</td><td><code>"default": "Shop Now"</code></td><td>改成 <code>"#000000"</code></td></tr>
        <tr><td>select default 不生效</td><td>default 沒對到 options value</td><td>確認 value 完全一致</td></tr>
        <tr><td>圖片 default 不生效</td><td><code>image_picker</code> 不支援 default</td><td>移除 default</td></tr>
        <tr><td>block 顯示不出來</td><td>Liquid 沒寫 <code>for block in section.blocks</code></td><td>加上 blocks loop</td></tr>
        <tr><td>button 顏色沒生效</td><td>inline style 少分號</td><td><code>color: ...; background-color: ...;</code></td></tr>
        <tr><td>後台有欄位但前台沒變</td><td>用錯 <code>section.settings</code> / <code>block.settings</code></td><td>section 設定用 section，block 設定用 block</td></tr>
        <tr><td>schema 儲存錯誤</td><td>同一 section 有兩個 schema</td><td>只保留一組 <code>{% schema %}</code></td></tr>
      </tbody>
    </table>
  </div>

  <details open>
    <summary>Debug 範例 1：color default 寫錯</summary>
    <div class="il-details-body">
      <p>錯誤：color 欄位不能放文字 default。</p>
<div class="il-code-card">
  <div class="il-code-title">錯誤</div>
  <pre><code>{
  "type": "color",
  "id": "button_bg_color",
  "label": "Button label",
  "default": "Shop Now"
}</code></pre>
</div>
<div class="il-code-card">
  <div class="il-code-title">正確</div>
  <pre><code>{
  "type": "color",
  "id": "button_bg_color",
  "label": "Button background color",
  "default": "#000000"
}</code></pre>
</div>

    </div>
  </details>

  <details>
    <summary>Debug 範例 2：style 屬性少分號</summary>
    <div class="il-details-body">
<div class="il-code-card">
  <div class="il-code-title">錯誤</div>
  <pre><code>style="color: {{ block.settings.button_text_color }} background-color: {{ block.settings.button_bg_color }}"</code></pre>
</div>
<div class="il-code-card">
  <div class="il-code-title">正確</div>
  <pre><code>style="color: {{ block.settings.button_text_color }}; background-color: {{ block.settings.button_bg_color }};"</code></pre>
</div>

    </div>
  </details>
</section>

<section class="il-section">
  <h2 id="schema-full-example">5. 完整 Section 範例</h2>
  <p>下面是一個可以放進 Shopify section 檔案的簡化範例，包含 section settings、blocks、presets 與前台輸出。</p>
<div class="il-code-card">
  <div class="il-code-title">完整 Liquid Section 範例</div>
  <pre><code>&lt;section
  class="custom-image-text"
  style="background-color: {{ section.settings.color_bg }}; color: {{ section.settings.color_text }};"
&gt;
  &lt;div class="custom-image-text__inner custom-image-text__inner--{{ section.settings.layout }}"&gt;

    {% if section.settings.image != blank %}
      &lt;div class="custom-image-text__media"&gt;
        {{ section.settings.image | image_url: width: 1200 | image_tag }}
      &lt;/div&gt;
    {% endif %}

    &lt;div class="custom-image-text__content {{ section.settings.content_position }}"&gt;
      {% for block in section.blocks %}
        {% case block.type %}

          {% when 'subheading' %}
            {% if block.settings.text != blank %}
              &lt;p class="custom-image-text__subheading" {{ block.shopify_attributes }}&gt;
                {{ block.settings.text }}
              &lt;/p&gt;
            {% endif %}

          {% when 'heading' %}
            {% if block.settings.text != blank %}
              &lt;h2 class="custom-image-text__heading" {{ block.shopify_attributes }}&gt;
                {{ block.settings.text }}
              &lt;/h2&gt;
            {% endif %}

          {% when 'text' %}
            {% if block.settings.text != blank %}
              &lt;div class="custom-image-text__text" {{ block.shopify_attributes }}&gt;
                {{ block.settings.text }}
              &lt;/div&gt;
            {% endif %}

          {% when 'button' %}
            {% if block.settings.button_text != blank %}
              &lt;a
                href="{{ block.settings.button_link }}"
                class="custom-image-text__button"
                style="color: {{ block.settings.button_text_color }}; background-color: {{ block.settings.button_bg_color }};"
                {{ block.shopify_attributes }}
              &gt;
                {{ block.settings.button_text }}
              &lt;/a&gt;
            {% endif %}

          {% when 'space' %}
            &lt;div style="height: {{ block.settings.height }}px;" {{ block.shopify_attributes }}&gt;&lt;/div&gt;

        {% endcase %}
      {% endfor %}
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/section&gt;

{% schema %}
{
  "name": "Custom image with text",
  "class": "section-custom-image-with-text",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Desktop image placement",
      "options": [
        {
          "value": "image_first",
          "label": "Image first"
        },
        {
          "value": "text_first",
          "label": "Text first"
        }
      ],
      "default": "image_first"
    },
    {
      "type": "select",
      "id": "content_position",
      "label": "Desktop content alignment",
      "options": [
        {
          "value": "text-left",
          "label": "Left"
        },
        {
          "value": "text-center",
          "label": "Center"
        },
        {
          "value": "text-right",
          "label": "Right"
        }
      ],
      "default": "text-left"
    },
    {
      "type": "color",
      "id": "color_bg",
      "label": "Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": "Text",
      "default": "#2c2d2e"
    }
  ],
  "blocks": [
    {
      "type": "subheading",
      "name": "Subheading",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "Add a tagline"
        }
      ]
    },
    {
      "type": "heading",
      "name": "Heading",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "Image with text"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "Content",
          "default": "&lt;p&gt;Pair text with an image to focus on your chosen product, collection, or blog post.&lt;/p&gt;"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button",
      "settings": [
        {
          "type": "text",
          "id": "button_text",
          "label": "Button label",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        },
        {
          "type": "color",
          "id": "button_bg_color",
          "label": "Button background color",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "button_text_color",
          "label": "Button text color",
          "default": "#ffffff"
        }
      ]
    },
    {
      "type": "space",
      "name": "Empty space",
      "settings": [
        {
          "type": "range",
          "id": "height",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "px",
          "label": "Height",
          "default": 50
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom image with text",
      "blocks": [
        {
          "type": "subheading"
        },
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}</code></pre>
</div>

</section>

<footer class="il-footer">
  <strong>一句話總結：</strong>
  schema 定義後台欄位，Liquid 輸出前台畫面；settings 管整個 section，blocks 管可新增排序的內容。
</footer>


<script>
(function(){
  function copyText(text){
    if (navigator.clipboard && window.isSecureContext) {
      return navigator.clipboard.writeText(text);
    }

    var textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.setAttribute("readonly", "");
    textarea.style.position = "fixed";
    textarea.style.top = "-9999px";
    textarea.style.left = "-9999px";
    document.body.appendChild(textarea);
    textarea.select();

    return new Promise(function(resolve, reject){
      try {
        document.execCommand("copy") ? resolve() : reject();
      } catch (error) {
        reject(error);
      } finally {
        document.body.removeChild(textarea);
      }
    });
  }

  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");

      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();

        copyText(code.innerText).then(function(){
          button.textContent = "已複製";
          button.classList.add("is-copied");

          window.setTimeout(function(){
            button.textContent = "複製";
            button.classList.remove("is-copied");
          }, 1500);
        }).catch(function(){
          button.textContent = "請手動複製";

          window.setTimeout(function(){
            button.textContent = "複製";
          }, 1800);
        });
      });

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

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

</article>
<!-- /wp:html -->

🚀 預約諮詢：網站設計與建置＋內容 SEO 優化

若你有 Shopify 電商網站或 WordPress 品牌形象、部落格設計與建站的需求，可以前往填寫表單預約諮詢。Irvinglab 爾文實驗室是一家深度經驗的網頁設計公司，專注打造 Shopify 和 WordPress 網站以及提供 SEO 優化與內容規劃的服務。
⚡️ 前往預約諮詢
標籤
分享給你的朋友
Irving 爾文
Irving 爾文

Irvinglab 爾文實驗室創辦人 / Senior Web Designer / SEO Manager 🚀 專精 Shopify 電商網站設計與架站、 WordPress 品牌網站設計和部落格建置、SEO 關鍵字策略分析研究與規劃，工作經歷大小型公司（包含品牌方與代理商）、網頁設計接案公司、數位行銷公司、新創 Saas 軟體公司等，熱衷設計與文字創作、社群分享，專注網頁設計與架站平台、SEO 搜尋引擎優化，深度研究品牌行銷、UX 策略與數位產品、電商經營等領域，學習各式各樣的科技軟體。

文章: 160

訂閱電子報

掌握網站設計和 SEO 的秘訣，提升品牌影響力

🍿 閱讀更多相關文章

Learning by Reading → Learning by Doing → Learning by Sharing

降低資訊落差，幫助所有人做出最佳判斷，符合現階段的需求與成本考量，以提出最佳解決方案

🎄 加入 Line 學習社群

🍎 Shopify 網站設計與架站學習交流 | Irvinglab 爾文實驗室

簡介：分享主題從網站規劃、設計到建立等相關內容，透過學習交流與經驗分享，讓彼此成長更加快速，主要以 Shopify 建立電商網站為主。

加入 Shopify 社群
🍎 WordPress 網站設計與架站學習｜Irvinglab 爾文實驗室

簡介：學習 WordPress 網站設計與架站，分享實作經驗與交流。

加入 WordPress 社群
🍎 SEO 資源彙整與學習｜Irvinglab 爾文實驗室

簡介：閱讀 SEO 就像喝水一樣，習慣建立與自然地吸收。

加入 SEO 社群
🍎 成為網頁設計師 | Irvinglab 爾文實驗室

簡介：邁向網頁設計師之路，了解網頁設計的基本概念與實作經驗交流與分享，無論是行銷人、工程師、平面設計師等想要了解更多「網頁設計」都歡迎加入討論。

加入 Web Design 社群

🎄 Telegram 學習社群

🍎 Shopify 網站設計與架站學習交流 | Irvinglab 爾文實驗室

簡介：分享主題從網站規劃、設計到建立等相關內容，透過學習交流與經驗分享，讓彼此成長更加快速，主要以 Shopify 建立電商網站為主。

加入 Shopify 社群 - Telegram

🎄 WhatsApp 的學習頻道

🍎 Shopify eCommerce Web Design 網站設計學習交流｜Irvinglab 爾文實驗室

簡介：分享主題從網站規劃、設計到建立等相關內容，透過學習交流與經驗分享，讓彼此成長更加快速，主要以 Shopify 建立電商網站為主。

加入 Shopify 社群 - WhatsApp

精選文章

Shopify 電商網站

Shopify Theme 版型開發教學：Liquid

Brand 品牌

SEO 搜尋引擎優化｜AI SEO

WordPress 網站架站

Web Design 網頁設計

Web Server 網站主機

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Chrome 瀏覽器工具推薦

爾文為自己打造的 Chrome 瀏覽器外掛，專門加速自己平常網站分析、設計時所需的功能，會持續優化與更新，歡迎安裝使用！^^

Irvinglab SEO Essence Extractor 萃取冰滴

幫助網站管理員、SEO 專業人士、內容行銷人員與網頁開發者，快速檢查並複製網頁的重要 SEO、社群分享、AI 搜尋與技術結構資訊。

Irvinglab ImagePeek Downloader 圖片快查下載器

旨在為設計師、前端工程師、網站開發者、SEO 人員、行銷人員、內容編輯與素材工作者打造的 Chrome 圖片偵測與下載工具

訂閱 Irvinglab 電子報，掌握網站設計秘訣和的實戰分享，取得 SEO 最新觀點，不錯過任何靈感

尚無 Domain Rating 資料