Stop Paying Monthly for a Shopify Free Shipping Bar

Are you paying $5, $10, or even $20 per month for a Shopify app that displays a simple free shipping progress bar? You're not alone—thousands of store owners are overpaying for functionality that can be built directly into your theme.

One of the first things I do when I start working with clients is check their stores for app bloat. You would be surprised how many merchants are spending ridiculous amounts on apps and features that don't require apps. These apps often slow down stores and create unnecessary recurring costs.

In this guide, we'll show you how to create a custom free shipping bar that works exactly like those paid apps, but costs you nothing beyond a one-time setup. This tutorial uses Shopify's default Horizon theme, but the same logic applies to other themes as well.

Why Free Shipping Bars Matter

Free shipping bars are one of the most effective conversion tools for e-commerce stores. They create urgency, reduce cart abandonment, and increase average order value by encouraging customers to add just a few more items to qualify for free shipping.

Most Shopify store owners turn to apps like "Free Shipping Bar" or "Progress Bar" to add this functionality. While these apps work, they come with recurring monthly costs that add up over time.

The Problem with Paid Apps

Common Issues:

• Monthly subscription fees ($5-$20/month)
• Limited customization options
• Potential performance impact from third-party scripts
• Dependency on app updates and compatibility

The Solution: Build it yourself using Shopify's native Liquid code and a bit of JavaScript. Custom code on the front end is faster because it doesn't link to external scripts, looks seamless with your brand, and serves the exact same functionality—often better than an app does. Plus, you're not paying a recurring monthly charge.

Prerequisites

Before we begin, you'll need:

1. Download the theme files: Enter your store URL and email in the form below to download the necessary theme files.
2. Duplicate your theme: Always work on a duplicate theme, never your live theme. This ensures your customers don't experience a broken store while you're making edits.

Step-by-Step Implementation

Step 1: Download and Prepare Theme Files

First, download the theme files using the form below. Once downloaded, unzip the file—it contains all the files you'll need to create or edit in your Horizon theme (or your current theme).

Important: Before making any changes, duplicate your current theme in the Shopify admin:

1. Go to Online Store > Themes
2. Click the "..." menu on your current theme
3. Select "Duplicate"
4. Wait for the duplication to complete
5. Click "..." on the duplicated theme and select "Edit code"

This ensures you have a backup and aren't working on your live store.

Step 2: Create the Shipping Progress Bar Snippet

The primary file where most of the code exists is the shipping-progress-bar.liquid snippet file.

1. In your theme code editor, navigate to the Snippets directory
2. Click "Add a new snippet"
3. Name it shipping-progress-bar.liquid
4. Open the shipping-progress-bar.liquid file from your downloaded files
5. Copy and paste the entire contents into your new snippet

This file contains the structure and logic for the shipping progress bar. It checks theme settings like shipping_progress_bar_enabled and shipping_progress_bar_threshold to control when and how the bar displays.

Step 3: Add CSS and JavaScript Files

The snippet references two additional files for styling and interactivity:

1. Create shipping-progress-bar.css:

   • Navigate to the Assets directory in your theme
   • Click "Add a new asset"
   • Name it shipping-progress-bar.css
   • Copy the contents from the CSS file in your downloaded files

2. Create shipping-progress-bar.js:

   • In the same Assets directory
   • Click "Add a new asset"
   • Name it shipping-progress-bar.js
   • Copy the contents from the JavaScript file in your downloaded files

The CSS file handles all the styling for the progress bar, while the JavaScript file handles dynamic updates when customers change cart quantities or add items after the page has loaded.

Step 4: Add Theme Settings

The progress bar needs settings in your theme configuration so you can enable/disable it and set the free shipping threshold.

1. Navigate to Config > settings_schema.json
2. Find the drawer_drop_shadow setting (around line 1877)
3. Add the shipping progress bar settings right underneath it

The settings should include:

• shipping_progress_bar_enabled - Toggle to enable/disable the bar
• shipping_progress_bar_threshold - The cart value threshold for free shipping

After saving, you'll see these settings appear in your theme customizer under Theme settings > Drawers, but they may show as "missing translation" until we add the translations in the next step.

Step 5: Add Translations

