Progress bar and cart goals

The Progress bar module shows how close a shopper is to the next reward: a segmented track with one node per goal, a headline that counts down the amount still to spend, and a check on each goal already reached. Every new cart has one, switched off and with no goals yet.

The progress bar displays progress. It does not create or apply the reward. Hype Cart Drawer draws the bar and the headline; the free shipping rate, discount or gift itself has to exist in your store — set up as a Shopify shipping rate, an automatic discount, or with a discounts app. If nothing applies the reward, shoppers reach the goal and get nothing.

Adding goals

Expand Progress bar in the module list and turn on its switch.
Click Add goal.
Set the goal's Reward, Spend threshold, Label and, optionally, Reward name.
Repeat for each tier, up to six goals.

Goals are sorted by threshold automatically, so the order you add them in does not matter.

Reward picks the icon shown on the node and nothing else. The three options are:

Free shipping — a truck.
Discount — a discount arrow.
Free gift — a gift box.

Spend threshold is the cart total the shopper must reach, in your store's currency. A new goal starts at 50. The comparison is against the cart total as Shopify reports it, so a cart discount that has already been applied counts against the goal.

Label is the goal's own caption. Reward name is what the headline calls it; leave it empty and the headline uses the label. Use it when the label is short ("Free shipping") but the sentence needs something longer ("free shipping on this order").

The headline

Three headline templates are editable under the goals:

Field	Default	Shown when
Headline	`Add {amount} more to get {reward}`	No goal reached yet
Headline unlocked	`{unlocked} unlocked! Add {amount} more to get {reward}`	At least one goal reached, more to go
Headline complete	`{unlocked} unlocked! You reached every reward 🎉`	Every goal reached

{amount} is the money still needed for the next goal, {reward} is that goal's reward name, and {unlocked} is the last goal already reached. Substituted values are shown in bold. To go note ({amount} to go) is the small caption on the track.

Use the {} button beside a field to insert a variable rather than typing it.

When the bar is hidden

The module renders nothing when the cart is empty or when it has no goals configured. A shopper only ever sees it with something in the cart.

Countdown actions

The progress bar has no timer of its own. If you want a time-limited reservation on top of the goals, use the announcement bar, which has Show a countdown with three actions — Hide the banner, Restart the countdown and Clear the cart.

Translation

Label and Reward name carry a translate button on each goal row, and every headline field carries one, so a multi-language store can phrase each tier per locale. See Translating your drawer.