Liquid 模板語言入門

Liquid 是 Shopify 的模板語言。你不需要成為程序員，但懂基礎語法，能讓你解決 90% 的常見定製需求。

Liquid 的三種語法

{{ 雙花括號 }}   → 輸出變量（顯示數據）
{% 百分號 %}     → 邏輯控制（條件、循環）
{%- 帶破折號 -%}  → 同上，但去除多餘空白

例：顯示產品標題

<h1>{{ product.title }}</h1>

例：如果有折扣就顯示

{% if product.compare_at_price > product.price %}
<span class="sale-badge">特惠</span>
{% endif %}

你需要知道的 10 個常用變量

10 個不懂程序也能做的定製

定製 1：顯示免運費進度條

在購物車頁面的 cart.liquid 或相關 Section 中找到合適位置，加入：

{% assign free_shipping = 200 %}
{% assign remaining = free_shipping | minus: cart.total_price | divided_by: 100 %}
{% if cart.total_price < free_shipping | times: 100 %}
<p>再消費 <strong>¥{{ remaining }}</strong> 即可享受免費配送！</p>
<div class="progress-bar">
<div style="width: {{ cart.total_price | divided_by: free_shipping | times: 1 }}%"></div>
</div>
{% else %}
<p>🎉 恭喜！您已獲得免費配送！</p>
{% endif %}

定製 2：在產品頁顯示剩餘庫存警告

{% assign inventory = product.selected_or_first_available_variant.inventory_quantity %}
{% if inventory > 0 and inventory <= 10 %}
<p class="stock-warning">⚠️ 僅剩 {{ inventory }} 件，快搶！</p>
{% endif %}

定製 3：根據標籤顯示「新品」或「熱賣」標籤

{% if product.tags contains 'new' %}
<span class="badge badge--new">新品</span>
{% elsif product.tags contains 'bestseller' %}
<span class="badge badge--hot">熱賣</span>
{% endif %}

定製 4：顯示節省金額

{% if product.compare_at_price > product.price %}
{% assign savings = product.compare_at_price | minus: product.price | divided_by: 100 %}
<p>您節省了 <strong>¥{{ savings }}</strong></p>
{% endif %}

定製 5：限制產品描述字數（列表頁用）

{{ product.description | strip_html | truncate: 100 }}

定製 6：在 Footer 顯示當前年份（版權聲明）

<p>© {{ 'now' | date: '%Y' }} {{ shop.name }}. 版權所有。</p>

定製 7：產品圖片 Lazy Load

{% for image in product.images %}
<img
src="{{ image | img_url: '1x1' }}"
data-src="{{ image | img_url: '800x' }}"
loading="lazy"
alt="{{ image.alt | escape }}"
class="lazyload"
>
{% endfor %}

定製 8：顯示產品評分星星（搭配 Metafield）

如果你設置了 product.metafields.reviews.rating 這個 Metafield：

{% assign rating = product.metafields.reviews.rating %}
{% if rating %}
<div class="star-rating" title="{{ rating }}/5">
{% for i in (1..5) %}
{% if i <= rating %}⭐{% else %}☆{% endif %}
{% endfor %}
{{ rating }}/5
</div>
{% endif %}

定製 9：依據客戶登入狀態顯示不同內容

{% if customer %}
<p>歡迎回來，{{ customer.first_name }}！</p>
<a href="/account">查看我的訂單</a>
{% else %}
<a href="/account/login">登錄</a>
<a href="/account/register">注冊</a>
{% endif %}

定製 10：條件顯示公告欄（只在特定日期）

{% assign today = 'now' | date: '%Y-%m-%d' %}
{% if today >= '2025-11-11' and today <= '2025-11-13' %}
<div class="announcement-bar">
🎉 雙十一大促！全場滿 ¥199 免運費！
</div>
{% endif %}

如何在 Shopify 後台編輯 Liquid

路徑：線上商店 → 主題 → 編輯代碼

shopify-theme/
├── assets/        ← CSS、JS、圖片
├── config/        ← 主題設置定義
├── layout/        ← 全站外框（theme.liquid）
├── sections/      ← 可拖拽的頁面模塊
├── snippets/      ← 可重用的代碼片段
└── templates/     ← 各頁面的模板

新手建議： - 從 sections/ 開始修改（最安全，影響範圍最小） - 每次修改前先複製代碼到記事本備份 - 改一個地方，預覽確認，再改下一個

常見錯誤與排查

本章執行清單

• [ ] 打開主題代碼編輯器，找到 product.liquid
• [ ] 嘗試添加庫存警告（定製 2）
• [ ] 嘗試添加節省金額顯示（定製 4）
• [ ] 用 {{ product | json }} 在控制台查看一個產品的所有可用數據

下一節：Section 與 Metafields 進階——用拖拽和自定義欄位實現個性化。