Progress bars

A Progress bar shows customers how close they are to a goal, such as free shipping, with text that changes as they get there. One bar can hold up to 5 goals, like free shipping at $50 and a free gift at $100, each named under the bar.

Requires: On the cart page: any Shopify plan except Starter, with the Deals & Rules or Buddy plan. In checkout: Shopify Plus, on the Buddy plan, or on the Free plan except bars with a Cart weight goal. The Free plan includes one customization in total.

A bar shows in checkout, on your cart page and in your theme’s cart drawer, or both: you choose under Where it shows. In checkout, new bars show in the Content app block, with your content blocks, and use the Content rules. On the cart page, see on the cart page.

Made a progress bar before?

Bars made before the Content block keep working as they are, in the Checkout Buddy (v1) app block: see bars made before the Content block. Progress bar (cart totals) and Progress bar (cart weight) blocks keep working too, with their own editor: see older progress bars.

Add a progress bar

1. In Checkout Buddy, go to Customizations → Upsells → Create customization → Progress bar. Choose Start blank or a template: Free shipping, Free shipping, then a gift, Free freight by weight or Buy more, save more.
2. Under Where it shows, tick Checkout, Cart page or both. Cart page covers your theme’s cart drawer too. Without Shopify Plus, only Cart page is offered, and new bars start there.
3. Set the goal, the milestones and the text. The Preview has a cart slider, so you can see what the bar says before, between and after each milestone. With both places ticked, its tabs show each.
4. Under Status, turn on the switch so it reads Published, and save. New bars start as Draft.
5. For checkout: in Shopify’s checkout editor, add the Content app block where the bar should show, such as above the order summary or the shipping methods, and save the editor. The Checkout card beside the editor has a link to the editor, and warns you while the app block isn’t in your live checkout.
6. For the cart page: follow the Cart page card’s steps, below in on the cart page.

Which app block shows it

• Block IDs empty: the bar shows in every Content app block in checkout’s sections, with your other content blocks, oldest first.
• To show it in one place only, enter the bar’s ID in that app block’s Block IDs, and list IDs in your other Content app blocks. The ID is under Status in the bar’s editor.
• Under each item, shipping method or pickup location, the app block needs the bar’s ID.

See which blocks an app block shows.

Goal

Progress toward sets what fills the bar:

Goal	What counts
Subtotal	Items after their discounts, before shipping and taxes. The usual choice for “free shipping over $X”.
Subtotal after order discounts	The subtotal minus discounts on the whole order, like 10% off the order
Total	What the customer pays, with shipping and taxes once checkout knows them. It moves as shipping is added.
Number of items	Every item in the cart, by quantity
Cart weight	Each product’s weight in Shopify, by quantity, in the Unit you choose: kilograms, pounds, grams or ounces. Products without a weight count as zero.

Free gifts and fees added by Product offers don’t count toward items or weight. Free gifts don’t add to the subtotal either.

Milestones

Each milestone has an amount (At) and an optional Reward, such as free shipping or a free gift. Add more milestones to show several goals in one bar. Milestones are sorted by amount when you save.

Money amounts are in your store’s currency. Other currencies convert at Shopify’s rate, the same rate your discounts use.

Text

Field	When it shows
Before the goal	Until the first milestone is reached
Between milestones	After the first milestone, with 2 or more milestones. Leave it empty to keep using Before the goal.
Once every goal is reached	After the last milestone

These words are filled in at checkout:

Word	Becomes
{{remaining}}	What’s left to the next milestone, like $12.50, 3 items or 1.5 kg
{{reward}}	The next milestone’s reward (the last one’s once every goal is reached)
{{reached}}	The reward of the last milestone reached
{{goal}}	The next milestone’s amount
{{progress}}	The cart’s amount now

For example, Spend {{remaining}} more for {{reward}} reads “Spend $12.50 more for free shipping”. Amounts are formatted in the customer’s currency and language.

Look

• Text alignment: start or center.
• Text style: plain or bold.
• Show milestones under the bar: with 2 or more milestones, each gets a check once reached, its reward and its amount, and an equal share of the bar.
• Once every goal is reached: keep the full bar and its message, or hide the bar.
• Show on: Phones and computers, Phones only or Computers only.

In checkout, the bar is Shopify’s own, so its colors come from your checkout branding. On the cart page, it takes your theme’s fonts and colors.

Who sees it

In checkout: Every checkout, or Only checkouts that match the rules, with the Content rules: cart amounts, items, products, tags and collections, discount codes, cart attributes, the customer, the address, delivery and payment method, language, market, date and time, and more. Rules are checked again as the cart changes, and money rules are converted like milestones. On the cart page, fewer rules work: see on the cart page.

Translations: each text and reward can be translated into your store’s languages under Translations. The Preview’s language picker shows them.

On the cart page

A bar with Cart page ticked shows on your store’s cart page and in your theme’s cart drawer, above any cart page offers. It works on every Shopify plan except Starter, with the Deals & Rules or Buddy plan, and needs no Shopify Plus. It shows through the theme’s Product offers block, the same one that shows offers, so one block on your cart page shows both.

