# This guide will help you understand
Why should you use a free delivery weblayer
How to implement and use it
In order to implement the free delivery banner, some JavaScript knowledge is required for parsing the correct information from the web page about the current cart value.
# Why should you use free delivery weblayer
Free delivery is one of the major factors influencing whether the visitor will turn into a customer while shopping online. The aim of the banner is to highlight the information about free delivery if such service is offered.
You probably have a purchase price threshold that needs to be reached in order to offer free shipping. If you base the banner on an actual shopping cart value, it will inspire the customer to increase the order value and eventually buy the products after reaching the threshold.
The weblayer has two versions, one showing the remaining value to reach the threshold and the second one, which is displayed after the threshold is reached.
# Implementation of the free delivery weblayer
If needed, read more about [weblayers](🔗) in the linked article.
After clicking on the button for creating a new weblayer, choose the medium rectangle template as shown in the picture.

In the `Design>Editor
` tab, click on the `<>
` button on the right side of your screen, click on the settings icon and choose JS, as shown in the picture below.

Afterwards, replace the JS code with the one below.
Then replace the content of the function "cartValue" with code that will parse the current cart value from the web page.
Afterwards, create a custom control group that will have identical code (see the picture below), except the part of the code below has to be either deleted or commented (using /* */). This is important for homogeneous groups and correct evaluation.
<pre class="EnlighterJSRAW" data-enlighter-language="js">document.body.insertAdjacentHTML('beforeend', self.html); var banner = self.banner = document.querySelector('.exponea-popup-banner'); banner.insertAdjacentHTML('afterbegin', ' '); var btnClose = banner.querySelector('.exponea-close'); if (show == "deliveryPayed") { $('.exponea-text').append(deliveryPayedHtml); var price = Math.round(calculatedeliveryValue() * 100) / 100; insertPriceTobanner(price); } if (show == "deliveryFree") { $('.exponea-text').text(deliveryFreeHtml); } self.sdk.trackLink(banner, 'banner', getEventProperties('click')); requestAnimationFrame(function () { document.querySelector('.exponea-popup-banner').className += ' exponea-animate'; }); btnClose.onclick = function (e) { removeBanner(); self.sdk.track('banner', getEventProperties('close')); e.preventDefault(); if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } return false; } }</pre>

You can make use of [contextual personalization](🔗) to serve the best weblayer variants for your customers.
After doing everything as suggested, you can manipulate the weblayer settings parameters listed below and use them to set the two versions of the weblayer:
Minimal cart value - if the cart value is above this number, the banner is displayed
Maximal cart value - if the cart value is above this number, the customer reached the threshold, therefore a text similar to "Delivery for free" is displayed
Delivery paid - Text to display if the customer doesn't dispose of with free delivery. This text must contain code `
<span name="exp-cart"></span>
`Delivery free - Text for free delivery