Shopify Theme 架構完整解析：Liquid、Section、Template 與佈景主題開發重點

Shopify Theme 是控制商店前台外觀、功能與內容結構的核心。簡單來說，Shopify Theme 決定了一間 Shopify 商店看起來長什麼樣子、有哪些互動功能，以及商家可以在後台編輯哪些內容。

從開發角度來看，Shopify Theme 不只是一組 HTML、CSS 和 JavaScript 檔案，而是一套有標準目錄結構的前台系統。它包含 Liquid 標記語言、JSON templates、sections、blocks、snippets、assets、locales 與 config files。這些檔案共同組成 Shopify 商店的頁面架構，也讓商家可以透過 Theme Editor 自行調整內容與樣式。

如果你正在學習 Shopify theme development，理解 Shopify theme architecture 是第一步。因為只有先了解 layout、template、section、block、snippet 之間的關係，後續修改主題、建立 Section、調整產品頁、設計首頁模組或開發客製化 Theme，才不會像在大型衣櫃裡找一顆鈕扣。

Shopify Theme 是什麼？

Shopify Theme 是商店前台的視覺與功能層。它控制商店頁面的組織方式、功能行為與設計風格。

一個 Shopify Theme 通常包含三大類檔案：

類別	說明
Markup and features	控制頁面版面、內容輸出與功能邏輯，主要使用 Liquid 產生 HTML
Supporting assets	包含圖片、CSS、JavaScript、locale files 等支援資源
Config files	使用 JSON 儲存 Theme Editor 可調整的設定與實際設定值

Markup and features 決定頁面如何被組織與顯示；supporting assets 控制樣式、互動與翻譯內容；config files 則讓商家可以在 Shopify 後台調整字型、顏色、區塊設定與其他主題選項。

也就是說，Shopify Theme 的核心不是單一檔案，而是一組分工明確的檔案系統。

Shopify Theme 的頁面組成邏輯

Shopify Theme 的頁面並不是由一個檔案直接完成，而是由 layout、template、section、block 與 snippet 一層一層組合出來。

可以用這個順序理解：

順序	元件	作用
1	Layout	Theme 的基底，放置全站共用結構
2	Template	決定特定頁面類型要顯示哪些內容
3	Section Group	放在 layout 中，可讓商家管理 header、footer 等區域
4	Section	可重複使用、可自訂的內容模組
5	Block	Section 內可新增、移除、排序的小型內容模組
6	Snippet	可在 Theme 任意位置重複使用的 Liquid 程式碼片段

這套結構讓 Shopify Theme 同時兼顧開發彈性與商家可編輯性。開發者可以透過 Liquid、CSS 與 JavaScript 建立功能；商家則可以透過 Theme Editor 管理 sections、blocks 與設定，不需要每次都修改程式碼。

Layout：Shopify Theme 的全站基底

Layout 是 Shopify Theme 的基底檔案，通常放在 layout 目錄中。最重要的 layout 檔案是：

layout/theme.liquid

theme.liquid 是 Shopify Theme 上傳到 Shopify 時必要的檔案。它通常包含整個網站共用的結構，例如 HTML 基本架構、<head> 內容、全站 CSS 與 JavaScript 引用、header、footer，以及 template 內容要被渲染的位置。

簡單來說，layout 就像網站的外框。首頁、產品頁、文章頁、集合頁可能有不同內容，但它們通常會共用同一個 header、footer、字體設定、全站樣式與追蹤碼。這些全站共用內容就適合放在 layout。

如果把 Shopify Theme 想像成一棟房子，layout 就是地基與主要結構。不同頁面可以有不同裝潢，但整棟房子的骨架不能每個房間都重新蓋一次。

Template：決定不同頁面類型的內容

Template 是控制不同頁面類型要顯示什麼內容的檔案，放在 templates 目錄中。

常見的 Shopify templates 包括：

templates/index.json
templates/product.json
templates/collection.json
templates/page.json
templates/article.json
templates/blog.json
templates/cart.json

Template 的任務，是決定某一種頁面應該載入哪些 sections，或直接透過 Liquid 輸出頁面內容。

Shopify Theme 中有兩種主要 template 類型：

Template 類型	說明
JSON template	作為 sections 的容器，主要定義頁面由哪些 sections 組成
Liquid template	直接包含 Liquid 程式碼，用來輸出頁面內容與功能

