Free shipping progress bar in the cart
What the client asked
Customers leave the cart before they reach free shipping. Show them how much more they need to spend to get it.
How I solved it
I added a progress bar to the cart drawer and the cart page. The free shipping amount is a theme setting, so the client can change it without code.
Liquid draws the bar on page load from cart.total_price. When the cart changes, JavaScript fetches window.Shopify.routes.root + 'cart.js' and updates the bar. This keeps the visitor in their own market.
The cart returns prices in the currency's smallest unit, like cents. So the bar compares the threshold in cents too.
The bar has role="progressbar" and a text message, so screen readers announce the change. This version is for a store that sells in one currency.
Tech
- Liquid
- JavaScript
- Cart Ajax API
- Theme settings