Free Shipping Thresholds

Free Shipping Thresholds

Overview

A free shipping threshold motivates customers to add more to their cart to avoid paying for shipping — one of the highest-converting tactics for increasing average order value. The key is showing a dynamic progress bar ("Add $12 more for free shipping") that updates as items are added. Most platforms support this natively or via an app without writing any code.

When to Use This Skill

• When adding a free shipping banner or cart progress bar to increase average order value
• When different customer tiers should have different free shipping thresholds
• When A/B testing different threshold amounts to find the AOV sweet spot
• When you want to surface "add $X more to unlock free shipping" messages dynamically
• When free shipping rules should vary by shipping zone (domestic vs. international)

Core Instructions

Step 1: Determine your platform and choose the right tool

Step 2: Set up the free shipping rule

Shopify

Create the free shipping rate (required first): 1. Go to Settings → Shipping and delivery → Manage rates 2. Under your shipping zone, click Add rate 3. Name it "Free Shipping" and set the price to $0.00 4. Under Conditions, check "Only available if order meets conditions" → Based on order price → set the minimum order price (e.g., $75) 5. Save

Add the progress bar (Hextom Free Shipping Bar app — free tier available): 1. Install Hextom: Free Shipping Bar from the Shopify App Store 2. The app automatically detects your free shipping threshold from Shopify settings 3. Customize the bar text: "You're {{amount}} away from free shipping!" where {{amount}} is replaced dynamically 4. Place the bar on cart pages and/or the mini-cart via the app's theme editor 5. For tiered thresholds (e.g., lower threshold for loyalty members): use the paid tier of Hextom which supports customer-tag-based conditions

Alternative — Shopify Plus: use Scripts for per-segment thresholds:

• Shopify Scripts (Plus only) let you write Ruby-like code to apply different shipping rates based on customer tags
• Go to Online Store → Scripts → Shipping to set up segment-specific free shipping rules

WooCommerce

Create the free shipping method: 1. Go to WooCommerce → Settings → Shipping → [Your shipping zone] → Add shipping method 2. Select Free Shipping and click Add shipping method 3. Click on Free Shipping to configure it 4. Set "Free shipping requires..." to A minimum order amount and enter the threshold (e.g., $75) 5. Optionally check Coupon to also allow free shipping coupons to trigger this rule 6. Save changes

Add the progress bar:

• Install WooCommerce Free Shipping Bar by WPFactory (free on WordPress.org) or Iconic WooCommerce Free Gifts (paid, with bar feature)
• The WPFactory plugin automatically reads your free shipping threshold and shows the bar in the cart
• Configure the bar message in the plugin settings: "Add {{amount_remaining}} more to get free shipping!"

For customer-tier-based thresholds:

• Install the WooCommerce Role-Based Pricing plugin or use conditional logic in the Advanced Shipping plugin to apply different thresholds to different user roles
• A common approach: create a "Wholesale" user role with a custom free shipping method that triggers at a lower minimum order

BigCommerce

Create the free shipping promotion: 1. Go to Marketing → Promotions → Create a promotion 2. Choose Shipping promotion type 3. Set condition: "Cart subtotal is greater than or equal to [amount]" 4. Set action: "Free shipping" 5. Enable the promotion and set start/end dates if it's temporary

Add the progress bar:

• Install a free shipping bar app from the BigCommerce App Marketplace (search "free shipping bar")
• Rebolt ‑ Free Shipping Bar is available for BigCommerce and reads your promotion settings automatically

For geographic variation (domestic vs. international):

• Create separate shipping promotions for different shipping zones in BigCommerce
• Each promotion can be restricted to specific shipping zones

Step 3: Configure the progress bar message and upsell behavior

Regardless of platform, these messaging best practices apply:

1. Before threshold: "Add $12.50 more for FREE shipping!" — always show the specific dollar amount, not a percentage 2. Just before threshold ($5–$15 away): Consider showing product suggestions that fill the gap — "These popular items could qualify you:" (many apps support this) 3. At threshold: "You've unlocked FREE shipping!" with a congratulatory style — green color, checkmark icon 4. Place the bar on both the cart page and mini-cart drawer — customers who see it in the mini-cart have higher AOV

Custom / Headless

// 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>
  );
}

Step 4: Set the right threshold amount

The threshold should be above your average order value (AOV) but achievable:

• Rule of thumb: Set the free shipping threshold at 20–30% above your current AOV
• Test the economics: If your average shipping cost is $8 and your gross margin is 40%, you need the incremental revenue from the upsell to cover the $8 shipping cost
• A/B test: Tools like Google Optimize (now GA4 Experiments) or Shopify's built-in theme A/B testing let you test different threshold amounts

Best Practices

• Show the progress bar on both the cart page and the mini-cart — customers who see the progress bar in the mini-cart add items more frequently than those who only see it at full checkout
• Update in real time — the bar should update immediately when items are added; stale values erode trust
• Use free shipping as the default reward, not a coupon code — requiring a code adds friction; automatic thresholds convert better
• Don't apply free shipping to international orders by default — international shipping costs can exceed your entire margin; set geographic restrictions from day one
• Communicate the threshold in the header/sitewide banner — "Free shipping on orders over $75" in the top bar sets expectations before customers even start shopping

Common Pitfalls

Related Skills

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

Cart Shipping Progress Feature

Problem Description

Velox Shop's data team has found that customers who can see how close they are to earning free shipping add significantly more items to their cart before checking out. The product team wants to add a real-time shipping progress indicator to the storefront — both on the main cart page and in the slide-out mini-cart drawer — so customers always know how much more they need to spend.

