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.
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.
1. Declare the necessary variables. Below is the list and what they are for:
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:
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:
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.