--- title: Cart progress (free shipping bar) slug: cart-progress description: How the Cart progress element works in Personizely: free shipping thresholds, thresholds from shipping tests, {amount} messages and automations at the goal. image: https://archbee-image-uploads.s3.amazonaws.com/1y1Fr-DMGy_apx7FwibyA/ORDTWfNKMXiY3ZRv0QSgP_personizely-docs-og.png docTags: createdAt: 2026-10-16T20:17:44.131Z --- 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](https://docs.personizely.net/bar-widgets) for a classic free shipping bar, or in a cart drawer with an [embedded widget](https://docs.personizely.net/embedded-widgets). **Available on:** Shopify (Online Store and Hydrogen) and Wix. ## How it works 1. **The threshold is resolved.** Either the fixed **Threshold** you set, or the free-shipping threshold of the visitor's variation in a [shipping test](https://docs.personizely.net/shipping-shopify) (see [Source: Campaign](docId:58OPYGqAeYmpHTup4IzHm)). 2. **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. 3. **`{amount}`** in a message is replaced with the amount still missing, in your store's currency format. 4. **On every cart change** (an add, a quantity change, a removal), the element fades briefly and updates. 5. **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](https://docs.personizely.net/shipping-shopify), 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](https://docs.personizely.net/shipping-shopify). - **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](https://docs.personizely.net/bar-widgets) 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. ## Related - [Shipping testing (Shopify)](https://docs.personizely.net/shipping-shopify) - [Bar widgets](https://docs.personizely.net/bar-widgets) - [Embedded widgets and placeholders](https://docs.personizely.net/embedded-widgets) - [Products (cross-sell and upsell)](https://docs.personizely.net/product) - [Automations](https://docs.personizely.net/automations) - [Widget elements](https://docs.personizely.net/widget-elements)