A free shipping progress bar is one of the most effective ways to increase your average order value and improve customer experience. In this comprehensive tutorial, you’ll learn how to build a fully customizable free shipping bar for the Shopify Dawn theme from scratch.
What You’ll Build
By the end of this tutorial, you’ll have:
✅ A dynamic progress bar that updates in real-time
✅ Customizable messages and styling through theme settings
✅ Smooth animations and responsive design
✅ Integration with both cart drawer and cart page
✅ Support for custom colors and alignment
Prerequisites
-
Basic knowledge of Shopify theme development
-
Familiarity with Liquid, HTML, CSS, and JavaScript
-
Access to a Shopify store with the Dawn theme
-
Code editor (VS Code recommended)
Step 1: Add Theme Settings
Add the following settings to your `config/settings_schema.json` file, by copy code in this file [Source code] and add inside the cart section you can follow these images:
Add the code into the settings_schema.json file
After added code, the settings display like this image
Step 2: Create the Main Free Shipping Bar Snippet
Create a new file: `snippets/free-shipping-bar.liquid`, follow this image to know how to create file, then copy source code in this file [source code] and paste into the file
Key Features Explained:
1. Dynamic Calculations: The snippet calculates remaining amount, progress percentage, and formats monetary values
2. Token Replacement: Custom messages support `{{ amount }}`, `{{ threshold }}`, and `{{ progress }}` tokens
3. Conditional Display: Shows different content based on whether free shipping is achieved
4. CSS Custom Properties: Uses CSS variables for easy theming
Step 3: Create the CSS Styles
Create a new file: `assets/component-free-shipping-bar.css`, follow this image to know how to create file, then copy source code in this file [source code] and paste into the file
CSS Features:
1. Smooth Animations: Progress bar updates with CSS transitions
2. Shimmer Effect: Animated gradient for visual appeal
3. Responsive Design: Adapts to different screen sizes
4. CSS Variables: Easy customization through theme settings
Step 4: Create the JavaScript Functionality
Create a new file: `assets/free-shipping-bar.js`, follow this image to know how to create file, then copy source code in this file [source code] and paste into the file
JavaScript Features:
1. Web Components: Uses custom elements for encapsulation
2. Event-Driven Updates: Listens to cart update events
3. Real-Time Updates: Updates progress without page refresh
4. Clean Architecture: Proper initialization and cleanup
Step 5: Integrate with Cart Drawer
Modify your `snippets/cart-drawer.liquid` file to include the free shipping bar. Add this line where you want the bar to appear (typically after the cart header):
here is my cart-drawer.liquid file
Step 6: Integrate with Cart Page
Modify your `sections/main-cart-footer.liquid` file to include the free shipping bar:
{% render ‘free-shipping-bar’, cart: cart %}
Step 7: Include CSS/JS in Theme
Make sure to include the CSS file in your theme. Add this to your `layout/theme.liquid` in the head section before </head> tag:
Step 8: Test and Customize
1. Test the functionality:
– Add items to cart and verify the progress bar updates
– Test reaching the free shipping threshold
– Verify it works in both cart drawer and cart page
2. Customize through theme settings:
– Go to your theme customizer
– Navigate to Cart settings
– Customize messages, colors, and alignment
– Set your free shipping threshold
Conclusion
You’ve successfully built a comprehensive free shipping progress bar for your Shopify Dawn theme! This feature will help increase your average order value and improve customer experience.
The implementation includes:
✅ Real-time progress updates
✅ Customizable messages and styling
✅ Responsive design
✅ Smooth animations
✅ Theme customizer integration
Need Help?
If you run into any issues or want to extend this functionality further, feel free to reach out or check the documentation for the specific features you’re implementing.
—
*This tutorial was created for Shopify Dawn theme developers. Always test thoroughly in a development environment before deploying to production.*