2026 電商趨勢報告:AI 搜尋時代的品牌致勝策略索取報告

Shopify 開發· 2026年7月15日

Liquid 開發前要懂什麼?

Shopify Liquid 負責把商店資料轉成 storefront HTML。這篇整理 object、tag、filter、scope、schema 與效能問題,也說明何時應交給 JavaScript、App 或 API。

Tenten 編輯部 · 電商洞察

Liquid 是 Shopify Theme 的模板語言。伺服器會把商品、集合、購物車和商店設定等資料交給 Liquid,渲染出送到瀏覽器的 HTML。它適合組合內容和控制呈現,不適合承擔資料庫、長時間運算或需要隱密憑證的外部 API 工作。

開發前先分清資料從哪裡來、在哪一層處理。把所有需求都寫進 Liquid,短期可能能顯示,長期會遇到效能、測試和權限問題。

Object 是可讀取的商店資料

Liquid object 以 productcollectioncartcustomersection 等形式提供資料。可用欄位依 template 和情境而異,不能假設任何檔案都能取得目前商品。先查 Liquid reference,確認 object 是否存在、回傳型別和限制。

輸出文字時要考慮 escaping、空值和在地化。商品 metafield 也應按型別讀取,不要把 structured value 當成任意字串拼接。

Tag 控制流程,filter 轉換輸出

ifforassigncapturerender 等 tag 負責流程;filter 則將值轉成金額、網址、圖片或文字格式。複雜條件可先拆成有名稱的變數,降低巢狀判斷。價格與翻譯優先使用平台 filter 和 locale 檔,不要自行組幣別符號或把顧客文字寫死。

Liquid 會容忍部分未定義值,畫面可能只是不顯示,未必立即報錯。因此空資料和錯誤資料都要成為測試案例。

Scope 會影響變數能否取得

透過 render 呼叫 snippet 時,snippet 有自己的 scope,只能使用傳入的參數和可用全域 object。這種隔離能降低檔案互相改動變數的風險。請明確傳入所需資料,例如 product、section settings 或 class,而非依賴難追蹤的外部狀態。

變數名稱要表達資料角色。item 在三層迴圈中很快會失去意義;使用 featuredProductoptionValue 等名稱,除錯和 code review 會更容易。

Sections 和 blocks 連接編輯器

section 檔案中的 {% schema %} 定義名稱、settings、blocks、presets 與限制。schema 是營運者看到的介面,也是一份內容模型。欄位名稱、help text、預設值和最大 block 數都會影響日常使用。

Liquid 輸出要處理 block 順序與 block.shopify_attributes,讓 Theme editor 能正確定位。只追求前台畫面,忽略 editor 行為,會讓內容團隊難以維護。

效能問題常來自重複工作

深層迴圈、重複排序、大型 collection 存取和不必要的 snippet 呼叫,會增加伺服器渲染成本。圖片若沒有指定合適寬度與 sizes,瀏覽器也會下載過大資源。Shopify 的 Theme 效能指南建議使用 Theme Inspector、Theme Check、responsive images,並減少 JavaScript。

不要用 Liquid 產生大量隱藏 HTML,再靠 JavaScript 決定顯示哪一份。能在伺服器判斷的內容先縮減輸出,互動部分再做 progressive enhancement。

知道 Liquid 的邊界

需要保存自訂資料、接收 webhook、定時同步或安全呼叫外部服務時,應使用 App backend。需要改變折扣、付款或履約規則時,先檢查 Shopify Functions 與官方 extension 能力。瀏覽器端即時互動可用 JavaScript,但敏感金鑰不能送到前台。

開發完成後執行 Theme Check、格式檢查與關鍵頁型測試,並在 preview Theme 驗證 editor。再把 object、metafield、App 與外部系統的責任畫成一張資料圖。若既有 Theme 已累積大量難以追蹤的 Liquid,可先依 Theme 客製指南整理改動層級,再決定重構或換版。

想把這些方法用在你的品牌上?

預約免費諮詢