Free shipping progress bar

What you’ll build: a progress bar that reads “You’re $12.00 away from free shipping”, fills up as the cart grows, and a shipping discount that makes standard shipping free at $75. The bar shows in checkout, on your cart page and in your theme’s cart drawer, or both.

Requirements: On your cart page: any Shopify plan except Starter, with the Deals & Rules or Buddy plan. In checkout: Shopify Plus and the Buddy plan, the only plan with both checkout blocks and discounts. A progress bar in checkout that tracks money or items is on the Free plan too (one that tracks weight needs Buddy), but the Free plan allows only one customization in total.

Not on Shopify Plus? The same recipe puts the bar on your cart page and in your cart drawer: see on your cart page.

Only want the discount? It works on its own, on any Shopify plan and any Checkout Buddy plan: see set up free shipping over $50.

Checkout Buddy has this as a recipe: it creates the discount, then the bar with the same amount.

1. Start the recipe. Click Create customization. Under Templates → Discounts, choose Free shipping over an amount.

2. Create the discount. The shipping discount opens filled in: every shipping option 100% off, with the message Free shipping, when Cart subtotal is more than 49.99. Change it to 74.99 for free shipping at $75, and save.

3. Add the bar. In the steps card at the top of the page, click Add progress bar. The bar opens with its goal at the discount’s amount, 75, and the reward free shipping. Under Status, turn on Published, and save.

4. Place it. In the Checkout Editor, add the Content app block where you want the bar (above the order summary or the shipping methods work well), and save the editor. With Block IDs empty, it shows the bar with your other content blocks. To show only the bar there, enter its ID, shown under Status. See add a block to checkout.

5. Test it with carts just under and over $75.

Build it by hand

To make only some shipping rates free, such as “Standard”, create the two parts yourself:

1. The progress bar. On the Upsells tab, click Create customization, choose Progress bar, then the Free shipping template. Progress toward: Subtotal. Milestone 1: At 75, Reward free shipping. Publish it, save, and place it as in step 4.
2. The discount. On the Discounts tab, click Create customization, choose Discounts, then Shipping. Apply discount to specific shipping option (inclusive match) with Shipping option title Standard. Discount type: Percentage, Discount value 100, Discount message Free shipping. Under Conditions, Apply only when conditions pass, Condition set 1, Cart subtotal is more than 74.99. Save.

The bar’s text: Before the goal reads You're {{remaining}} away from {{reward}}, and Once every goal is reached You've unlocked free shipping!

Selling in more than one currency?

The bar’s 75 is in your store’s currency. Customers paying in another currency see it converted at Shopify’s rate, the same rate the shipping discount’s condition uses, so one bar covers every currency.

On your cart page

The same bar can show on your cart page and in your theme’s cart drawer, through the theme’s Product offers block. It works on every Shopify plan except Starter, with the Deals & Rules or Buddy plan. Without Shopify Plus, the recipe’s bar opens there.

1. Start the recipe. Click Create customization. Under Templates → Discounts, choose Free shipping over an amount.

2. Create the discount. The shipping discount opens filled in: every shipping option 100% off, with the message Free shipping, when Cart subtotal is more than 49.99. Change it to 74.99 for free shipping at $75, and save.

3. Add the bar. In the steps card at the top of the page, click Add progress bar. The bar opens with its goal at the discount’s amount, 75, and the reward free shipping. Under Where it shows, Cart page is ticked (on Shopify Plus, tick it, with or without Checkout). Under Status, turn on Published, and save.

4. Add the block to your cart page. On the Cart page card beside the editor, click Add to cart page: Shopify’s theme editor opens on your cart page with the Product offers block added. Drag it where you want it, then click Save there.

5. 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.

6. Test it on your store with carts just under and over $75.

See progress bars on the cart page for what’s different there. To also suggest products that reach free shipping, add a Close the gap offer under the bar.

Variations

• Suggest products that reach free shipping: a Product offer with Suggest products that reach a goal shows the same “You’re $12.00 away from free shipping” with a bar, plus only the products that get the cart there. Start from the Close the gap template, set Amount to 75 (its Name is already free shipping), choose the collection to suggest from, and keep the shipping discount from step 2. It works on the cart page too, under the bar, without Shopify Plus. See close the gap.
• Free shipping, then a gift: start from the Free shipping, then a gift template, with a second milestone at 150 and Reward a free gift. Pair it with a free gift offer at the same amount.
• Weight-based: set Progress toward to Cart weight (Buddy plan), with a Total cart weight (kg) condition on the shipping discount.
• Hide the bar once complete: under Look, set Once every goal is reached to Hide the bar.

Troubleshooting

• The bar doesn’t show at all: check it’s Published, that the Content app block is in your published checkout, and that its Block IDs is empty or lists the bar. A bar made before the Content block shows in a Checkout Buddy (v1) app block instead, with its ID in Fixed block ID.
• Shipping isn’t free at $75: subtotal is after product discounts. If you built it by hand for “Standard”, check that a shipping rate with that name exists for the customer’s address.
• See progress bars for all settings.