How to add a free shipping progress bar to Shopify without code

Why a progress bar works better than a banner

A static banner says “Free shipping over $50” and leaves the maths to the shopper. A progress bar does the maths for them and updates with every change to the cart. The gap feels smaller and more concrete, so more shoppers look for one more item rather than heading straight to checkout.

What a good bar does

• Has three clear states. An empty-cart message that states the offer, an in-progress message with the exact amount remaining, and a success message when they qualify.
• Updates instantly. If the shopper adds an item from a cart drawer and the bar still shows the old amount, it looks broken. The bar should react without a page reload.
• Matches your store. Your colours and font, so it reads as part of the site rather than an advert.
• Stays out of the way on mobile. Short messages, sensible height and an option to dismiss it.
• Uses the right currency. “Add ₹450 more” in a store that sells in rupees, not a converted dollar amount.

Common mistakes

• The bar promises something checkout doesn’t give. The most damaging mistake. A progress bar is a message; the discount itself is a shipping rate in Shopify. Set it up first under Settings → Shipping and delivery with a condition based on order price.
• The threshold in the bar and in shipping settings don’t match. Change both together.
• Too much text. “Add $12 more for free shipping!” beats a sentence about policies and exclusions. Put the details on your shipping page.
• A threshold that’s out of reach. If the gap is bigger than your typical add-on, the bar becomes a reminder of shipping cost. See how to choose a free shipping threshold.

Add a progress bar with ShipLift

ShipLift Progress Bar is a Shopify app that adds a live bar without theme code. Once installed:

1. Open ShipLift from your Shopify admin and go to Rules & Targeting. Enter your threshold and currency, and choose where the bar appears: all pages, the homepage, product pages or the cart.
2. In Customize Design, set colours, font size, bar height and your three messages. Use {threshold} and {remaining} in messages and the bar fills in the amounts.
3. Go to Online Store → Themes → Customize. Under App embeds, switch on Free Shipping Bar and save.
4. Optional: on your cart page, add the Tiered Progress Bar block to show up to three milestones, such as free shipping at $50, 10% off at $75 and a gift at $100.
5. Use test mode to preview, then add items to a cart and check each state on desktop and mobile.

ShipLift also includes a simple dashboard showing how often the bar was seen and how often shoppers reached the goal, so you can tell whether a new threshold is working.

A quick launch checklist

• The free shipping rate exists in every zone where you advertise it.
• The bar and the shipping rate use the same amount and currency.
• Messages are short and read well on a narrow phone screen.
• The bar updates when you add, remove and change quantities in the cart drawer.
• You’ve noted today’s average order value so you can compare in a month.