在 Online Store 2.0 之後，JSON templates 變得非常重要。它讓商家可以在 Theme Editor 中自由新增、移除與排序 sections，而不需要直接改 Liquid 程式碼。

例如產品頁可以有預設 product template，也可以建立另一個客製 template，專門給特定商品使用。這讓同一種資源類型可以有不同頁面設計，例如一般商品頁、預購商品頁、禮盒商品頁或高單價商品頁。

Section：Shopify Theme 最重要的可編輯內容模組

Section 是 Shopify Theme 中非常重要的模組化單位，放在 sections 目錄中。

常見 sections 可能包括：

sections/main-product.liquid
sections/featured-collection.liquid
sections/image-banner.liquid
sections/rich-text.liquid
sections/newsletter.liquid
sections/footer.liquid

Section 是可重複使用、可自訂的內容模組。商家可以透過 Theme Editor 編輯 section 的內容、設定與排列順序。

例如首頁中的大圖 Banner、精選商品、圖文區塊、FAQ、品牌介紹、電子報訂閱，都可以被做成 section。

Section 的價值在於，它讓 Shopify Theme 不只是固定版面，而是可以被商家自由組合。開發者負責設計 section 的結構與可調整項目，商家則可以在後台用比較直覺的方式管理內容。

Block：Section 裡的小型內容單位

Block 是 section 裡面更小的內容模組。它可以被新增、移除與重新排序。

例如一個 FAQ section 裡，每一個問題與答案可以是一個 block；一個品牌特色 section 裡，每一個 icon、標題與描述可以是一個 block；一個輪播 section 裡，每一張 slide 也可以是一個 block。

Section 與 block 的關係可以這樣理解：

元件	比喻	說明
Section	一整個內容區塊	例如 FAQ、Banner、商品推薦
Block	區塊中的單一項目	例如一則 FAQ、一張 slide、一個特色項目

Block 讓 section 更有彈性。開發者不用預先固定內容數量，商家可以依需求新增或減少項目。

這也是 Shopify Theme Editor 之所以好用的原因之一。它不是只讓商家填文字，而是讓商家能在一定範圍內組合內容結構。

Section Group：管理 Header 與 Footer 等 Layout 區域

Section group 是一種 JSON container，通常用來管理 layout 中的區域，例如 header、footer 或其他全站共用區塊。

它讓商家可以在 header 或 footer 這類 layout 區域中新增、移除與重新排序 sections。

這個概念很重要，因為不是所有 sections 都只存在於單一 template 裡。有些區塊是跨頁面共用的，例如全站公告列、主選單、footer、信任標章或全站促銷訊息。這類內容就適合放在 section group 中管理。

簡單說，template sections 控制某一頁的內容；section groups 則讓商家控制 layout 中跨頁面出現的區域。

Snippet：重複使用的 Liquid 程式碼片段

Snippet 是可重複使用的 Liquid 程式碼片段，放在 snippets 目錄中。

常見 snippets 可能包括：

snippets/price.liquid
snippets/product-card.liquid
snippets/icon-cart.liquid
snippets/pagination.liquid
snippets/breadcrumb.liquid

Snippet 通常不會出現在 Theme Editor 中，商家也看不到它。它主要是給開發者用來拆分與重複使用 Liquid 程式碼。

例如商品卡片可能會出現在首頁精選商品、分類頁、搜尋結果頁與推薦商品區。如果每個地方都寫一份商品卡片程式碼，後續維護會很麻煩。這時就可以把商品卡片拆成 product-card.liquid snippet，再在不同 section 或 template 中 render。

Snippet 的價值在於降低重複程式碼，讓 Shopify Theme 更容易維護。

Shopify Theme Features：功能通常由 Liquid、CSS 與 JavaScript 一起完成

Shopify Theme 的功能可以寫在 Liquid template、section、block 或 snippet 中。這些功能通常會搭配 Liquid、CSS 與 JavaScript 一起完成。

例如商品加入購物車功能，就需要在 theme 中提供 product type 的 Liquid form tag，讓顧客可以把商品加入 cart。其他常見功能包括商品變體切換、數量選擇器、圖片輪播、篩選器、商品推薦、會員登入、購物車 drawer、促銷訊息與表單互動。

可以用這個方式理解：

