Shipping Progress Bar

The Shipping Progress Bar displays how close a customer is to qualifying for free shipping (or other thresholds). This visual motivator is highly effective at increasing average order value by encouraging customers to add more items.

AOV Impact

Merchants using shipping progress bars typically see an 8-15% increase in AOVas customers add items to reach the free shipping threshold.

How It Works

The progress bar updates in real-time as items are added to the cart:

Below threshold — Shows amount needed: "Add $15 more for FREE shipping!"
At threshold — Celebrates success: "You've unlocked FREE shipping!"
Animation — Smooth progress animation as cart updates
Persistence — Appears throughout checkout to reinforce the message

Basic Configuration

Shipping Bar Configuration

{
  "shipping_bar": {
    "enabled": true,
    "threshold": 75.00,
    "currency": "USD",
    "messages": {
      "below_threshold": "Add {{amount}} more for FREE shipping!",
      "at_threshold": "You've unlocked FREE shipping!",
      "above_threshold": "Congrats! You get FREE shipping!"
    }
  }
}

Setting Up the Progress Bar

Navigate to Extensions

Go to CheckoutOS → Checkout Extensions → Shipping Progress Bar.

Set Your Threshold

Enter your free shipping threshold amount (should match your shipping settings).

Customize Messages

Edit the text that appears at each stage of progress.

Choose Placement

Select where the bar appears (order summary, top of checkout, etc.).

Style the Bar

Customize colors, animation, and appearance.

Preview & Publish

Test with different cart values, then publish.

Advanced Options

Tiered Shipping Thresholds

Support multiple shipping tiers with different thresholds:

Tiered Thresholds

{
  "tiers": [
    {
      "threshold": 50,
      "message": "Spend $50 for reduced shipping ($4.99)",
      "shipping_rate": 4.99
    },
    {
      "threshold": 75,
      "message": "Spend $75 for FREE shipping!",
      "shipping_rate": 0
    }
  ],
  "show_all_tiers": true
}

Geographic Thresholds

Set different thresholds based on shipping destination:

Geographic Configuration

{
  "geographic_rules": {
    "US": { "threshold": 75 },
    "CA": { "threshold": 100 },
    "EU": { "threshold": 150 },
    "default": { "threshold": 75 }
  }
}

Product Suggestions

Show product recommendations when customers are close to the threshold:

Product Suggestions

{
  "suggestions": {
    "enabled": true,
    "trigger_distance": 20,
    "max_products": 3,
    "source": "frequently_bought_together",
    "price_range": {
      "min": "{{remaining_amount}}",
      "max": "{{remaining_amount * 1.5}}"
    }
  }
}

Styling Options

Customize the appearance to match your brand:

Styling Configuration

{
  "styling": {
    "bar_color": "#22c55e",
    "bar_background": "#e5e7eb",
    "text_color": "#1f2937",
    "success_color": "#16a34a",
    "height": "8px",
    "border_radius": "4px",
    "animation": "smooth",
    "show_percentage": false,
    "show_icon": true,
    "icon": "truck"
  }
}

Placement Options

Available Locations

Order summary header — Most visible, recommended
Above cart items — Early visibility
Below cart items — Near subtotal
Sticky banner — Stays visible while scrolling
Multiple locations — Reinforce the message

Best Practices

Optimization Tips

Set realistic thresholds — 15-25% above your average order value
Celebrate success — Make reaching the threshold feel rewarding
Use urgency wisely — "Almost there!" messaging is effective
Show product suggestions — Help customers find items to add
Match shipping settings — Ensure threshold matches actual free shipping rules

Tracking Performance

Monitor the impact of your shipping bar in CheckoutOS analytics:

Threshold reach rate — % of customers who reach free shipping
AOV change — Before/after comparison
Items added — Average items added after seeing the bar
Conversion impact — Overall checkout conversion changes

Related Extensions

Trust Badges

Add security and trust signals

Learn more

Gift Options

Let customers add gift messages

Learn more