Show the remaining amount before free delivery (studio theme)

[UTOPIA-PARIS]

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

[DaisyVo]

Hi @UTOPIA-PARIS 

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:

<div id="free-shipping-message"></div>

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