技術	主要負責
Liquid	輸出 Shopify 資料與 HTML 結構
CSS	控制頁面樣式與 RWD 呈現
JavaScript	控制互動、事件與前台動態行為
JSON	儲存 template 結構與 Theme Editor 設定
Locale files	提供多語系翻譯文字

Shopify Theme development 的核心，就是理解這些檔案如何一起工作。

Shopify Theme Directory Structure：標準目錄結構

Shopify Theme 必須使用 Shopify 指定的目錄結構。標準 Shopify theme directory structure 如下：

.
├── assets
├── blocks
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
    └── customers
    └── metaobject

Shopify Theme 不支援任意新增其他 subdirectories。這代表你不能用一般前端專案的習慣，隨意建立 components、utils、styles、scripts 等資料夾，然後期待 Shopify Theme 自動理解。

Shopify Theme 有自己的規則。這也是新手剛接觸 Shopify theme development 時，最需要先習慣的地方。

雖然 Shopify Theme 有完整目錄結構，但實際上，只有包含 theme.liquid 的 layout 目錄是 Theme 上傳到 Shopify 的最低必要條件。不過，如果要建立可維護、可編輯、可擴充的正式 Theme，通常仍會需要完整使用 assets、config、locales、sections、snippets 與 templates。

Assets：存放 CSS、JavaScript 與圖片資源

assets 目錄存放 Shopify Theme 使用的資產檔案，包括圖片、CSS 與 JavaScript。

常見檔案例如：

assets/base.css
assets/theme.css
assets/global.js
assets/product-form.js
assets/logo.png

在 Liquid 中，可以使用 asset_url filter 來引用 theme assets。例如：

{{ 'theme.css' | asset_url | stylesheet_tag }}

非二進位的 asset files 可以透過 .liquid 副檔名使用有限 Liquid 功能，例如：

assets/theme.css.liquid
assets/global.js.liquid

這類檔案可以存取 settings object 與 Liquid filters。常見用途是根據 Theme settings 輸出 CSS 變數，或在 JavaScript 中插入部分 theme 設定。

不過實務上要小心使用 .css.liquid 與 .js.liquid。它們雖然方便，但如果過度混合邏輯，也可能讓前端資源變得不好維護。

Config：管理 Theme Settings 與設定值

config 目錄包含 Shopify Theme 的設定檔。它主要負責兩件事：

檔案	作用
`settings_schema.json`	定義 Theme Editor 中的 Theme settings 欄位
`settings_data.json`	儲存目前商店實際設定值

Theme settings 適合放全站性的設定，例如顏色、字體、按鈕樣式、版面寬度、社群連結、全站樣式選項等。

在 Liquid 中，可以透過 settings object 取得這些設定。例如：

{{ settings.color_scheme }}

需要注意的是，section 和 block 也可以有自己的 settings。這些設定會定義在各自的 section 或 block schema 中，並顯示在 Theme Editor 對應的物件上。

簡單來說，Theme settings 適合放全站設定；section settings 適合放單一區塊設定；block settings 則適合放單一項目設定。

Locales：Shopify Theme 的多語系翻譯檔

locales 目錄用來存放 theme 的翻譯檔。Locale files 可以提供 Theme Editor 介面文字、線上商店文字，以及商家可自訂的翻譯內容。

常見檔案例如：

locales/en.default.json
locales/zh-TW.json
locales/ja.json

如果你的 Shopify Theme 要支援多語系商店，locales 是非常重要的一層。它可以避免把所有文字寫死在 Liquid 裡，也讓同一套 Theme 更容易支援不同市場。

例如按鈕文字、表單提示、購物車訊息、商品狀態、錯誤訊息，都可以透過 locale files 管理。

Templates：控制不同頁面類型

templates 目錄包含 Shopify Theme 的 template files，用來控制不同頁面類型要渲染什麼內容。

常見 template 類型包括首頁、商品頁、集合頁、頁面、文章頁、部落格頁、購物車頁與搜尋頁。templates/customers 則用於 legacy customer account pages，例如登入頁與會員帳戶總覽。

Shopify Theme 不強制要求一定要有所有 templates，但如果你想渲染某一種頁面類型，就需要有對應的 template。例如要顯示 product page，就至少需要一個 product template。

Template 也可以建立多個版本，用來處理不同使用情境。例如同一間商店可以有：

templates/product.json
templates/product.preorder.json
templates/product.gift-box.json
templates/product.landing.json

這讓商家可以針對不同商品套用不同版型，而不需要建立多套 Theme。

