Shopify Free Shipping Bar: Free Code, No App

Kettle & Fire has one of the best free shipping bars on Shopify. It runs on Boost, a paid cart app. I rebuilt it with Claude Code as one native theme section, then fixed the part I didn't like: their bar counts cartons, and ours counts dollars, so it works for any product. It has four reward tiers, discounts that apply on their own, a locked free gift that unlocks in the cart, and confetti. No app and no monthly fee. The code is free on GitHub.

Here's the full build:

What Kettle & Fire's Cart Gets Right (and Wrong)

Add one order of broth to their cart and the drawer says "Add 6 more cartons to get free shipping." Above it is a track with four rewards: free shipping, 10% off, 20% off and a free baseball hat. The hat already sits in the cart, grayed out, with a count of how many more cartons unlock it. Hit a tier and the discount shows up in the subtotal. At checkout there's no code to type. It's just applied.

That's a strong setup. Someone a few dollars short of free shipping is the easiest person in your store to move up, and the bar shows them exactly how far they have to go.

Two things I wanted to change:

• It counts cartons. Add a mug and the bar still says "add more cartons." The mug isn't a carton. A dollar amount works for every product in the store and is easier to understand.
• It's a paid app. The drawer says "Powered by Boost" (the app is Boost: Cart, Bundles & Upsells). It costs $98 to $818 a month, depending on your store's revenue. On top of the fee, it loads extra scripts that slow the store down, and changing anything means fighting its builder. I wanted it built into the theme.

What the Free Shipping Bar Does

Out of the box it has four steps. Every amount, label and message is a setting in the theme editor.

• A message that says what's next, like "Add $33 more to get free shipping!" It updates the moment the cart changes, with no page reload.
• A locked gift. Before $185 the gift shows grayed out with a lock and how much more it takes. At $185 it goes into the cart at $0 with a FREE GIFT badge. Drop back under and it comes out.
• Confetti on every tier. A small burst for each step, a full shower for the last one. Shoppers with reduced motion turned on don't see it.
• "You're saving $X" next to the cart total, with the original price crossed out.
• Two styles. One bar with an icon at each step, or four separate segments.
• It counts the cart before discounts, the same way Shopify checks discount minimums. Otherwise 20% off could knock a $160 cart back under $150 and take the 20% away.

The Build

I took screenshots of Kettle & Fire's cart drawer, dropped them into Claude Code and explained the goal:

Rebuild this cart progress bar for another brand, but more generic. Instead of it being based on how many cartons are in the cart, I want it based on a dollar amount, so it's easier to understand and it works for different items.

Claude Code came back with questions about rewards and thresholds. I kept Kettle & Fire's structure (free shipping, 10%, 20%, free gift) but asked for it to be easy to swap, since the repo is meant for other stores. I first had the gift further out, then moved it down to $185. I wanted the last step to be a small bump from 20% off, so someone close to it isn't facing a big ask.

Then two requests that came from watching Kettle & Fire's cart more closely:

• "Can the bar apply the discounts instead of showing codes?" Yes, through Shopify's automatic discounts. More on that below, because it's the part people get wrong.
• "The gift should already be in the cart, just locked." That's what Kettle & Fire does with the hat, and it gamifies the cart. The gift is already there. You just have to unlock it.

I asked for mockups in a browser. The first round was unreadable. I screenshotted it, sent it back and told Claude to fix the layout so I could actually read it. The second round was solid. I threw out one design as too hidden (a progress bar only works if people notice it) and picked the red milestone track.

Two more tweaks, each a sentence or two. The subtotal didn't show the savings, so I asked for a "You're saving" line with the old price crossed out. And the confetti was too quiet. I wanted it to fire from the top of the bar every time a shopper crosses a threshold, small for the first few and big for the last.

Claude Code was connected to a demo store through Shopify CLI, so it pushed the section to the theme. The demo cart ended up with $208 of shirts and a $68 felt fedora as the gift. The cart showed $276.00 crossed out, $166.40 as the total and "You're saving $109.60." Checkout showed the 20% off with no code typed.

How the Discounts Actually Work

The first time I went to checkout on the demo store, nothing was discounted. The bar was working. The discounts didn't exist yet.

The bar has two jobs: show progress, and add or remove the free gift. Shopify does the actual discounting, with automatic discounts you create once in the admin. Shoppers never type a code, and checkout lists each discount by its title, like "20% OFF." Shopify CLI can't create discounts, so this is a few minutes of clicking in Discounts > Create discount, or an AI agent with browser access can do it for you.

Two settings matter:

• Don't let 10% and 20% stack. Leave "Order discounts" unchecked under Combinations on both. Shopify then gives the shopper whichever is bigger instead of 30% off.
• Keep the amounts in sync. If you move a step to $75 in the theme editor, change the matching discount to $75. The bar and checkout don't talk to each other.

The free gift is a Buy X Get Y discount: spend $185 on anything from an "All products" collection, get one gift product free, limited to one per order. The README has the full table for all four.

Running free shipping or tiered offers in your emails too? We build the Klaviyo side for DTC brands.

