AddThisFeature
Sign in

Free Shipping Progress Bar

Show shoppers exactly how much more they need to add to earn free shipping.

simple Monetization

What it adds

A progress indicator in the cart and mini-cart showing the remaining amount to a free shipping threshold.

What your agent is told to do

5
  1. 1

    Put the indicator wherever the cart total is already shown: the mini-cart, the cart page, and the first checkout step. A message that appears in only one of those reads as a bug.

  2. 2

    Base the remaining amount on the qualifying subtotal, which is what the threshold rule actually measures, not the grand total with tax and shipping already added.

  3. 3

    Write the copy as a single plain sentence naming the amount left, and switch it to an unambiguous qualified message once the threshold is met.

  4. 4

    Update it from the same cart state that renders the totals, so the bar and the subtotal can never disagree after a quantity change.

  5. 5

    Do not show the bar when the shopper cannot possibly qualify, such as a region the offer excludes or a cart made entirely of excluded items. A goal the shopper cannot reach is worse than no goal.

Edge cases it handles

7
  • The bar has to recalculate after every change to the money: quantity edits, discount codes, removed items, and refunds applied to the cart. A stale bar promising free shipping the shopper does not get is a support ticket.
  • Carts often mix qualifying and excluded items. Count only the qualifying portion toward the threshold and say plainly that some items do not count, rather than quietly using a smaller number the shopper cannot reconcile.
  • Once the threshold is met the bar must show a distinct completed state. A bar sitting at full with the same wording as before looks stuck and gets ignored.
  • In regions where the offer does not apply, suppress the component entirely rather than rendering it at zero progress or with an unreachable target.
  • Screen reader users need to hear progress change without hearing it on every keystroke. Announce politely and only when the remaining amount meaningfully changes or the threshold is crossed.
  • A discount code applied after the fact can drop the subtotal back below the threshold. Handle the downgrade as explicitly as the upgrade and tell the shopper what happened.
  • Currency and thresholds vary by store or region. Format the amount in the shopper's currency and never hardcode the threshold in the view.

Definition of done

8
  • The remaining amount is correct after quantity changes, discounts, and removals.
  • Excluded items are not counted toward the threshold and the shopper is told so.
  • Meeting the threshold produces a distinct completed message, not a full bar with the same copy.
  • The component is absent for regions and carts where the offer cannot apply.
  • Progress changes are announced to assistive technology without repeating on every interaction.
  • The bar and the cart subtotal never disagree.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.