The Free shipping & tier bar is an action that tells each shopper how far their cart is from free shipping — “You’re $12.50 away from free shipping” — or, for business customers, which tier they are on and how much more reaches the next one. It reads the cart in the shopper’s browser, so it moves the moment something goes into the cart or comes out, with no reload. It can stand at the top of the page, inside the cart and under the Add to cart button at once.
The bar only shows. The cart is read from your store as Product Tracking has it, and the goal is an amount you type into the bar or your free-shipping promotion in Promotions.
Add the bar
In the campaign’s Content step, Add action → Change page content or look → Free shipping & tier bar. Pick one of five designs: Dark Strip, Light Strip, In Your Brand Colour, Cart Card (inside the cart and under Add to Cart) or Tier Bar — Ladder of Your Tiers (for business customers; it starts the bar counting tiers). Then three steps:
- Design — words, places, look and close button, beside a live preview. See The Design step.
- What it counts — see below.
- Set Display Rules & Placement — it names the places the design is in. Which pages and visitors get the bar is the campaign’s targeting.
What it counts
| Setting | The choices |
|---|---|
| What it counts | Free shipping (how far the cart is from the goal) or Tier (where the visitor stands on your tiers). |
| Free shipping from | Your free-shipping promotion (the one each visitor may be shown now — see below) or This amount, in your store’s money, the same for every visitor. |
| The cart | How your cart is read, for example Read live from Shopify. Nothing to set up. See How the cart is read. |
| Tiers | Counting a tier: your tiers, with Change in Promotions › Visitor stages. See Tiers. |
When the design puts the bar inside the cart or under Add to cart, a second part, Where on your page, follows — see Where it shows. A bar with no amount cannot be saved.
How the cart is read
Read in the visitor’s browser as it changes, never sent anywhere. It is set once in Settings › Recommendation setup › Product Tracking: the Your store card names the platform, and the Cart total row says where the total is (see Product Interaction Tracking).
| Your store | How the cart is read |
|---|---|
| Shopify, WooCommerce, BigCommerce, Magento 2 or VTEX | Live from the platform. Nothing to set up. |
| Another platform | Live from An element on the page, A JavaScript variable or Google Tag Manager, as set in the Cart total row. |
| Neither set | For now an estimate from add-to-cart clicks, with Set it up in Product Tracking. |
Amounts use your money format (Product catalog › Price formats). If it names no currency, type the sign under Words in the Design step.
Your free-shipping promotion
A promotion in Promotions has Free shipping from in its Offer section: The free-shipping bar counts toward this amount. Leave a minimum cart out of who sees the promotion — a cart under the amount is exactly who the bar is for. It is also a column of the list and of its import and export.
The bar counts toward the promotion each visitor may be shown now: targeted at them, in their language, and the highest in priority. When none applies, the bar shows that visitor nothing.
Tiers
On the Promotions page, Visitor stages → Tiers: Each tier is a stage your promotions can target, like “Stage: Gold”. + Add a tier adds a row with Tier (its name), From (where it starts) and What it gives (“10% off”). Counted on is the number a tier is read from: Orders from your connected store (This year or The last 12 months), or A field from your CRM — a number field in Visitor Attributes. A visitor we cannot match to a customer sees nothing unless Tiers — Show to a Visitor We Don’t Know is on, under Words.
Where it shows
The places are part of the design (Places, in the Design step), several at once.
| Place | How it behaves |
|---|---|
| Top of the Page | Under your site’s own header, in the page’s flow; your header is not moved or restyled. Stays on Screen When Scrolling is off unless you turn it on. On a page whose header lies over a picture, usually a home page, the top bar is not shown. |
| Inside the Cart | A light card in the cart. |
| Under “Add to Cart” | A light card under a product page’s button. |
The cart and the button are found by themselves on the five platforms. Elsewhere, Where on your page → Pick it on your page opens your site with a picker on it (it needs your site’s address under Settings › Tracking Code); Let it find it goes back to the platform’s own.
The Design step
The design’s settings sit beside a live preview in five groups; Change template swaps the look and keeps what the bar counts.
| Group | What it sets |
|---|---|
| Words | Before the Goal, Once Reached, Show With an Empty Cart, the tier lines, the currency sign. |
| Places | The three places, and Stays on Screen When Scrolling. |
| Layout and Style | Shape (Strip across the page, Card, Tier ladder), Look, Tiers Shown, alignment, size, font. |
| Colours | Preset, or Custom: Background, Bar, Text Colour, Once Reached. Words that would not read turn black or white. |
| Close | An X that hides the bar for this visitor; Closed For (Days) — 0 is the rest of the visit. |
The words take {left} (what is left), {goal} (the free-shipping amount), {tier}, {next} (the next tier) and {gives} (what it gives). A band over the preview shows the bar Before the goal, Reached, with an Empty cart, or On a tier, in each place it is in.
When the bar shows nothing
- The cart is empty and Show With an Empty Cart is off.
- It counts toward Your free-shipping promotion, and none with a Free shipping from amount applies to this visitor now.
- It counts tiers, and the visitor cannot be matched to a customer.
- Only the top place is on, and the page’s header lies over a picture.
- The visitor closed it, for as long as Closed For (Days) says.
Other progress bars
For a bar inside a larger design, the Canvas Builder’s Progress Bar counts the same cart: Cart total (live), Items in cart (live) or Tier progress. The Free Shipping Status Bar and Tiered Status Bar templates read a number from a profile field instead — points, or spend you import.
Related
- Product Interaction Tracking — Your store and the Cart total row
- Promotions — where Free shipping from is set
- Promotions Campaign — how a visitor is matched to a promotion
- Canvas Builder — the Progress Bar element
- Content & Design — every kind of action