EspañolFree shipping progress bar for online stores
Set the free shipping amount and test it with the cart total control. The bar fills up and the message changes when the customer gets there.
How to useYou are $30 away from free shipping
Available in: 
Free shipping progress bar for online stores: what it is for
A free shipping bar shows customers how much is left to get free shipping, and that encourages them to add one more item instead of giving up because of shipping costs. Set the minimum amount, the message while there is still some left (with the amount in place of {valor}) and the message once it is reached.
The code creates the freteGratis(total) function, which you call whenever the cart total changes. The bar uses the progress element and the message is announced to screen readers. Test it with the total control right on this page.
How to use
- Set the free shipping amount.
- Write the messages and pick the color.
- Copy the code and call freteGratis(total) in your cart.
When to use it
- Online store cart.
- Top of product pages.
- Checkout page.
Frequently asked questions
Does a free shipping bar increase sales?
It shows how much is left to earn the benefit, which encourages the customer to add one more item instead of abandoning the cart because of shipping costs. It works best when the minimum is a little above the store's average order value.
How do I connect the bar to my cart?
The code creates the freteGratis(total) function. Call it whenever the cart total changes, for example freteGratis(87.5), and the bar and the message update. On ready-made platforms, put the call in the cart update event.
Is it accessible?
Yes. The bar uses the progress element, which screen readers understand, and the message sits in an aria-live region that is announced when it changes.