Free Shipping Bar Widget

Show shoppers your free-delivery threshold and, when your platform can pass the basket total, exactly how much more they need to spend, with a progress meter that turns green when they qualify.

Announcements & Notices Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/free-shipping-bar" title="Free Shipping Bar by A2Z Tools" width="100%" height="220" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

Set the free-delivery threshold, the currency and, optionally, a basket value. Remaining = threshold minus basket, compared in whole cents so 49.99 plus 0.01 really unlocks a 50.00 offer and floating-point sums such as 0.1 + 0.2 never leave a phantom cent. With a £50 threshold and a £32.50 basket the bar says "Spend £17.50 more for free delivery" and fills 65% of the meter; at or above £50 it says "You've unlocked free delivery" and turns green. With no basket value it shows "Free delivery on orders over £50.00" and no meter. The messages are templates with {remaining}, {threshold} and {basket}, and the amounts are formatted for the chosen currency and locale. The meter is a role="progressbar" whose aria-valuetext reads "£32.50 of £50.00, £17.50 to go". The bar cannot see your shop's cart: the iframe is on another origin. A real basket value only appears if your platform writes it into the embed code when the page is built.

Method

  • remaining = max(0, round(threshold x 100) - round(basket x 100)) / 100
  • meter % = min(100, basket / threshold x 100); unlocked when remaining = 0
  • Templates: {remaining}, {threshold}, {basket} replaced with currency-formatted amounts; all other text shown literally

Worked examples

Below the threshold

Inputs: Threshold 50; basket 32.50; currency GBP; region UK mainland addresses

Result: "Spend £17.50 more for free delivery"; meter 65%; aria-valuetext "£32.50 of £50.00, £17.50 to go"

50.00 - 32.50 = 17.50 and 32.50 / 50 = 65%.

Threshold reached

Inputs: Threshold 35; basket 40; currency USD

Result: "You've unlocked free delivery"; meter full and green

The basket is over the threshold, so remaining is 0.

No basket value

Inputs: Threshold 60; currency EUR

Result: "Free delivery on orders over €60.00"; no meter

Without a basket figure the bar states the offer only.

Limitations

  • It cannot read the visitor's cart; the basket figure must come from your platform's template or the visitor.
  • The value updates only when the page (and therefore the embed) reloads.
  • One threshold and one currency per embed; no per-country thresholds, tax or discount logic.
  • The visitor-input box is a demonstration aid, not a checkout calculation.

Where publishers use it

  • A Shopify theme's cart page printing the cart total into the embed with Liquid, so the bar shows the real amount left
  • A product page on any platform stating the threshold only: "Free delivery on orders over £50.00 - UK mainland"
  • A WooCommerce or Magento basket template filling v_basket from the server-side cart subtotal
  • A marketing landing page demonstrating the offer with a sample basket of £32.50
  • A wholesaler's terms page with the visitor-input box switched on so buyers can check an order value

Questions

Can it read my customer's real cart?

No. The bar runs in an A2Z iframe on a different origin, so browsers stop it from reading your shop's cart, cookies or page - by design. It only knows the basket value you put in the embed code (v_basket), or what a visitor types when the input box is on. There is no plugin and no app.

How do I show the real basket amount?

Have your platform write the cart total into the embed when it renders the cart page, then re-embed on each page load. On Shopify, for example, output the Liquid value cart.total_price piped through divided_by: 100.0 into a data-v-basket attribute on the loader div - cart.total_price is in cents, so 3250 becomes 32.5. The value updates when the page reloads, not while items are added through an AJAX mini-cart.

Which currencies are supported?

Any currency the builder offers, formatted with the browser's Intl rules for the chosen locale: £17.50 for GBP, $17.50 for USD and AUD, €17.50 for EUR (en-IE) or 17,50 € with a German locale. The threshold and basket must be in the same currency; nothing is converted.

Can I change the wording?

Yes. Three templates: below the threshold (default "Spend {remaining} more for free delivery"), reached ("You've unlocked free delivery") and no basket known ("Free delivery on orders over {threshold}"). Placeholders become bold amounts; everything else, including angle brackets, is shown as plain text.

How tall is it?

About 220 px with the A2Z header and footer, or about 130 px with title=0 and style=minimal. Without a basket value the meter is hidden and it is shorter still. Under prefers-reduced-motion the meter fill does not animate.

Does it handle tax, discounts or delivery zones?

No. It compares one number with one threshold. Decide whether your threshold is before or after discounts and VAT and pass the matching figure; use the region note (for example "UK mainland addresses") to state where the offer applies.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Free Shipping Bar
https://a2z.tools/embed/free-shipping-bar

Related widgets

More Announcements & Notices widgets →

  • Average Order Value Calculator

    Business & Ecommerce Calculator New

    Average order value, orders needed for a revenue goal, and the payoff of a higher basket size.

    Get code

  • Announcement Bar

    Announcements & Notices Tool New

    A slim top-of-page message strip with icon, link button, colour tone and optional start and end dates.

    Get code

  • Discount Calculator

    Business & Ecommerce Calculator

    Sale price and savings, including stacked discounts and sales tax on the reduced price.

    Get code

  • Goal Thermometer

    Marketing Tool New

    Fundraising goal thermometer: amount raised, goal, percentage and days left, set in the builder.

    Get code

  • Holiday Closure Notice

    Announcements & Notices Tool New

    Holiday opening hours and closure dates that hide past days and highlight today in your time zone.

    Get code

  • Website Alert Banner

    Announcements & Notices Tool New

    Maintenance, degraded-service and outage notices with the time window converted to each visitor's zone.

    Get code

Preview

CustomizeGet code