The feature must reflect the current cart state immediately whenever items are added or removed; stale progress information that lingers after a cart change has been identified as a conversion killer in prior A/B tests.

You have been asked to build two things:

1. A backend route that the frontend can call to get the current shipping status for the active cart session. 2. A frontend React component that consumes the response and renders the progress indicator in three distinct visual states: no free shipping available, partway to the threshold, and threshold reached.

The designer has provided the following UI copy requirements:

• When the threshold has been reached: communicate that free shipping has been unlocked.
• When still working toward the threshold: tell the customer how much more they need to add, with the currency amount prominently displayed.
• When free shipping is not offered at all for this customer/zone combination: show nothing.

The designer also wants the progress bar fill to animate smoothly as the percentage changes.

Output Specification

Produce the following files:

• server/routes/cart.ts (or .js) — the backend route handler for the shipping status endpoint. Assume helper functions getCart(sessionId), getCustomerSegments(userId), inferZoneFromIP(ip), and resolveShippingRule(subtotal, zone, segments) already exist and can be imported; stub them if needed.
• components/FreeShippingProgress.tsx (or .jsx) — the React component that accepts a shipping status object and renders the progress bar.
• components/FreeShippingProgress.css — the stylesheet for the component.
• INTEGRATION.md — a short note (max 10 lines) describing where in the storefront this component should be rendered.

Shipping Rule Engine

Problem Description

Volta Commerce is a mid-size online retailer that currently hard-codes a single $75 free-shipping threshold for all customers. The engineering team has been asked to replace this with a flexible rule engine that supports different thresholds for different customer tiers and shipping destinations, and can accommodate temporary promotional thresholds during sales events — all without shipping a code change every time a rule changes.

The business requirements are:

• Gold and Platinum loyalty members shipping within the US qualify for free shipping at $49+.
• Standard US customers qualify for free shipping at $75+.
• International customers (any zone not matched by a more specific rule) never qualify for free shipping via the rule engine.
• Rules can be scheduled to activate and deactivate on specific dates (for holiday promotions, etc.).
• When multiple rules match a customer's cart, the rule with the highest priority takes effect.

You have been asked to build a TypeScript module that models these rules and provides a function to determine, given a cart subtotal, a shipping zone, and a customer's segment memberships, whether the cart qualifies for free shipping and — if not — how much more the customer needs to spend.

Output Specification

Produce a single TypeScript file shipping-rules.ts that contains:

1. The ShippingRule type/interface definition. 2. A hardcoded array of at least the three rules described above (SHIPPING_RULES or similar). 3. A function that accepts a cart subtotal, a shipping zone string, and an array of customer segment strings, and returns an object indicating whether shipping is free, what the applicable threshold is, how much more the customer needs to spend to qualify, and the cart's progress toward the threshold as a percentage (0–100).

Also produce a short shipping-rules.test.ts (or equivalent test/demo script) that demonstrates the function returning correct results for at least these three cases:

• A Gold member in the US with a $40 cart.
• A standard US customer with a $60 cart.
• An international customer with a $200 cart.

You may use Node.js built-ins and TypeScript; no additional packages should be required to run the demo.

Holiday Promotion and Upsell Suggestions

Problem Description

Meridian Goods is preparing for its holiday sale and wants to do two things at once: temporarily lower the free-shipping threshold for a limited window to drive higher order volumes, and show targeted product suggestions to customers who are just a few dollars short of qualifying.

The merchandising team has specifically flagged that irrelevant suggestions (shown when a customer is far from the threshold, or shown for out-of-stock items already in the cart) have hurt trust in previous campaigns. They want suggestions to appear only when they are actionable — i.e., when the customer is genuinely close to the threshold and one product addition could push them over.

The current codebase has a SHIPPING_RULES array with a standard rule that provides free shipping at $75 for US customers. The team does not want this rule changed; instead, the holiday promotion should be layered on top.

You have been asked to:

1. Add a holiday promotion rule to the existing rules array that lowers the free-shipping threshold to $50 for US and Canadian customers from December 1 through December 31, 2026. The promotion should automatically take precedence over the standard rule during that window. 2. Build a function getFreeShippingUpsells that, given the current cart subtotal (in cents), the gap to the threshold (in cents), and the list of product IDs already in the cart, returns a list of product suggestions from the database.

Output Specification

Produce the following files:

• shipping-rules-holiday.ts — contains the updated SHIPPING_RULES array (or an exported holiday rule constant that can be spread into the array) and the getFreeShippingUpsells function. Assume a db.products.findAll(...) ORM method is available; stub or type it as needed.
• upsell-demo.ts — a short script that demonstrates the getFreeShippingUpsells function being called with at least two scenarios: one where the gap is small enough that suggestions should appear, and one where the gap is too large. Log the query parameters used in each case.

The existing standard rule (rule_us_standard, free shipping at $75 for US, priority 5) must remain present and unchanged in the output.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: existing-rules.ts =============== import { ShippingRule } from './types';

export const SHIPPING_RULES: ShippingRule[] = [ { id: 'rule_us_standard', name: 'Standard US — free shipping $75+', freeShippingThreshold: 7500, applicableZones: ['US'], customerSegments: [], priority: 5, isActive: true, startsAt: null, endsAt: null, }, { id: 'rule_international', name: 'International — no free shipping', freeShippingThreshold: null, applicableZones: [], customerSegments: [], priority: 1, isActive: true, startsAt: null, endsAt: null, }, ];