How to Create a ‘FREE Shipping’ Progress Bar on Webflow

As web developers, we know that our clients’ main goal is to make their website convert. And one of the things they like to offer their customers nowadays is free shipping when they hit a certain amount with their purchase.

This is the reason the free shipping progress bar is becoming more and more popular. I personally think it helps in making that customer really think of something else they might need (or want 😁) before they checkout, thus, giving our clients the chance to increase their sales for every order.

Because of that, here is a tutorial on how to add a free shipping progress bar on your Webflow project from scratch.

Note: Before following these steps, you need to make sure that you already have product cards on your collection/category pages with add-to-cart buttons. A progress bar is designed to listen to every click on the add-to-cart button and run the logic from there. ‍

Step 1: Design your progress bar

1. Add a main container using the ‘Div Block’ element. Add a class like ‘shipping-bar-main.’ Then add a text inside it like ‘You are $15 away from FREE shipping.’ The ‘15’ part is supposed to change depending on the computation of the logic so make sure to put it in a span so you can select it using ‘document.querySelector' on your JavaScript code later.

2. Add another one inside it just so you have more room for adjustments on spacing and your design. I’d give it a class like ‘shipping-bar-inner.’

3. Next, add another ‘Div Block’ inside the inner block you just added. This time it will be the main container of the shipping bar gauge. So you can give it a class like ‘shipping-bar.’

4. Then, add another ‘Div Block’ inside the main shipping bar container and give it a class like ‘shipping-bar-gauge.’

5. Now most of the time, this feature sits inside the cart drawer or on the cart page. Depending on where you want to place it, you can decide what width you want to give it. But to me, it is best placed in the cart drawer (top part) so that’s how we will do it in this tutorial. And that means that the width will be the same as the width of my cart drawer. No need to put the width in this case since ‘div’ automatically goes with its parent’s size.

6. Next, give your ‘shipping-bar-gauge’ and ‘shipping-bar’ a height (about 5-10px), radius (100px, but up to you if it fits your design) and a background color of your liking.

Step 2: Write your JS code

1. Declare the necessary variables. Below is the list and what they are for:

• Add to cart buttons - this is what will run the entire logic. Use a ‘document.querySelectorAll()’ method to select all of them.
• Shipping bar - the shipping gauge because its width needs to be adjusted depending on the computation of the logic. The class we set for this in Step 1 was ‘free-shipping-gauge.’
• Amount - the amount needed to qualify for the free shipping.
• Running cart amount - current running cart amount.
• Shipping bar width - calculated by the function’s logic.
  

Important note:

If your cart drawer displays quantity buttons that adjust the quantity of the already added item, you will need to also make sure that your logic listens to when it’s clicked. And some adjustments will need to be done on your code:

• Make sure your function can check if it was the add-quantity button (+) or deduct-quantity button (-). You can achieve this by adding a condition based on class. For example, check if the add-quantity button has a certain class by using the ‘contains()’ method.
• Then the function should be able to compute how much the current running cart amount. So, if it is the deduct quantity button, the price of that item should be deducted from the current cart amount, and the opposite of that if it’s the add quantity button.
  

2. Write your function for updating the shipping bar gauge. This will be the function the add-to-cart buttons will listen to. Here are the things that this function should be able to do:

• Ideally, even without the progress bar, your add-to-cart button should be able to open your cart drawer. But just in case it doesn’t, I suggest you include that functionality in your function for better user experience.
• Locate the price in the product card where that add-to-cart button sits. This will be achieved by using the ‘parentElement’ and ‘children’ properties of JS.
• Add the price to your running cart amount and check if it is currently less than your required total amount. It is where your shipping note will depend.
• Compute the percentage of the running cart amount based on the required shipping amount. So, if the current cart amount is $25 and the required shipping amount is $50, the percentage should be 50% and that is what the width of the shipping bar gauge should be.

‍

You may also view this on CodePen.

‍

Important note:

Carts are designed to keep the data even when refreshed. So, while the sample code above has the variable ‘runningCartTotal’ declared with ‘0’ as its initial value (shown in the ‘init’ function), this will not be the case for you.

Instead, as soon as the page loads, the variable should have the current total amount in the cart as the value. All you need to do is select the html tag where it sits and assign its innerText as the value. Now, yours might include unwanted characters like the currency code or symbol, but you can just remove that by looping the string and removing those characters.

This will be the same case for the free shipping bar. I put ‘0’ as the value but on your project, this is supposed to be calculated using your current ‘runningCartTotal’ as the page loads.