Free Shipping Status Bar Template

The Free Shipping Status Bar shows a visitor how close they are to a goal — “You are $65 away from free shipping” — with a live progress bar that fills as their value grows. It reads a number from the visitor’s Personyze profile (cart total, points, order count), compares it to a goal you set, and updates the message, the bar, and the percentage automatically. When the goal is reached it swaps to a success message with a celebration animation. Placement is set in the action’s Location step.

When to use it

• Free-shipping threshold — nudge visitors to add more to their cart to unlock free shipping.
• Rewards / loyalty goals — “120 points to your next reward.”
• Spend or order milestones — any single numeric goal a visitor is progressing toward.

Add it to an action

In a Popup action, choose Free Shipping Status Bar. Set the value to read, the goal, and the message. The settings are grouped as Style, Value, Goal, Message, and Close.

Setting the value it reads

This is the most important step. The bar needs a live number from the visitor’s profile.

1. Open the Value section and click into the Current Value field.
2. Use the editor’s Insert Variable button and choose the profile field that holds the number — for example a cart-total or points field. It drops a tag like {cart_value} that Personyze replaces with the live value at display time.
3. Set a Test Value (a plain number) so the bar still previews correctly in the editor, where the live variable may be empty.
4. Pick the Unit Prefix (currency symbol) and optional Unit Suffix (e.g. pts).

The variable must be a single tag inserted directly — that is how Personyze resolves it to the live value. For how these variable tags work, see Inserting CRM Variables (tags) for Dynamic Content.

Getting the value into the profile

The bar only reflects a value that already exists on the visitor’s profile, so that field has to be populated with up-to-date data — the widget displays and reacts to it, it doesn’t calculate the cart itself.

• Captured from your own site — scrape the cart total (or points, orders) from the page, a cookie, or a URL parameter. Personyze already knows which visitor it is, so the value lands on their profile immediately, with no key required.
• Imported or synced — brought in from a file, feed, or your CRM, matched to the visitor by a key such as email or CRM ID.

Full instructions for creating profile fields and populating them are in User Profile Data Setup and Synchronizing in Personyze. Choose the field’s type as number so the bar can do the math.

Setting the goal

In the Goal section, enter the Goal Amount (for example 100). The bar computes the remaining amount and the percentage from the current value against this goal. The Completed Message is shown once the value reaches or passes the goal.

Settings

• Preset — dark, navy, brand, light, or success.
• Bar Width — full width, or contained (a centered, rounded bar).
• Animate Fill — the bar animates to its position on load.
• Completion Effect — confetti, a checkmark, a glow pulse, or none, played when the goal is reached.
• Message Before / After Amount — the wording around the number; the “after” part accepts simple HTML so you can style the reward.
• Close Button and its visibility (always, or on hover).

Completion celebration

When the value reaches the goal, the bar hides the track and percentage, shows your completed message, and plays the chosen effect. Confetti falls across the bar for a few seconds, the checkmark pops in, or the bar pulses with a glow. The message also centers itself once the bar and percentage disappear, and you can style it separately with Completed Message CSS.

Tips

• Test with the Test Value first to confirm the wording and colors, then insert the live variable.
• Set the profile field’s type to number — text values can’t be compared to the goal.
• If the bar always shows 0, the variable isn’t resolving — make sure you inserted it with the Insert Variable button and that the field is populated (see the two links above).
• For tiered milestones (Bronze / Silver / Platinum), use the tiered Status Bar template instead.