1. Add the block to your cart page. On the Cart page card beside the bar’s editor, click Add to cart page. Shopify’s theme editor opens on your cart page with the Product offers block added, in its own section. Drag it where you want it, then click Save there.
2. Turn on the app embed for your cart drawer. On the same card, click Turn on beside Turn on Product offers in your theme’s app embeds, then Save in the theme editor. The drawer shows the cart page’s block, so the bar needs the block on the cart page too. See the cart drawer.

What’s different from checkout:

• It shows while the cart has items, and updates as the cart changes.
• Total counts the items after every discount, before shipping and taxes: the cart page doesn’t know those yet. A bar only on the cart page doesn’t offer it.
• Who sees it: Every buyer, or Only buyers who match the rules, with the rules the cart page can check: Cart amount (the subtotal, for all items), Number of items (all items), An item in the cart (any or none of some products, collections, product types, vendors or tags, or a subscription), Discount code, Cart attribute, Customer (logged in, guest, first order, returning, order count), B2B (yes or no), Language, Country, Market, Date and Day and time. A bar on both places with another rule shows only in checkout; its editor says which rule to change.
• Show on is checkout’s: on the cart page the bar shows on phones and computers.
• Amounts convert at Shopify’s rate for every buyer, B2B customers included.
• Bars only on the cart page count like offers on product and cart pages: they’re on the Deals & Rules and Buddy plans, any goal, and a downgrade to the Free plan deletes them.

Making the goal real

A progress bar only shows progress. To actually give free shipping or a gift at the goal, pair it with a function:

• Free shipping: a shipping discount with a Cart subtotal condition at the same amount. See free shipping bar.
• Free gift: a Product offer adds the gift once the cart reaches its tier, and shows its own progress. A product discount makes the gift free. See free gift.
• Volume discounts: a volume discount with the same tiers as a Number of items bar.

Things to know

• B2B customers see money amounts as you typed them, without converting, because company prices can’t be looked up by country.
• The bar is full at the last milestone and doesn’t go past it.
• Duplicating a bar makes a draft copy. Deleting one removes it from checkout and the cart page right away.

Bars made before the Content block

Progress bars made with this editor before the Content block keep working as they are, in the Checkout Buddy (v1) app block. On Customizations, their Kind column reads Checkout · Checkout Buddy (v1) app block, and their editor’s Where it shows names that app block. Everything above applies, except:

• Placement: a Checkout Buddy (v1) app block, with the bar’s ID in Fixed block ID. See add a block to checkout.
• Who sees it: Only checkouts that match conditions, with a shorter list: cart total or subtotal, number of items, products, product type or vendor in the cart, subscriptions, discount codes, cart attributes, delivery method, shipping country or province, logged in or guest, B2B or company, language, market country, and date.
• No Show on setting.

Give a bar with conditions its own app block

A Checkout Buddy (v1) app block without a Fixed block ID shows a random block whose conditions pass. A progress bar is picked before its own conditions are checked, so it can take your other blocks’ place and show nothing. Put the bar’s ID in an app block of its own.

To move a bar to the Content app block, make a new one, publish it, add the Content app block, then turn the old bar off.

Older progress bars

Bars made before Progress bar keep working and keep their editor. New bars are made with Progress bar, which converts amounts between currencies, takes several goals, and uses plain words instead of dynamic text.

Progress bar (cart totals)

Requires: Shopify Plus. Available on the Free plan.

Setting	What it does
Target	The amount to reach, such as 100. The bar is full at this amount.
Target type	What counts toward the target (see below)
Text (when in progress)	Shown until the target is reached
Text (when complete)	Shown once the target is reached

Target type options:

• Use cart total for target calculations: Shopify’s checkout total, which includes shipping and taxes once they’re known.
• Use cart subtotal for target calculations: The products’ value before shipping and taxes.
• Use cart subtotal plus discounts for target calculations: The subtotal minus order and shipping discounts, whether automatic or from a discount code.

Show the amount left

Both text fields support dynamic text. To show the amount left to spend:

You're {{ toMoney(100 - orderSubtotal, currencyCode) }} away from free shipping

With a target of 100 and a $60 subtotal, customers see “You’re $40.00 away from free shipping”. See more examples.

Blocks created before the native bar was introduced keep their color settings.

Targets aren't converted between currencies

The target is compared with the checkout amount in the customer’s currency. A target of 100 means 100 USD to a US customer and 100 EUR to a customer paying in euros. A Progress bar converts its amounts, so one bar covers every currency.

• Leaving Target empty hides the block.
• Older progress bars created from the retired “Progress bar” block still work and can still be edited.

Progress bar (cart weight)

Requires: Shopify Plus and the Buddy plan.

Setting	What it does
Target cart weight	The weight to reach, in kilograms
Text (when in progress) / Text (when complete)	Use {{ totalWeight }} to show the cart’s weight in kg

Weights come from each product variant’s weight in Shopify. Grams, ounces, and pounds are converted to kilograms. Products without a weight count as zero.