📜 一、Liquid模板語言（核心基礎）

1. 語法結構
   ? 輸出變量：{{ product.title }} 動態顯示商品標題。

   ? 邏輯控制：{% if product.available %}…{% endif %} 條件渲染。

   ? 循環遍歷：{% for item in collection.products %} 處理商品列表。

   ? 空白符控制：{%- … -%} 消除渲染后多余空格。

2. 對象與數據
   ? 常用對象：product（商品）、collection（分類）、cart（購物車）、customer（用戶）。

   ? 過濾器：{{ price | money }} 格式化價格，{{ content | truncatewords: 30 }} 截斷文本。

🎨 二、前端技術棧（HTML/CSS/JavaScript）

1. HTML與Liquid融合
   ? 在.liquid文件中混合HTML和Liquid標簽，實現動態頁面。

   ? 示例：通過{{ link.url }} 動態生成導航菜單。

2. CSS模塊化與響應式
   ? CSS變量：定義主題色等全局變量（如 --primary-color: #FF5722;）。

   ? 響應式設計：媒體查詢適配移動端（如 @media (max-width: 768px)）。

   ? 布局方式：流式布局（Flexbox/Grid）結合絕對定位。

3. JavaScript交互
   ? 原生JS優先：避免框架依賴，直接操作DOM（如 document.querySelector）。

   ? LocalStorage應用：存儲用戶臨時數據（如購物車狀態）。

   ? 動畫效果：CSS動畫（@keyframes）或JS實現淡入/滑動等交互。

🧩 三、Shopify主題架構（模塊化開發）

1. 核心目錄結構
   ? sections/：可拖拽區塊（如輪播圖、商品推薦）。

   ? snippets/：復用組件（按鈕、價格卡片）。

   ? templates/：頁面模板（商品頁 product.liquid、首頁 index.liquid）。

2. Online Store 2.0特性
   ? 區塊動態配置：通過Schema定義設置項，允許商家后臺自定義區塊內容。

   示例：
   {% schema %}
   {
   “name”: “自定義橫幅”,
   “settings”: [{ “type”: “color”, “id”: “bg_color”, “label”: “背景色” }]
   }
   {% endschema %}

?? 四、開發工具與流程

1. 調試工具
   ? 瀏覽器開發者工具：檢查Liquid渲染結果及網絡請求。

   ? {{ variable | json }}：輸出對象結構輔助調試。

2. 版本控制與部署
   ? Shopify CLI：本地開發、主題上傳和同步。

   ? Git集成：管理代碼版本，支持團隊協作。

🚀 五、性能優化與最佳實踐

1. 加載速度優化
   ? 圖片懶加載（loading=“lazy”）。

   ? 減少第三方腳本阻塞渲染。

2. SEO友好設計
   ? 語義化HTML標簽（<h1>~<h6>）。

   ? 動態生成 title 與 meta 描述（{{ page.title }}）。

3. 安全實踐
   ? 避免XSS攻擊：對用戶輸入內容轉義（{{ user_input | escape }}）。

六、常見場景示例

? 商品折扣標：
{% if product.compare_at_price > product.price %}
限時折扣！
{% endif %}

? 多語言支持：

結合 {{ ‘greeting’ | t }} 與Shopify多語言插件。