Multi-tier visual progress bar showing progress toward free shipping and other rewards.
Free Shipping Progress Bar
The progress bar encourages the customer to increase their cart by visually showing the remaining distance to free shipping (or other rewards). It is a powerful lever to increase average order value.
Principle
The progress bar is a multi-tier system. Each tier represents a reward to reach:
| Tier | Type | Threshold | Message |
|---|---|---|---|
| 1 | Shipping | 50 EUR | "Add 15 EUR for FREE shipping!" |
| 2 | Gift | 80 EUR | "Add 30 EUR for a FREE gift!" |
| 3 | Express shipping | 120 EUR | "Add 40 EUR for EXPRESS shipping!" |
When the customer adds products, the bar fills progressively and messages update in real time.
Activation
| Setting | Description | Default |
|---|---|---|
| Enable progress bar | Activates the bar in the cart | Yes |
| Color palette | Bar background color | Background 1 |
| Completion message | Message when all tiers are reached | "You've unlocked all rewards!" |
Tier configuration (Cart Tier)
Tiers are configured via "Cart Tier" blocks in the Shopify editor. You can add as many as needed.
Settings for each tier
| Setting | Description | Default |
|---|---|---|
| Type | Shipping / Gift | Shipping |
| Threshold | Amount to reach (in store currency) | 50 |
| Message | Text displayed before reaching the tier | "Add $amount for FREE shipping!" |
| Success message | Text displayed when the tier is reached | "FREE shipping unlocked!" |
| Icon | Icon next to the message | Truck |
| Gift product | Product offered automatically (if Gift type) | - |
$amount placeholder
The $amount text in the message is dynamically replaced by the remaining amount:
Setting: "Add $amount for FREE shipping!"
Displays: "Add 15.00 EUR for FREE shipping!"Tier types
| Type | Description | Behavior |
|---|---|---|
| Shipping | Free shipping | Displays a message only |
| Gift | Free gift | Automatically adds the gift product to the cart when the threshold is reached |
Available icons
| Icon | Description |
|---|---|
| Truck | Delivery truck |
| Package | Package |
| Gift | Gift |
| Star | Star |
| None | No icon |
Multi-tier example
Here is a 3-tier configuration example:
Tier 1 - Free shipping
- Type: Shipping
- Threshold: 50 EUR
- Message: "Add $amount for FREE shipping!"
- Success: "FREE shipping unlocked!"
- Icon: Truck
Tier 2 - Gift
- Type: Gift
- Threshold: 80 EUR
- Message: "Only $amount more for your free gift!"
- Success: "Gift unlocked!"
- Icon: Gift
- Product: [Free sample]
Tier 3 - Express shipping
- Type: Shipping
- Threshold: 120 EUR
- Message: "Add $amount for EXPRESS shipping!"
- Success: "FREE express shipping!"
- Icon: Star
, the second in progress, the third still to reach)
Display
The progress bar is displayed:
- In the Cart Drawer (above items)
- On the cart page (above items)
It includes:
- The visual bar with progressive fill
- Milestones marked on the bar
- The dynamic message below the bar
Dynamic behavior
- The bar updates in real time when the cart changes
- When a Gift tier is reached, the gift product is automatically added to the cart
- When the cart drops below the threshold, the gift is automatically removed
- The completion message is displayed when all tiers are reached
Best practices
- Start with an accessible threshold: your tier 1 should be reachable for the majority of carts
- Space out tiers: leave enough gap between each threshold (e.g., 50 / 80 / 120)
- Use engaging messages: include bold text to draw attention
- The Gift tier is powerful: offering a real product is more motivating than a simple message
- Test your thresholds: analyze your average order value to position thresholds strategically