Liquid编程进阶

摘要

22 Liquid编程进阶

2026年8月11日|Shopi8

2 分钟阅读

Shopify Shopify教程

先判断问题出现在哪里

不懂 Liquid，你只能受限于主题的死板框架。掌握 Liquid，你能直接调用 Shopify 数据库里的任何字段，把静态页面变成千人千面的动态营销机器。

实战步骤

步骤 1：开发带倒计时的自定义促销 Section

不要花每个月 $19 去买倒计时插件，自己写一个 Section，速度快 10 倍且完全免费。

操作路径：Shopify后台 -> 在线商店 -> 主题 -> 编辑代码 -> sections -> 添加新 section (命名为 custom-promo-banner.liquid)

{% # 1. 定义 Schema 让商家可以在后台配置 %}
{% schema %}
{
  "name": "促销倒计时横幅",
  "settings": [
    {
      "type": "text",
      "id": "promo_text",
      "label": "促销文案",
      "default": "Flash Sale! 20% OFF ends in:"
    },
    {
      "type": "text",
      "id": "end_date",
      "label": "结束时间 (格式: YYYY-MM-DD HH:MM)",
      "default": "2026-12-31 23:59"
    }
  ],
  "presets": [{"name": "促销倒计时横幅"}]
}
{% endschema %}

{% # 2. 渲染 HTML 结构 %}
<div class="custom-promo-banner" style="background: #ef4444; color: white; text-align: center; padding: 10px;">
  <span>{{ section.settings.promo_text }}</span>
  <strong id="countdown-timer-{{ section.id }}" data-end="{{ section.settings.end_date }}"></strong>
</div>

{% # 3. 注入倒计时 JS 逻辑 %}
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const timerEl = document.getElementById('countdown-timer-{{ section.id }}');
    const endDate = new Date(timerEl.getAttribute('data-end')).getTime();
    
    const x = setInterval(function() {
      const now = new Date().getTime();
      const distance = endDate - now;
      if (distance < 0) {
        clearInterval(x);
        timerEl.innerHTML = "EXPIRED";
        return;
      }
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
      timerEl.innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
    }, 1000);
  });
</script>

步骤 2：利用 Liquid 过滤器 (Filters) 动态处理数据

不要在后台手动算折扣价，让系统自动算。

操作路径：在 product.liquid 或 product-card.liquid 中使用

{% # 计算并显示动态折扣百分比 %}
{% if product.compare_at_price > product.price %}
  {% assign discount_amount = product.compare_at_price | minus: product.price %}
  {% assign discount_percent = discount_amount | times: 100.0 | divided_by: product.compare_at_price | round %}
  
  <span class="badge-sale" style="background: red; color: white;">
    Save {{ discount_percent }}% ({{ discount_amount | money }})
  </span>
{% endif %}

步骤 3：使用 `paginate` 标签优化海量数据加载

如果一个集合有 500 个产品，一次性加载会让页面直接卡死。

操作路径：在 collection.liquid 中使用分页

{% # 严格限制每页只加载 24 个产品 %}
{% paginate collection.products by 24 %}
  <div class="product-grid">
    {% for product in collection.products %}
      {% render 'product-card', product: product %}
    {% endfor %}
  </div>
  
  {% # 渲染底部分页按钮 %}
  {% if paginate.pages > 1 %}
    {{ paginate | default_pagination }}
  {% endif %}
{% endpaginate %}

常见误区与处理方法

误区一：在 `for` 循环中滥用 `assign` 导致内存溢出

在遍历 1000 个订单或客户数据时，在循环内部疯狂定义新变量（assign），会导致 Shopify 服务器渲染超时（Liquid Error: Memory limits exceeded），页面直接白屏报错。

规避方法：尽量在循环外部定义好变量。如果必须在循环内过滤数据，优先使用 where 过滤器直接在数组层面筛选，而不是用 for + if 逐个判断。例如：{% assign available_products = collection.products | where: "available", true %}。

误区二：直接修改主题核心文件，导致无法升级

为了加个小功能，直接在 theme.liquid 或 global.js 里乱改一通。半年后主题出了修复安全漏洞的新版本，你一升级，所有自定义代码全部被覆盖清空。

规避方法：绝对不要直接修改主题自带的核心文件！ 必须使用 自定义 Section、Snippets（代码片段），或者在后台主题编辑器中通过 Custom CSS / Custom Liquid 区块 注入代码。这样即使主题升级，你的自定义模块也能无损迁移。

FAQ