Hey !
how can i show the remaining amount before free delivery in the cart header product view after add to basket the product like this :
website: utopia-paris.fr
theme : Studio
Topic summary
A user seeks to display the remaining amount needed to qualify for free delivery in the cart header after products are added, similar to functionality shown in a reference image.
Proposed Solution:
- Set a free shipping threshold constant (e.g., $50)
- Use JavaScript to calculate the remaining amount by subtracting the cart total from the threshold
- Display dynamic messages: either the amount needed or confirmation of qualification
- Integrate with Shopify’s AJAX Cart API to fetch cart totals and trigger updates when products are added
- Add a dedicated HTML container (div with ID) in the theme to display the message
The response provides code snippets for threshold configuration, calculation logic, and cart integration. The solution updates the message dynamically as customers add items to their cart, helping encourage additional purchases to reach the free delivery threshold.
To display the remaining amount needed for free delivery in the cart header after a product is added, you can use JavaScript to calculate and update the message dynamically. Here’s how:
1. Set the free shipping threshold in your code:
const freeShippingThreshold = 50; // Replace with your free delivery threshold.
2. Calculate the remaining amount:
function updateFreeShippingMessage(cartTotal) {
const remaining = freeShippingThreshold - cartTotal;
const message = remaining > 0
? Add $${remaining.toFixed(2)} more for free delivery!
: ‘You qualify for free delivery!’;
document.querySelector(‘#free-shipping-message’).innerText = message;
}
3. Update the cart header when products are added: Use Shopify’s AJAX cart API to retrieve the cart total and call the update function.
4. Example Integration:
fetch(‘/cart.js’)
.then(response => response.json())
.then(cart => {
updateFreeShippingMessage(cart.total_price / 100); // Convert cents to dollars.
});
5. Add the message container to your theme:
This will dynamically update the message in the cart header when products are added.
If you have other questions, I am willing to answer them more.
Best regards,
Daisy