Shopify Liquid 简明指南

Liquid 是 Shopify 的模板引擎，负责将后端商店数据呈现至前端。掌握 Liquid 基础后，商家无需依赖开发者即可解锁更多店铺自定义功能。

Liquid 充当了商店内容与展示方式之间的桥梁。每个页面或部分的模板均位于 .liquid 后缀的文件中，例如 main-product.liquid 即包含产品模板。

Shopify 按功能对文件进行分类：“sections”文件夹包含定义网站整体部分（如页眉、产品画廊）的文件；“snippets”文件夹则适用于按钮等小型组件或特定设计元素。

片段可嵌套于部分文件中。例如，在片段文件中创建自定义按钮并引入至部分文件夹时，只需在产品文件的对应位置添加 {% render ‘snippet_name’ %} 即可调用 “snippet_name.liquid”。

语法

Liquid 通过特定的术语和短语（即语法）运行。

变量

变量用于表示动态信息。Liquid 使用双花括号 {{ }} 提取变量内容，例如 {{ product.title }} 可动态显示产品标题。

对象

对象是数据的集合，常见示例包括 product、collection 和 customer。

• product：存储特定产品的所有信息（标题、ID、描述、价格等）。要显示产品价格，需创建变量 {{ product.price }}，其中 product 为对象，price 为属性。Shopify 官方文档提供了完整的 product 对象属性列表。
• collection：代表一组产品（如某个类别）。可从分配给集合的每个产品中提取信息，或获取标题、描述及产品数量等。详见 Shopify 的 collection 属性列表。
• customer：包含已登录用户的信息（姓名、邮箱、地址、营销同意情况及订单偏好等）。详见所有 customer 属性列表。

标签

标签通过“控制流”和“迭代”两种类型为 Liquid 代码添加逻辑。

控制流标签驱动条件逻辑，例如 if/else 语句：

{% if product.available %} This product is in stock! {% else %} Sorry, this product is out of stock. {% endif %}

迭代标签用于重复执行操作，例如遍历集合中的产品：

{% for product in collection.products %} {{ product.title }} {% endfor %}

过滤器

过滤器用于转换 Liquid 检索到的数据。例如：

• {{ product.title | upcase }}：以大写字母显示产品标题。
• {{ product.price | times: 1.2 }}：将价格提高 20%。

自定义消息示例

以下是一个实际应用案例：根据商品库存状态，在产品标题下方显示不同的自定义消息。

操作步骤如下：

1. 进入 Shopify 管理后台，导航至 在线商店 > 主题 > 操作（左侧三点按钮…）> 编辑代码。
2. 在 sections 文件夹中找到并打开 main-product.liquid 文件。
3. 使用 Ctrl + F 搜索 {%- when ‘title’ -%} 定位标题区域。

将光标置于关闭标签 /div 下方，添加以下代码：

{% if product.available %} <p style="color: green;">This product is available! Get it while stocks last!</p> {% else %} <p style="color: red;">Sorry, this product is currently out of stock.</p> {% endif %}

保存更改并预览商店。在此示例中，商品有货时顾客将看到绿色提示，缺货时则显示红色提示。

入门指南

实验与测试是学习的最佳途径。

• 备份主题：修改前务必备份。在管理后台“主题”部分点击 操作 > 复制。
• 使用预览模式：Shopify 允许在上线前预览更改效果。
• 从小处着手：建议从细微的更改开始尝试。

获取更多 Liquid 学习资源：

• Shopify 官方文档：涵盖所有 Liquid 相关内容。
• Shopify 开发者速查表：便于快速查阅参考。
• Shopify 学院免费课程：系统化学习平台。
• Stack Overflow Shopify 社区：故障排除与经验交流。
• Liquid for Designers：GitHub 上的 Wiki 风格指南。