Using the bar

This walkthrough covers placing the bar, writing messages that convert, and using the shortcode for custom locations.

1. Let Nudge read your goal automatically

If you already run a free-shipping method (for example Free shipping over $50), leave the threshold mode on Automatic. Nudge reads the smallest qualifying minimum order amount across your zones, so the bar always matches the rule a shopper would actually hit at checkout. When you change the shipping rule, the bar follows — there is nothing to keep in sync by hand.

Not running a free-shipping method yet? Switch to Manual and type the amount. You can move back to Automatic later.

2. Choose where it shows

Set the placement to Cart, Checkout or Both. The cart is where most shoppers decide whether to add one more item, so it is the highest-impact placement. The bar works on both classic templates and the Cart/Checkout Blocks with no extra setup.

3. Write messages that motivate

Use the {amount} token so the message always shows the exact gap:

Add {amount} more to unlock free shipping!

Then write a success message for when the goal is met:

Nice — you've earned free shipping!

Keep both short. The progress message does the persuading; the success message confirms the win.

4. Place the bar anywhere with the shortcode

[nudge_bar]

Drop [nudge_bar] into any page, post or widget — a mini-cart area, a sidebar, a landing page. It renders the current cart’s progress toward free shipping and hides itself when the cart is empty or no goal is set, so it never shows a broken bar in an unexpected place.

How it behaves live

• As the shopper adds items, the bar re-renders and animates toward the goal.
• When the cart reaches the goal, the message switches to your success copy.
• When the cart is emptied or there is no goal, the bar hides itself entirely.

All of this runs on a tiny dependency-free script — there is no jQuery added by Nudge.

Accessibility and Core Web Vitals

The bar is a genuine role="progressbar" with aria-valuenow/min/max and a text alternative, so assistive technology announces progress meaningfully. The track reserves its height before the fill renders (zero CLS), and the animation respects prefers-reduced-motion.