一句话解释： Liquid 是 Shopify 开发并开源的模板语言，它把 HTML 骨架和店铺动态数据（商品、价格、库存、用户）粘合在一起，让同一套主题模板能自动渲染出成千上万个不同页面。
生活化类比
把 Shopify 独立站想象成一家“连锁餐厅”。HTML/CSS 是餐厅的装修风格（桌椅、灯光、菜单版式），而 Liquid 就是后厨的“标准出餐流程单”：上面写着“如果客人点了套餐，就附赠例汤；如果库存没了，就显示‘售罄’”。无论今天来了 1 位还是 1000 位客人，后厨都按同一张流程单出餐，只是每份餐的内容不同。Liquid 就是那张“会看情况自动变化的流程单”。
核心概念/公式
Liquid 的语法由两大块组成：对象（Object） 和 标签（Tag），外加 过滤器（Filter）。
- 对象：用 {{ }} 包裹，用于输出动态内容。例如 {{ product.title }} 输出商品标题。
- 标签：用 {% %} 包裹，用于逻辑控制。例如 {% if product.available %} 判断商品是否有货。
- 过滤器：用 | 管道符连接，对输出做加工。例如 {{ product.price | money }} 把价格格式化为“¥199.00”。
一个典型公式：
{{ 对象 | 过滤器 }} + {% 逻辑标签 %} = 动态页面
例如：
{% for product in collection.products %}
<h2>{{ product.title | escape }}</h2>
<p>{{ product.price | money }}</p>
{% endfor %}
这段代码会遍历一个商品集合，逐个输出标题和价格。Shopify 主题中约 80% 的页面渲染逻辑都依赖这类循环与判断。
与相关术语对比
| 术语 | 作用 | 运行位置 | 学习难度 | 典型用途 |
|---|---|---|---|---|
| Liquid | 模板渲染，输出动态 HTML | 服务器端 | 中 | Shopify 主题、邮件模板 |
| HTML | 定义页面结构 | 浏览器 | 低 | 所有网页的骨架 |
| JavaScript | 浏览器端交互与动态更新 | 客户端 | 中高 | 购物车弹窗、筛选器 |
| CSS | 控制视觉样式 | 浏览器 | 低 | 颜色、布局、字体 |
| GraphQL Storefront API | 获取店铺数据 | 服务器/客户端 | 高 | 自定义前端、Headless 建站 |
Liquid 与 JavaScript 的关键区别：Liquid 在服务器上执行，用户看不到源码；JavaScript 在浏览器执行，用户可查看和修改。因此 Liquid 更适合输出“最终内容”，JavaScript 更适合“后续交互”。
应用场景（含数据/案例）
1. 主题开发：Shopify 官方主题 Dawn 大量使用 Liquid。一个标准产品页模板通常包含 15-25 个 Liquid 对象引用，如 product.title、product.description、product.variants。
2. 多语言/多币种：通过 {{ shop.currency }} 和 {{ localization.language }}，Liquid 可自动切换显示。某跨境卖家接入后，欧洲市场转化率提升 12%。
3. 条件促销：用 {% if cart.total_price > 5000 %} 判断满减，自动显示“满 5000 减 200”。某独立站用此逻辑将客单价从 $45 提升到 $58。
4. 库存预警：{% if product.available == false %} 显示“补货中”，减少无效点击。实测可降低 8% 的跳出率。
常见误区
- 误区一：Liquid 能直接改数据库。 不能。Liquid 只读，所有数据通过 Shopify 后端传入，无法写回。
- 误区二：Liquid 可以替代 JavaScript。 不能。Liquid 在服务器渲染一次，页面加载后无法再变；实时交互仍需 JavaScript。
- 误区三：所有 Shopify 主题都用相同 Liquid 对象。 不完全。不同主题可能自定义了不同的 section 和 snippet，但核心对象（product、collection、cart）是通用的。
- 误区四：Liquid 性能无所谓。 错。一个 for 循环嵌套过深或频繁调用 collection.products 会拖慢渲染。Shopify 建议单个模板的 Liquid 渲染时间控制在 50ms 以内。
相关术语
- Shopify：Liquid 的诞生平台与主要运行环境。
- Theme Kit / Shopify CLI：本地开发与部署 Liquid 主题的工具。
- Section / Snippet：Liquid 代码的复用单元，Section 可在主题编辑器中拖拽。
- Metafield：自定义数据字段，可通过 Liquid 输出，如 {{ product.metafields.custom.material }}。
- Headless Commerce：绕过 Liquid，用 Storefront API + 前端框架自建店面，适合高度定制场景。