The settings use translation files to support internationalization. We need to add translations in two files:

File 1: locales/en.default.json

1. Navigate to Locales > en.default.json
2. Find the "view_pricing_info" entry
3. Add the shipping progress bar translations right after it:
   • "shipping_progress_towards_free_shipping_threshold" - The main message
4. Find entries like "cart_total" and "checkout"
5. Add these customer-facing messages:
   • "add_more_for_free_shipping" - Message shown when customer hasn't reached threshold
   • "free_shipping_unlocked" - Message shown when customer qualifies for free shipping

File 2: locales/en.default.schema.json

1. Navigate to Locales > en.default.schema.json
2. Find "carousel_pagination" under "cart_features"
3. Add the shipping progress bar translation
4. Find "carousel_layout_on_mobile" and locate "checkout_buttons" under it
5. Add the shipping progress bar translations there
6. Find "seller_note_open_by_default"
7. Add the "shipping_progress_bar_enabled" and "shipping_progress_bar_threshold" translations

After saving these files, refresh your theme settings—the translations should now appear correctly.

Step 6: Include the Snippet in Your Theme

The progress bar won't display until we include the snippet in your theme's layout.

1. Navigate to Snippets > header-actions.liquid
2. Find the cart_drawer_content section (around line 176)
3. Add {% render 'shipping-progress-bar' %} right underneath it

This renders the shipping progress bar inside your cart drawer.

Step 7: Configure Shipping Settings

This implementation is front-end only. To actually enable free shipping, you need to configure your shipping settings in Shopify:

1. Go to Settings > Shipping and delivery
2. Click "Manage rates" for your shipping profile
3. Click "Add rate" or edit an existing rate
4. Select "Conditional pricing"
5. Set a minimum price (e.g., $50, $100, or whatever threshold you set in the theme settings)
6. Title it "Free Shipping" or similar
7. Set the price to $0.00
8. Save

Now customers who reach your threshold will see the progress bar and can actually check out with free shipping.

Testing Your Implementation

After completing all steps:

1. Refresh your storefront
2. Add items to your cart
3. Open the cart drawer
4. You should see the shipping progress bar displaying:
   • How much more is needed to reach free shipping (if below threshold)
   • A "Free shipping unlocked" message (if above threshold)
5. Test by changing quantities and adding/removing items—the bar should update dynamically

Customization Options

Once you build your own free shipping bar, you can customize it in ways that paid apps often don't allow:

• Custom messaging: Change the text based on cart value or customer segments
• Visual design: Match your brand exactly with custom CSS
• Animation: Add smooth progress animations
• Multiple thresholds: Different thresholds for different customer segments
• A/B testing: Easily test different messaging and designs
• Internationalization: Support multiple languages through translation files

Performance Benefits

Custom solutions built directly into your theme typically perform better than third-party apps because:

• No external API calls
• Faster page load times
• Better mobile performance
• Reduced dependency on external services
• Seamless integration with your theme

Cost Comparison

Let's break down the real cost of paid apps:

• Paid App: $10/month × 12 months = $120/year
• Custom Solution: One-time setup (or free if you do it yourself)
• Savings: $120+ per year, every year

For a growing store, this savings compounds over time. After 5 years, you've saved $600+ that could be invested in other growth initiatives.

Troubleshooting

If you encounter issues:

1. Settings show "missing translation": Make sure you've added all translations in both en.default.json and en.default.schema.json
2. Progress bar doesn't appear: Verify that:
   • The snippet is included in header-actions.liquid
   • The settings are enabled in theme customizer
   • All files (CSS, JS, Liquid) are created correctly
3. Bar doesn't update dynamically: Check that the JavaScript file is properly linked in the snippet

Need Help?

If you need help implementing this on your site, reach out through the contact form on our website. We're happy to assist with the implementation or answer any questions you have.

Conclusion

Don't let monthly subscription fees eat into your profit margins. With a bit of custom code, you can build a free shipping bar that works exactly as you need it to, without the recurring costs. The implementation is straightforward, and once it's set up, you'll have a faster, more customizable solution than any paid app.

Ready to stop paying monthly fees? Download the theme files below and follow the steps above to implement your custom free shipping progress bar today.