Why Build It Instead of Paying for an App

We used to struggle with this when we set these up in apps. You'd want to change one small thing and you couldn't. Or you could, but it took hours in the app's builder. If the offer depended on specific SKUs, you'd spend two hours updating SKUs one at a time.

Now a change is a chat. You save the monthly fee, and the bar is part of the theme instead of extra code from somewhere else loading on every page. Drawing inspiration from a big brand and then changing the small things you don't like is the whole point. We copied almost exactly what Kettle & Fire has, and the dollar-based version is better for most stores.

It's the same approach we used to replace Rebuy with native checkout cross-sells, to build a shoppable lookbook section and to make a free Black Friday countdown timer.

Install It on Your Store

Setup takes about 10 minutes in two parts. Try it on a duplicate of your theme first (Online Store > Themes, click ..., then Duplicate).

Part 1: add the section (no code):

1. Copy sections/free-shipping-bar.liquid from the GitHub repo.
2. In Online Store > Themes > Edit code, add a new section named free-shipping-bar, delete the starter code and paste it in.
3. Make sure your cart opens as a drawer. In most themes that's Theme settings > Cart > Cart type: Drawer.
4. In Customize, click Add section in the Footer area and pick Free shipping bar. It doesn't show in the footer. It places itself inside the cart drawer.
5. Pick your gift product under Free gift and save.

Part 2: create the four automatic discounts in your Shopify admin, using the table in the README. Then add items until you pass $185 and check that each step lights up and the gift drops in at $0.

With Claude Code or Cursor: open your theme folder, point it at the repo and say "install this in my theme." The repo's AGENTS.md explains how the section works, so the agent can change it without breaking it in other themes.

It was built and tested on Shopify's Horizon theme and written for any Online Store 2.0 theme. It knows the cart markup in Horizon, Dawn and most other themes. If your theme names things differently, there are selector settings to point it at the right drawer, and the README has a table of fixes.

Set Thresholds From Your Own Orders

The $65 / $100 / $150 / $185 defaults are the demo store's, not a recommendation. A free shipping bar only moves people who are close. If your typical order is $40, a first step at $65 is a big ask. If it's $90, free shipping at $65 is something most shoppers already get.

Start from your own order values, not an industry average. In our AOV benchmarks across 209K orders, two jewelry brands in the same portfolio average $2,582 and $46 per order. No single "good" threshold covers both. Set the first step a little above what most of your orders already reach, then space the later steps so each one is a small bump from the last, the way the gift sits $35 past 20% off.

And remember the 10% and 20% tiers are discounts. Our first-order discount study found that 42% of customers who used a code on their first order used one again on their second, vs 17% of full-price buyers. A free gift or free shipping can be the cheaper reward.

Change It with Claude

The section is one commented file. Change it with Claude Code, or paste it into Claude and paste the answer back into your theme's code editor. Prompts that work:

• "Change the steps to free shipping at $50, 15% off at $120 and a free gift at $200."
• "Let the shopper choose between two gift products at the gift step."
• "Count items instead of dollars: free shipping at 3 items, 10% off at 6."
• "Turn off the confetti on phones but keep it on desktop."
• "Put the bar above the Cart title in the drawer."

If the gift gets added but the drawer doesn't show it until you reopen the cart, tell Claude which theme you're on. Some themes don't listen for Shopify's standard cart events, and the fix is adding your theme's refresh call. A screenshot helps.

Use the Same Threshold in Your Emails

The free shipping threshold on the site should be the one in your emails. If the welcome series says free shipping over $65, the cart should say $65 too. Abandoned cart emails are a good place to repeat it: someone who left $50 in the cart is $15 from free shipping, and that's a better hook than a reminder. Across 8 brands, about 12% of cart abandoners ordered within 7 days at the median brand, and about half of those came back in the first 24 hours. Here's how we set up the abandoned cart flow in Klaviyo.

Shopify Free Shipping Bar FAQ

How do I add a free shipping bar to Shopify without an app?

Add it as a custom section. Copy sections/free-shipping-bar.liquid from the free GitHub repo, add a new section named free-shipping-bar in Online Store > Themes > Edit code and paste it in. Then add it in the theme editor's Footer area, pick your gift product and create the matching automatic discounts in your Shopify admin. Setup takes about 10 minutes.

Does the bar apply the discounts itself?

No. The bar shows progress and adds or removes the free gift. Shopify applies the discounts through automatic discounts you create once in the admin, so shoppers never type a code. Keep the amounts in the bar and in the discounts the same.

Will 10% off and 20% off stack into 30%?

Not if you set the combinations right. Leave Order discounts unchecked on both, and Shopify gives the shopper whichever discount is bigger.

Which Shopify themes does it work with?

It was built and tested on Shopify's Horizon theme and written for any Online Store 2.0 theme, with the cart drawer markup of Dawn and most other themes built in. Your cart has to open as a drawer. If your theme names its drawer differently, selector settings in the theme editor point the bar at the right elements.

Grab the bar from GitHub or watch the build on YouTube.