free-shipping-thresholds

免运费门槛

概述

免运费门槛会促使客户往购物车中添加更多商品，以免支付运费——这是提升平均订单金额的高转化策略之一。关键是显示动态进度条（“再添加 $12 即可享受免运费”），并在添加商品时实时更新。大多数平台原生支持此功能，或可通过应用实现，无需编写任何代码。

何时使用此技能

• 添加免运费横幅或购物车进度条，以提高平均订单金额时
• 不同客户等级需要设置不同免运费门槛时
• 对不同门槛金额进行 A/B 测试，以找到最理想的平均订单金额时
• 希望动态显示“再添加 $X 即可解锁免运费”之类的信息时
• 免运费规则需要因配送区域（国内与国际）而异时

核心说明

步骤 1：确定平台并选择合适的工具

平台	推荐工具	原因
Shopify	内置配送设置 + Hextom Free Shipping Bar 应用	Shopify 负责处理规则；Hextom 或类似应用负责添加可见的进度条
WooCommerce	WooCommerce Shipping（内置免运费方式）+ WooCommerce Free Shipping Bar 插件	WooCommerce 原生支持免运费规则；插件负责进度条界面
BigCommerce	内置免运费促销 + 免运费进度条应用	BigCommerce 原生支持免运费门槛的促销规则
Custom / Headless	构建规则解析器 + 进度条组件	可全面控制门槛逻辑、细分群体规则和界面

步骤 2：设置免运费规则

Shopify

创建免运费费率（必须先完成）：

1. 前往 Settings → Shipping and delivery → Manage rates
2. 在配送区域下，点击 Add rate
3. 将其命名为“Free Shipping”，并将价格设为 $0.00
4. 在 Conditions 下，勾选“Only available if order meets conditions” → Based on order price → 设置最低订单金额（例如 $75）
5. 保存

添加进度条（Hextom Free Shipping Bar 应用——提供免费套餐）：

1. 从 Shopify App Store 安装 Hextom: Free Shipping Bar
2. 该应用会自动从 Shopify 设置中检测免运费门槛
3. 自定义进度条文本：“距离免运费还差 {{amount}}！”其中 {{amount}} 会动态替换
4. 通过应用的主题编辑器，将进度条放置在购物车页面和/或迷你购物车中
5. 对于分级门槛（例如，为忠诚会员设置较低门槛）：使用支持基于客户标签设置条件的 Hextom 付费套餐

替代方案——Shopify Plus：使用 Scripts 设置细分群体专属门槛：

• Shopify Scripts（仅限 Plus）允许你编写类似 Ruby 的代码，根据客户标签应用不同的配送费率
• 前往 Online Store → Scripts → Shipping，设置特定细分群体的免运费规则

WooCommerce

创建免运费方式：

1. 前往 WooCommerce → Settings → Shipping → [Your shipping zone] → Add shipping method
2. 选择 Free Shipping，然后点击 Add shipping method
3. 点击 Free Shipping 进行配置
4. 将“Free shipping requires...”设为 A minimum order amount，并输入门槛金额（例如 $75）
5. 可选：勾选 Coupon，允许免运费优惠券触发此规则
6. 保存更改

添加进度条：

• 安装 WPFactory 开发的 WooCommerce Free Shipping Bar（可在 WordPress.org 免费获取），或 Iconic WooCommerce Free Gifts（付费，包含进度条功能）
• WPFactory 插件会自动读取免运费门槛，并在购物车中显示进度条
• 在插件设置中配置进度条消息：“再添加 {{amount_remaining}}，即可享受免运费！”

按客户等级设置不同门槛：

• 安装 WooCommerce Role-Based Pricing 插件，或使用 Advanced Shipping 插件中的条件逻辑，为不同用户角色应用不同门槛
• 常见做法：创建“Wholesale”用户角色，并设置自定义免运费方式，在较低的最低订单金额时触发

BigCommerce

创建免运费促销：

1. 前往 Marketing → Promotions → Create a promotion
2. 选择促销类型 Shipping
3. 设置条件：“Cart subtotal is greater than or equal to [amount]”
4. 设置操作：“Free shipping”
5. 启用促销；如果是限时促销，还要设置开始和结束日期

添加进度条：

• 从 BigCommerce App Marketplace 安装免费免运费进度条应用（搜索“free shipping bar”）
• BigCommerce 提供 Rebolt ‑ Free Shipping Bar，可自动读取促销设置

针对不同地区设置不同方案（国内与国际）：

• 在 BigCommerce 中为不同配送区域创建单独的配送促销
• 每项促销都可以限制为特定配送区域

