Cart Progress Bar
The CartProgressBar is a drag-and-drop Puck component that shows customers how close they are to unlocking a reward — free shipping, a free gift, or a discount — as their cart fills up.
Adding CartProgressBar to a Page
- Open the Page Builder for your cart or checkout page
- In the left component panel, find CartProgressBar under the Cart category
- Drag it onto the canvas — place it near the top of the cart, above the item list, or between the items and the checkout button
- Configure the props in the right panel
- Publish the page
Component Props
| Prop | Type | Description |
|---|---|---|
| Title | text | Text shown before the remaining amount. E.g. "You're" |
| Goal Type | select | free_shipping · free_gift · discount |
| Goal Amount | number | Target amount in cents. E.g. 5000 = $50.00 |
| Reward Label | text | What the customer unlocks. E.g. "free shipping" |
| Progress Bar Color | CSS color | Color of the filled portion. Default: #111827 |
| Background Color | CSS color | Color of the unfilled track. Default: #e5e7eb |
| Show Amount | toggle | Show the remaining dollar amount in the message |
Example configuration
Title: "You're"
Goal Type: free_shipping
Goal Amount: 5000
Reward Label: free shipping
Show Amount: Yes
This renders as: "You're $12.50 away from free shipping" with an animated bar at 75% when the cart is at $37.50.
How the Bar Updates
The CartProgressBar reads the live cart subtotal via the useCart() hook — it updates in real time as items are added or removed, without a page reload.
When the cart reaches or exceeds the goal amount, the message changes to:
🎉 You've unlocked free shipping!
and the bar shows at 100%.
Set your goal amount to your actual free-shipping threshold in your shipping settings. If free shipping kicks in at $50, set Goal Amount to 5000 (cents). Keeping the two in sync avoids customer confusion.
Goal Type Behaviour
The Goal Type prop is currently cosmetic — it changes how the prop appears in the dashboard but doesn't automatically apply the discount or shipping rule. You still need to configure the actual reward in your:
- Shipping settings (for free shipping threshold)
- Discounts section (for a discount code or automatic discount)
- Order rules (for a free gift)
The CartProgressBar is the visible motivator — the reward itself is handled by your existing store configuration.
Placement Recommendations
| Placement | Notes |
|---|---|
| Top of cart page | Visible before customer sees items — sets expectations early |
| Between items and checkout button | Strong last-push position, customer sees it before clicking checkout |
| Inside cart drawer | High-visibility, every cart open triggers it |
A/B Testing the Progress Bar
Because CartProgressBar is a Puck component, you can A/B test:
- Its placement (top vs. bottom of cart)
- The reward label wording ("free shipping" vs. "free delivery")
- Whether showing the remaining amount increases AOV vs. just showing the bar
Set up the test in A/B Tests → New Test → Page test, choose two cart page variants, and let the engine split traffic automatically.
Next Steps
- Post-purchase recommendations — grow the basket after checkout
- Manual rules — configure which products are recommended
- A/B Testing — test your CartProgressBar placement