Cart progress (free shipping bar)
The Cart progress element shows visitors how far they are from a cart value goal, usually free shipping: "Spend $23.50 more and get free shipping!". It updates live as the cart changes, can show a progress bar, and can run automations when the visitor reaches the goal. Put it in a bar for a classic free shipping bar, or in a cart drawer with an embedded widget.
Available on: Shopify (Online Store and Hydrogen) and Wix.
How it works
- The threshold is resolved. Either the fixed Threshold you set, or the free-shipping threshold of the visitor's variation in a shipping test (see Source: Campaign).
- The cart value is compared to the threshold and one of three messages is shown:
- Initial when the cart is empty,
- Progress when the cart is above zero but below the threshold,
- Final when the cart is at or above the threshold.
- {amount} in a message is replaced with the amount still missing, in your store's currency format.
- On every cart change (an add, a quantity change, a removal), the element fades briefly and updates.
- When the cart crosses the threshold while the widget is shown, Personizely records a widget event and runs the element's automations. A cart that already qualifies when the widget opens doesn't run them.
Configuration
Settings tab:
Option | What it does | Values / default |
|---|---|---|
Source | Where the threshold comes from | Custom (default) or Campaign. Shown only when you have a shipping campaign with a free shipping rate |
Campaign | The shipping test or personalization to read the threshold from | Your shipping campaigns with a free rate |
Threshold / Fallback | The goal amount in your store's default currency. With Campaign, it's the fallback used when the campaign gives no threshold | 99 by default |
Device | Shows the element only on mobile, desktop or both | All devices |
Interaction tab: Automation only. There's no click action. Useful automations: Apply discount (Shopify) to reward reaching a spend goal, or Track widget conversion.
Style tab: layout (direction, alignment, justification, gap), background, border, size, spacing and position.
Messages
Edit the three messages directly in the editor. Use the state switcher above the element to see and edit Initial, Progress and Final. Defaults:
State | Default text |
|---|---|
Initial | Spend {amount} and get free shipping! |
Progress | Spend {amount} more and get free shipping! |
Final | Congrats, you are eligible for free shipping! |
Components
Component | Options |
|---|---|
Text | Typography, margin, position |
Progress bar | Off by default. Accent color (the filled part), background, border, radius, size, margin, position. Fills from 0% to 100% of the threshold |
Source: Campaign
With Source: Campaign, the element uses the free shipping threshold of the visitor's variation in the chosen shipping campaign, so the bar always matches the rates the visitor will see at checkout. The threshold is read from the variation's free (price 0) shipping rate that has a minimum cart value condition.
- If the visitor is in a variation with such a rate, that threshold is used.
- If the visitor is in the control group, or isn't in the campaign, the Fallback amount is used.
- Showing the bar counts as a view of the campaign. When the element reads the campaign's threshold, the visitor's view is registered for that campaign and variation (including the control group). This keeps the shipping test's report consistent with what visitors saw.
Behavior details and limitations
- Currency (Shopify). The threshold is entered in your store's default currency and converted to the visitor's currency when they shop in another market.
- Automations run on crossing, not on load. If a visitor opens the widget with a cart already above the threshold, they see the Final message but automations don't run. They run when an add takes the cart over the threshold while the widget is visible.
- The cart value is the store's cart total. Whether it includes discounts follows your platform's cart total.
- The bar doesn't change shipping rates. It only displays progress. Set the actual free shipping rate in your store's shipping settings, or test it with a shipping campaign.
- Per-element device setting. Besides the usual Show on, the element has a Device setting in its Settings tab with the same effect.
Examples
- Classic free shipping bar: a top bar with Landing trigger, Threshold 75, progress bar on, Final message "You've unlocked free shipping!".
- Shipping threshold test: a shipping campaign testing $50 vs $75 free shipping, and a bar with Source: Campaign and Fallback 75, so each group sees its own goal.
- Spend-and-get reward (Shopify): a cart drawer embedded widget with Threshold 150 and the Apply discount automation for a free gift discount when the cart crosses $150.