第 3 步：配置进度条消息和追加销售行为

无论使用哪个平台，以下消息最佳实践都适用：

1. 未达到门槛时：“再消费 $12.50，即可享受免运费！”——始终显示具体金额，而不是百分比
2. **接近门槛时（还差 $5–$15）：**考虑推荐能补足差额的商品——“这些热门商品可以满足条件：”（许多应用都支持此功能）
3. 达到门槛时：“您已解锁免运费！”并使用庆祝式样式——绿色、对勾图标
4. 在购物车页面和迷你购物车抽屉中都显示进度条——在迷你购物车中看到进度条的客户，其平均订单金额（AOV）更高

自定义 / 无头架构

// Server-side: resolve free shipping status for a cart
function resolveShippingThreshold(params: {
  cartSubtotalCents: number;
  shippingCountry: string;
  customerTags: string[];
  thresholdRules: ShippingThresholdRule[];
}): { isFree: boolean; thresholdCents: number; amountNeededCents: number; progressPct: number } {
  // Find the highest-priority matching rule
  const rule = params.thresholdRules
    .filter(r => r.isActive)
    .filter(r => !r.countries?.length || r.countries.includes(params.shippingCountry))
    .filter(r => !r.customerTags?.length || r.customerTags.some(t => params.customerTags.includes(t)))
    .sort((a, b) => b.priority - a.priority)[0];

  if (!rule) return { isFree: false, thresholdCents: 0, amountNeededCents: 0, progressPct: 0 };

  const isFree = params.cartSubtotalCents >= rule.thresholdCents;
  const amountNeededCents = Math.max(0, rule.thresholdCents - params.cartSubtotalCents);
  const progressPct = Math.min(100, Math.round((params.cartSubtotalCents / rule.thresholdCents) * 100));

  return { isFree, thresholdCents: rule.thresholdCents, amountNeededCents, progressPct };
}

// React component for the progress bar
function FreeShippingBar({ amountNeededCents, progressPct, isFree }: {
  amountNeededCents: number; progressPct: number; isFree: boolean;
}) {
  const formatted = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
    .format(amountNeededCents / 100);

  return (
    <div className="free-shipping-bar">
      {isFree ? (
        <p>You've unlocked FREE shipping!</p>
      ) : (
        <p>Add <strong>{formatted}</strong> more for FREE shipping</p>
      )}
      <div className="progress-track">
        <div className="progress-fill" style={{ width: `${progressPct}%` }} />
      </div>
    </div>
  );
}

第 4 步：设置合适的门槛金额

门槛应高于平均订单金额（AOV），但也要容易达到：

• **经验法则：**将免运费门槛设为当前 AOV 的 20–30% 以上
• **测试经济效益：**如果平均运费为 $8，毛利率为 40%，则追加销售带来的增量收入需要覆盖 $8 的运费
• **进行 A/B 测试：**Google Optimize（现为 GA4 Experiments）等工具，或 Shopify 内置的主题 A/B 测试功能，都可以用来测试不同的门槛金额

最佳实践

• 在购物车页面和迷你购物车中都显示进度条——在迷你购物车中看到进度条的客户，比只在完整结账页面看到进度条的客户更常添加商品
• 实时更新——添加商品后，进度条应立即更新；过时的数值会损害信任
• 默认提供免运费优惠，而不是优惠券代码——要求输入代码会增加操作阻力；自动应用门槛的转化效果更好
• 默认不要对国际订单提供免运费——国际运费可能超过全部利润；从一开始就设置地理区域限制
• 在页眉或全站横幅中说明门槛——顶部栏显示“订单满 $75 免运费”，可让客户在开始购物前了解相关条件

常见问题

问题	解决方案
进度条显示“免运费”，但结账时仍收取运费	仔细检查平台的运费设置中是否启用了免运费费率，并确认没有其他规则覆盖该设置
优惠券使购物车金额低于门槛后，仍触发免运费	在 WooCommerce 中，将免运费方式设置为折扣后达到“最低订单金额”要求；在 Shopify 中，确保运费费率使用折扣后的商品小计
国际客户也能看到免运费进度条	将运费费率限定为仅适用于国内区域；将应用配置为仅向国内访客显示进度条
进度条显示 100%，但订单金额低于门槛	确保进度计算使用与运费规则相同的商品小计（折扣后且不包括不符合条件的商品）

相关技能

• @shipping-rate-calculator
• @coupon-management
• @discount-engine
• @loyalty-points-system
• @checkout-flow-optimization