Implementing a Dynamic Free Shipping Progress Bar in Shopify with JavaScript

In the competitive e-commerce world, online stores must innovate to boost average order values and enhance customer experiences.

A key strategy is adding a free shipping progress bar to Shopify stores. This feature motivates customers to increase their cart size, thus improving their shopping experience.

We'll show you how to add a dynamic free shipping progress bar to your Shopify store with the help of JavaScript.

What is Free Shipping Progress Bar?

A free shipping progress bar is a visual indicator. It shows how close customers are to earning free shipping based on their cart value.

For example, Imagine you're browsing an online clothing store, adding cute sweaters and comfy sweatpants to your cart. Suddenly, a progress bar appears, inching closer to "Free Shipping!" with every item. Now, picture the thrill of seeing it reach 100% and realizing you just snagged free delivery on your cozy haul. That's the magic of a free shipping progress bar in Shopify!

By encouraging customers to add items to reach the free shipping limit, it helps increase the store's average order value.

Step-by-Step Implementation

Step 1: Set Your Free Shipping Threshold
Before implementing the progress bar, determine the minimum order value for free shipping in your store. This amount will be the target customers try to reach as they shop.

Step 2: Access Your Shopify Theme Code

• Log in to your Shopify admin panel.
• Navigate to Online Store > Themes.
• Find your active theme, click Actions, and select Edit code.

Step 3: Insert the Progress Bar HTML
In your theme's code editor, locate the file where you want the progress bar to appear, such as cart.liquid or header.liquid. Insert the following HTML code where you want the progress bar to display:

<div class="free-shipping-progress-bar"></div>

Step 4: Style the Progress Bar
Add custom CSS to your theme's theme.scss.liquid file to style the progress bar:

.free-shipping-progress-bar {
    height: 20px;
    background-color: #ddd;
    border-radius: 5px;
    transition: width 0.3s ease;
}

Step 5: Implement the Progress Logic with JavaScript
This is where the dynamic aspect of the progress bar comes into play. You will need to edit your theme's JavaScript file (usually theme.js or theme.js.liquid).

A. Define the Free Shipping Threshold

const freeShippingThreshold = 50; // Set your free shipping threshold

B. Get the Current Cart Total
Use Shopify's AJAX API:

function getCartTotal(callback) {
    fetch('/cart.js')
        .then(response => response.json())
        .then(data => callback(data.total_price / 100)); // Price in cents
}

C. Update the Progress Bar
Create a function to adjust the progress bar's width:

function updateProgressBar(cartTotal) {
    let progressBar = document.querySelector('.free-shipping-progress-bar');
    let percentage = Math.min(cartTotal / freeShippingThreshold * 100, 100);
    progressBar.style.width = percentage + '%';
}

D. Initial Update and Event Binding
Ensure the bar updates correctly:

document.addEventListener('DOMContentLoaded', () => {
    getCartTotal(updateProgressBar);
});

document.addEventListener('cart:updated', () => {
    getCartTotal(updateProgressBar);
});

Step 6: Testing and Optimization
After implementing the JavaScript logic, test the progress bar by adding or removing items from the cart. Ensure that the bar updates in real time and is compatible across different browsers and devices.

In Final words,
Adding a dynamic free shipping progress bar can significantly improve the shopping experience and boost sales.

This feature engages customers to add more to their carts, increasing your store's average order value. With our guide, anyone with basic coding skills can implement this enhancement in their Shopify store.

To get more Shopify resources, Visit: https://meetanshi.com/blog/category/shopify/