Skip to main content

Progress bar block

The Progress bar block adds a cart-aware progress bar to your popup. It visualises the tiered promotions on the link — customers see how close they are to the next reward as they add items to the cart.

The Progress bar block is optional, and only one Progress bar can be added per page. Its tiers come from the Promotions set on the link — you don't configure thresholds or rewards on the block itself. If the link has no tiered promotions, the bar doesn't render.

Settings

Style

Choose a colour scheme for the bar from eight presets:

  • Plain (default) — Black bar on a light grey track, no background, no border

  • Light grey — Subtle, neutral container

  • Red — Urgency or warnings

  • Orange — Attention-grabbing announcements

  • Purple — Premium or special offers

  • Green — Positive milestones

  • Blue — Informational messages

  • Custom — Pick your own background, text, border, fill and track colours

Border

  • Show border — Toggle the container border on or off. Off by default on Plain, on by default on coloured presets.

  • Dotted border — Switch from a solid border to a dotted one. Only appears when the border is turned on.

Tier labels

For each tier on the link's promotions, the block shows two label inputs:

  • Locked — Shown while the customer is still working toward this tier. Defaults to a sentence like "Spend $50 to get free shipping" or "Add 3 items to get a free gift".

  • Unlocked — Shown once the tier is reached. Defaults to "Free shipping unlocked", "10% off unlocked", etc.

Leave a label blank to use the default. Click Edit on a tier to open both inputs.

How it behaves

  • The bar updates live as items are added or removed from the cart.

  • Each tier is its own rounded segment. Filled segments use the scheme's fill colour; the active segment shows partial fill based on how close the cart is to the threshold.

  • When every tier is reached, the bar shows the last tier's Unlocked label.

  • The block is label-only — it does not apply the discount itself. Tiered promotions still handle that.

Tips

  • Place the Progress bar near the top of the page so customers see the goal before they start adding items.

  • Keep the Locked label short and outcome-focused — "Spend $50 to get free shipping" reads better than "You need to spend $50 more".

  • If you're not running tiered promotions yet, set them up first in the Promotions section of the link. The Progress bar reads from there.

Did this answer your question?