How to Show a Free Shipping Progress Bar in Magento 2

Most Magento 2 stores offer free shipping above a set order amount, but many shoppers only find out at checkout, when it is too late to add another item. A free shipping progress bar fixes that: it shows the threshold from the first page view and tells each shopper how much more they need to spend. This guide shows how to set one up, and the one setting people most often forget.

What a free shipping bar does

A free shipping bar is a slim notice at the top or bottom of the page that reads the shopper's cart subtotal and compares it with your free-shipping threshold. It has three states:

• Empty cart: an invitation, such as "Get free shipping on orders of $100 or more".
• In progress: how much is left, such as "You added $54 to your cart, only $46 away from free shipping".
• Unlocked: a confirmation once the subtotal reaches the threshold.

The message updates as soon as a product is added to the cart, so the shopper sees the effect of each item they add.

Step 1: set up the free shipping rule in Magento

A bar only displays a message. It does not change shipping prices. Before anything else, make sure Magento actually gives free shipping above your threshold, with one of these:

• The Free Shipping method (Stores > Configuration > Sales > Delivery Methods), with a minimum order amount, or
• A cart price rule (Marketing > Cart Price Rules) that gives free shipping when the subtotal is equal to or greater than your amount.

Whichever you use, note the exact amount. The bar's threshold must match it, or shoppers will be told they qualify when they don't.

Step 2: install a free shipping bar

Magento 2 has no built-in free shipping bar, so you add one with an extension or a custom module. Our Free Shipping Bar for Magento 2 installs like any Magento module: enable it, run setup:upgrade, compile and deploy static content in production mode, and flush the cache. The user guide has every command.

Step 3: set a threshold per customer group

Thresholds are set per customer group, each with its own wording. That lets you, for example:

• show guests the standard threshold,
• give logged-in customers a lower one as a reason to create an account, or
• give wholesale buyers their own amount and message.

Messages can use three variables that are filled in with currency-formatted amounts: {thresholdValue} (the threshold), {cartValue} (the cart subtotal) and {leftValue} (what is left to spend). A typical progress message is: You added {cartValue} to your cart. Only {leftValue} to go for free shipping.

Step 4: choose where the bar shows

Pick a position (page top, content top, content bottom or page bottom) and the page types it appears on. Some stores show it everywhere; others leave it off the checkout so nothing distracts from paying. You can also:

• make the bar sticky, so it stays in view while shoppers scroll,
• add a progress track and a percentage badge ("65% there"),
• let shoppers close it, or hide it after a number of seconds,
• match your theme with colour, font size and alignment settings, or your own CSS.

Step 5: test the three states

Before you announce it, test as a shopper in each customer group:

1. Open the store with an empty cart and check the opening message.
2. Add a product below the threshold and check the amount left is right.
3. Add enough to pass the threshold, check the success message, then go to checkout and confirm free shipping is actually offered.

If the bar doesn't appear, check the extension is switched on, at least one threshold row exists for the shopper's group, and the page type is selected.

See it working

The Free Shipping Bar product page has a live demo, pricing and the full feature list. If you would rather we set it up for you, or need a custom version, tell us about your store.