Shopify Horizon 主题使用教程

Shopify Horizon 主题无需安装插件实现免邮动态提醒功能

通过 Bilibili 观看本期 Shopify 教程通过 Youtube 观看本期 Shopify 教程

本文是一篇面向 Shopify 独立站卖家或网站运营的详细教程，旨在演示如何通过自定义代码，在 Horizon 主题弹窗购物车中免费添加一个功能完善的动态免邮提醒功能。

如果你使用的是 Dawn 系列主题，可参考：第 215 期 Shopify 元对象使用示例设置动态免邮提醒

动态免邮提醒是电商网站中一个有效的转化率提升方式，它制造了一种紧迫感，有助于降低弃购率，并通过激励客户添加更多商品到购物车（鼓励凑单）而提升 AOV（平均订单价值）。

有的卖家每月支付订阅费购买第三方应用来实现此功能，这不仅带来持续的费用，还可能拖慢网站速度。本教程提供从代码复制、添加代码、主题设置的完整步骤和视频演示，帮助用户用一次性的技术投入替代长期的应用订阅费，从而节省成本、提升网站性能并获得更高的定制自由度。

使用插件实现的缺点

每个月需要支付订阅费用
拖慢 Shopify 店铺网站速度
不方便进行自由修改定制

通过主题代码实现

跟随教程复制粘贴即可实现
无需支付每月订阅费用
不依赖外部第三方脚本，纯代码加载速度更快

添加主题设置项

跟随视频教程演示，在 settings_schema.json 中搜索：

cart_features

在它所属的大括号上方添加以下内容：

{
        "type": "number",
        "id": "free_shipping_threshold",
        "label": "弹窗购物车免邮金额",
        "default": 0,
        "info": "输入希望设置的金额数字保存即可, 设置为 0 则不启用此功能"
      },

添加 Snippet 引用

一般先创建 Snippet 再进行引用，由于 Snippet 代码较多所以本教程中我将它放在最后一步。

在 header-actions.liquid 中搜索：

{% render 'cart-products' %}

在 class 带有 cart-drawer__content 的 <scroll-hint 上方添加：

{% render 'free-shipping' %}

创建 Snippet

参考视频演示，在 Snippets 文件夹创建一个文件：

free-shipping.liquid

代码如下，具体内容解析详见视频讲解：

{% liquid 
  if settings.free_shipping_threshold != 0
    assign free_shipping_amount = settings.free_shipping_threshold | times: 100
    assign cart_total = cart.total_price
    assign free_shipping_diff = free_shipping_amount | minus: cart_total
  endif
%}
{% if settings.free_shipping_threshold != 0 %}
  <style>
    .free_shipping {
      background-color: #fef8e7;
      color: #00896c;
      padding: 0.5rem 1rem;
      text-align: center;
      border-radius: 5px;
      font-size: 1.5rem;
      font-weight: 600;
    }
    .not_free_shipping {
      background-color: #fef8e7;
      color: #d0104c;
      padding: 0.5rem 1rem;
      text-align: center;
      border-radius: 5px;
      font-size: 1.5rem;
      font-weight: 600;
    }
    .free_shipping_wrapper{
      display: flex;
      width: 100%;
      flex-direction: column;
      margin-bottom: 1rem;
    }
    .free_shipping_text {
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 5px;
    }
  </style>
  <div class="free_shipping_wrapper">
    <p class="free_shipping_text{% if free_shipping_diff > 0 %} not_free_shipping{% else %} free_shipping{% endif %}">
      {% if free_shipping_diff > 0 %}
        <span>Just {{ free_shipping_diff | money }} away from free shipping!</span>
      {% elsif free_shipping_diff <= 0 %}
        <span>Enjoy Free Shipping!</span>
      {% endif %}
    </p>
  </div>
{% endif %}

设置与测试

在 Shopify 主题编辑器 ~ 模板设置 ~ 购物车，填入想要设置的免邮门槛金额，并参考下图所示，开启 添加到购物车之后自动打开购物车弹窗 选项，保存后即可在网站前台加购商品进行测试。

温馨提示

除了添加主题代码，还需在 Shopify 后台的设置 ~ 发货和配送中，实际创建对应的免运费配送规则，金额应与主题设置中对应。

自行添加主题代码的方式相比付费应用，在性能（无外部 API 调用、加载更快）、成本（一次性投入）和定制灵活性（可自由修改文案、样式、动画等）方面具有显著优势。

如果你想对样式进行修改而自己不懂代码，可以复制 Snippet 提供给 AI 工具帮你修改。

扩展版功能用法与补充提示