Upsell Free Shipping to Increase Average Order Value

If you have a free shipping offer for orders over a certain value you should take every opportunity to let people know. By showing them how close they are you are likely to increase your average order value by getting more people to take advantage of the offer. Here is how this looks after implementation.

Upsell in the Minicart

Upsell in the Full Cart Page

Howto: Add Javascript for the Upsell message

Check your free shipping value setup in Admin→Store Settings→Deliver and check your price range for your free delivery offer. We also have this article on how to setup free delivery for order values over a threshold.
Add the javascript below to your Footer block in Admin→Appearance→Theme Options→Footer block
In the Javascript you pasted from below set your free shipping value in the variable named requiredamountFreeShipping which matches your shipping rules in the store.
Also in the Javascript replace the storecurrencysymbol variable with your currency symbol (as seen in your cart), for example $, €, £, EUR, GBP, etc..
Publish and Test your changes on the storefront.

<script>

var requiredamountFreeShipping = 50;
var storecurrencysymbol = "$";

var freeDeliveryHTML = "<div class='freedelivery_wrapper'><div class='getfreedelivery'>Spend <strong><span id='valueneeded'></span></strong> more for <strong>FREE</strong> delivery</div><div class='freedelivery'><strong>FREE</strong> Delivery!</div></div>";

var calculateFreeDelivery = function (cartprice) {
    var totalneeded = requiredamountFreeShipping - cartprice;
    var fixednumber = totalneeded.toFixed(2);

    // run the calculation to get the right value and message
    if (cartprice < requiredamountFreeShipping) {
        document.getElementById("valueneeded").innerHTML = storecurrencysymbol + " " + fixednumber;
        $(".getfreedelivery").show();
        $(".freedelivery").hide();
    } else {
       
        $(".freedelivery").show();
        $(".getfreedelivery").hide();
    }
};

$(document).ready(function (e) {
    // CART PAGE - FREE SHIPPING MESSAGE
    if ($('body').hasClass('ex-cart')) {
        $(freeDeliveryHTML).insertBefore(".cart-resume");

        var cartprice = $(".cart_sub_total").first().text().replace(storecurrencysymbol, "");
        calculateFreeDelivery(cartprice);
    } else {
        // MINI CART - FREE SHIPPING MESSAGE
        $('.softgraybackground.mini-shopping-cart .cart-totals').prepend(freeDeliveryHTML);

        var minicartprice = $(".mini-shopping-cart .cart_sub_total").text().replace(storecurrencysymbol, "");
        
        calculateFreeDelivery(minicartprice);
    }

    document.addEventListener('cart-total-update', function (e) {
        // calculate free delivery
        calculateFreeDelivery(e.detail.sub_total_with_discount)
    }, false);

}); // Document ready

</script>

Make it pretty

You can use CSS styling to change the look of the upsell message and give it the colours and emphasis you want.