JSON with Comments：Shopify Theme JSON 檔案的注意事項

Shopify Theme 的部分 JSON files 支援 comments 與 trailing commas。使用者可以在 config/settings_schema.json 與 schema tags 中加入 comments。

例如：

[
  {
    /* context about theme schema settings */
    "name": "theme_info",
    "theme_name": "Dawn",
    "theme_author": "Shopify",
    "theme_version": "1.0.0",
  }
]

這對 theme development 很實用，因為開發者可以在 schema 中加入說明，讓未來維護更容易。

不過，不是所有 JSON files 都會保留 comments 或 trailing commas。通常使用者不會直接編輯的檔案，不會持久保存這些內容，例如：

templates/*.json
sections/*.json
config/settings_data.json
locales/*.json

如果你使用 Assets API 抓取並解析 theme files，需要使用支援 comments 與 trailing commas 的 JSON parser。否則可能在解析 Shopify theme files 時遇到錯誤。

Blocks Directory：新版 Shopify Theme 結構中的獨立 Blocks

在 Shopify Theme directory structure 中，blocks 目錄也被列入標準目錄之一。Blocks 是可重複使用、可自訂的小型內容單位，能被加入 sections 中。

傳統上，許多 blocks 是定義在 section schema 裡；而新版架構中，獨立 blocks 讓可重複使用的內容單位有更清楚的檔案組織方式。

對開發者來說，理解 blocks 的重點不是只看它是不是獨立資料夾，而是要知道 block 的角色：它是 section 裡可以被商家新增、移除與排序的內容單位。

Shopify Theme 架構的實務理解

理解 Shopify Theme 架構時，可以用這個簡化模型：

Layout
└── Template
    └── Section
        └── Block
            └── Snippet

但實際運作會更彈性。Snippet 可以被 layout、template、section 或其他 snippet 引用；section groups 可以讓 layout 中的 header 與 footer 也具備可編輯性；assets 會影響整體樣式與互動；config 則決定商家在 Theme Editor 中能調整哪些選項。

所以 Shopify Theme 並不是單純的「頁面檔案」，而是一套前台架構系統。

對開發者來說，最重要的是分清楚每個檔案應該負責什麼：

想做的事	應該優先修改
修改全站 HTML 結構、head、header、footer	`layout/theme.liquid`、section groups
修改產品頁內容	`templates/product.json`、`sections/main-product.liquid`
新增首頁可編輯區塊	`sections/`
建立可重複使用的商品卡片	`snippets/`
修改樣式	`assets/*.css`
修改互動	`assets/*.js`
新增全站設定	`config/settings_schema.json`
新增多語系文字	`locales/*.json`

這樣拆分之後，Shopify Theme development 會清楚很多。你不需要每次都到處找檔案，而是可以依照功能責任判斷要修改哪一層。

Shopify Theme Store 的額外要求

如果你是為自己的商店開發 Theme，主要目標是功能正確、效能穩定、後台好管理，以及符合品牌設計需求。

但如果你要把 Theme 上架到 Shopify Theme Store，就需要符合 Shopify Theme Store 的額外要求。這些要求通常會涵蓋主題可自訂選項、設計風格、必要功能、使用者體驗與品質標準。

也就是說，能在自己商店運作的 Theme，不代表一定能上架 Theme Store。Theme Store Theme 需要更完整、更通用，也要能支援不同商家的使用情境。

總結：Shopify Theme Architecture 是開發與維護的基礎

Shopify Theme Architecture 的核心，是把商店前台拆成多個清楚分工的層級：layout 負責全站基底，template 控制頁面類型，sections 提供可編輯內容模組，blocks 讓內容更彈性，snippets 則用來重複使用 Liquid 程式碼。

Supporting assets 負責樣式、互動與翻譯；config files 則讓商家可以透過 Theme Editor 管理設定。這些檔案共同組成 Shopify Theme 的標準架構。

如果你想學 Shopify theme development，最重要的不是一開始就急著改程式碼，而是先理解每一層的責任。知道 layout、template、section、block、snippet、assets、config、locales 分別負責什麼，才不會改一個按鈕，結果翻遍半個 theme。

Shopify Theme 看起來像前端專案，但它有自己的規則。掌握這套架構後，無論是修改既有 Theme、建立自訂 Section、優化產品頁，或規劃完整 Shopify Theme，都會更穩、更快，也更容易維護。