Back to Details

shopify-liquid

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shopify Liquid Skill

Shopify Liquid 使用指南

Liquid is the template language used by Shopify to load dynamic content on storefronts.
Liquid是Shopify用于在店铺前端加载动态内容的模板语言。

1. Core Syntax

1. 核心语法

  • Output: 
    {{ ... }}
    - Prints content to the page.
  • Tags: 
    {% ... %}
    - Logic (if, for, assign).
  • Filters: 
    {{ value | filter }}
    - Modifies output.
  • 输出：
    {{ ... }}
    - 向页面打印内容。
  • 标签：
    {% ... %}
    - 实现逻辑控制（如if、for、assign）。
  • 过滤器：
    {{ value | filter }}
    - 修改输出内容。

2. Theme App Extensions (App Blocks)

2. 主题应用扩展（App Blocks）

Modern apps inject code into themes using App Blocks, avoiding direct legacy code edits.
现代应用通过App Blocks将代码注入到主题中，避免直接修改旧版代码。

schema
Tag

schema
标签

Defines settings available in the Theme Editor.
liquid
{% schema %}
{
  "name": "Star Rating",
  "target": "section",
  "settings": [
    {
      "type": "color",
      "id": "star_color",
      "label": "Star Color",
      "default": "#ff0000"
    }
  ]
}
{% endschema %}
定义主题编辑器中可用的设置项。
liquid
{% schema %}
{
  "name": "Star Rating",
  "target": "section",
  "settings": [
    {
      "type": "color",
      "id": "star_color",
      "label": "Star Color",
      "default": "#ff0000"
    }
  ]
}
{% endschema %}

Accessing Settings

访问设置项

Use 
block.settings.id
to access values defined in schema.
liquid
<div style="color: {{ block.settings.star_color }}">
  ★★★★★
</div>
使用
block.settings.id
来访问schema中定义的值。
liquid
<div style="color: {{ block.settings.star_color }}">
  ★★★★★
</div>

App Embed Blocks

App Embed Blocks

Scripts that run globally (e.g., analytics, chat bubbles).
liquid
{% schema %}
{
  "name": "Chat Bubble",
  "target": "body",
  "javascript": "chat.js",
  "settings": []
}
{% endschema %}
可全局运行的脚本（如分析工具、聊天气泡）。
liquid
{% schema %}
{
  "name": "Chat Bubble",
  "target": "body",
  "javascript": "chat.js",
  "settings": []
}
{% endschema %}

3. Common Objects

3. 常用对象

  • product
    : 
    • {{ product.title }}
    • {{ product.variants.first.id }}
    • {{ product.featured_image | image_url: width: 400 }}
  • cart
    : 
    • {{ cart.item_count }}
    • {{ cart.currency.iso_code }}
  • customer
    : 
    • {% if customer %}
      checks if logged in.
  • shop
    : 
    • {{ shop.name }}
    • {{ shop.permanent_domain }}
  • product
    : 
    • {{ product.title }}
      - 产品标题
    • {{ product.variants.first.id }}
      - 首个产品变体ID
    • {{ product.featured_image | image_url: width: 400 }}
      - 产品主图（指定宽度400）
  • cart
    : 
    • {{ cart.item_count }}
      - 购物车商品数量
    • {{ cart.currency.iso_code }}
      - 购物车货币ISO代码
  • customer
    : 
    • {% if customer %}
      检查用户是否已登录
  • shop
    : 
    • {{ shop.name }}
      - 店铺名称
    • {{ shop.permanent_domain }}
      - 店铺永久域名

4. Useful Filters

4. 实用过滤器

  • Money: 
    {{ product.price | money }}
    -> 
    $10.00
  • Asset URL: 
    {{ 'style.css' | asset_url }}
    (Reference assets in 
    assets/
    folder)
  • JSON: 
    {{ product | json }}
    (Useful for passing data to JS)
  • 货币格式化：
    {{ product.price | money }}
    -> 
    $10.00
  • 资源链接：
    {{ 'style.css' | asset_url }}
    （引用
    assets/
    文件夹中的资源）
  • JSON转换：
    {{ product | json }}
    （用于向JavaScript传递数据）

5. Using with JavaScript

5. 与JavaScript结合使用

Pass Liquid data to JavaScript using data attributes or global variables.
Pattern: Data Attributes (Preferred)
liquid
<div id="my-app" data-product-id="{{ product.id }}" data-shop="{{ shop.permanent_domain }}"></div>

<script>
  const app = document.getElementById('my-app');
  const productId = app.dataset.productId;
</script>
Pattern: Global Object (Legacy)
liquid
<script>
  window.ShopifyData = {
    product: {{ product | json }},
    cart: {{ cart | json }}
  };
</script>
可以通过数据属性或全局变量将Liquid数据传递给JavaScript。
推荐模式：数据属性
liquid
<div id="my-app" data-product-id="{{ product.id }}" data-shop="{{ shop.permanent_domain }}"></div>

<script>
  const app = document.getElementById('my-app');
  const productId = app.dataset.productId;
</script>
传统模式：全局对象
liquid
<script>
  window.ShopifyData = {
    product: {{ product | json }},
    cart: {{ cart | json }}
  };
</script>

6. App Proxies

6. 应用代理

When the request comes from an App Proxy, 
liquid
renders the response before sending it to the layout.
  • If you return 
    Content-Type: application/liquid
    , Shopify will parse the Liquid in your response.
当请求来自App Proxy时，
liquid
会在将响应发送到布局之前先渲染它。
  • 如果返回
    Content-Type: application/liquid
    ，Shopify会解析响应中的Liquid代码。