The progress bar sits in the cart and answers one question: how much more do I need to spend to get the thing you just dangled in front of me. Find it under Grow order value → Progress bar.
Cart progress bar in a storefront cart drawer, partway to free shipping

​
Milestones

A bar holds up to five milestones. They are sorted by cart value automatically, so you never have to add them in order. Each milestone has:
The progress bar displays progress. It does not create the reward. Set up the actual free shipping, discount or gift as an offer, and make the milestone’s cart value goal match the offer’s threshold. A bar that promises free shipping at 75whiletheoffertriggersat75 while the offer triggers at 100 is a support ticket waiting to happen.
Milestone list with an expanded milestone in the CartSella progress bar page

​
Preview

The preview panel on the right has a Preview state switch with three positions:
  • Empty cart
  • In progress
  • Goal reached
Use it to check that your copy makes sense at each stage, especially the success message.

​
Colours and copy

Click Customize colors and text to open the appearance panel.

​
Colour style

Six presets, shown as live swatches: Also here: Bar height (8 to 20 px) and Show labels, which prints the current value and the goal under the bar.

​
Messages

Two fields, and both accept placeholders:
  • Progress headline, shown while the shopper is still short of the next milestone.
  • Success message, shown once they reach it.
“You’re only away from ” outperforms a bare bar by a wide margin. The number is the whole point, so put it in the sentence.

​
Placing it

Add the CartSella — Progress Bar block to your cart template. Click Add progress bar to theme on this page and the theme editor opens with the block already placed, so all that is left is Save. The block itself carries almost nothing: bar height, show labels, title font size and spacing. Every milestone, colour and message comes from this page, which is why the same bar looks identical wherever you put it.
Using a cart drawer that the block cannot reach, or want the bar somewhere unusual? The page also gives you an Embed code snippet to paste directly into your theme. It reads every setting on this page the same way the block does, and needs the CartSella app embed enabled.

​
Tips

  • Two milestones is the sweet spot. Free shipping first, then something aspirational. Five milestones turns a nudge into a spreadsheet.
  • Put your first milestone slightly above your average order value, not far above it.
  • Check the bar on a phone. Five milestone labels that fit on a desktop cart collapse into mush on mobile.

Shipping discounts

Create the free shipping the bar is counting toward.

Gift with purchase

Create the gift a milestone unlocks.

Storefront blocks

Where the Progress Bar block goes in your theme.

Cart settings

Every tool in the Grow order value hub.