Shopify · Free shipping · 27 October 2026
Shopify Free Shipping Progress Bar
The bar is the cart subtotal, drawn as a fill and a sentence.
By Qasim Malik · 27 October 2026 · 4 minute read
- Measure
- Cart item subtotal
- Empty cart
- Initial message, {{amount}} is the full goal
- Under the goal
- Progress message, {{amount}} is the remainder
- At the goal
- Success message, bar at 100 percent
How the fill is calculated
The bar reads the cart. It uses the item subtotal when that figure is present, and the cart total otherwise. Divide that by the threshold, round to a percent, and stop at 100. A threshold of 50 and a subtotal of 20 is a bar at 40 percent.
The threshold lives in Free Shipping Bar Pro. The app default is 50. Colors are a bar color and a text color, saved as hex. The default bar is #008060 and the default text is #FFFFFF. How to choose the number is in How to Set a Shopify Free Shipping Threshold.
Three messages, one placeholder
Write an initial message, a progress message, and a success message. {{amount}} is replaced with a money figure in the cart currency. On an empty cart the initial message gets the full threshold. Under the goal, the progress message gets the amount still left. At the goal, and only when the cart has a subtotal, the success message is shown as you wrote it.
The defaults are “Add {{amount}} more to unlock free shipping!”, “You’re {{amount}} away from free shipping!”, and “You’ve unlocked free shipping!” Keep each line short enough for a phone. The announcement bar is a single strip.
It updates when the cart changes
The bar refreshes when the theme adds, changes, updates, or clears the cart, including the cart requests Dawn-style themes send. It also refreshes when the shopper returns to a page that was kept in memory. You do not ask the customer to reload.
If both the announcement embed and the header block are enabled, one bar is shown. Use a single placement. The placement steps are in Shopify Announcement Bar for Free Shipping.
The fill has to match the charge
Saving the threshold creates the automatic discount Free shipping (Free Shipping Bar Pro), so a full bar and free shipping are the same subtotal. Shopify describes that discount on free shipping discounts.
Test an add-to-cart on a product page and watch the fill move before the shopper opens the cart. Then test checkout. The order path is in How to Place a Shopify Test Order.
Frequently asked questions
What does a Shopify free shipping progress bar measure?
The cart item subtotal, as a percent of the threshold you saved.
When does the message change?
An empty cart uses the initial message. A cart under the goal uses the progress message. A cart at the goal uses the success message.
What does {{amount}} print?
A money amount in the cart currency. On an empty cart it is the full threshold. Under the goal it is the remainder.
Does the bar update without a reload?
It updates when the theme changes the cart. The shopper can add a product and see the new gap on the same page.
Where do I install it?
Free Shipping Bar Pro on the Shopify App Store. The Pro plan is $2.99 a month, with a 7-day trial.
The fill and the discount share one subtotal
Install Free Shipping Bar Pro, save a threshold you can support, and add one product under that number. The bar should name what is left.
Leave a Reply