bigcommerce free shipping badge

<script>
$(document).ready(function() {
$(".ProductList li").each(function(){
var $product = $(this);
var productURL = $(".ProductDetails a", this).attr("href");
$.get(productURL , function(data) {
var shippingText = $(data).find('.shipping-info .Value').text();
if($.trim(shippingText) == "Free Shipping"){
$product.prepend('<div class="free-shipping-label">Free Shipping</div>');
}
});
});
});
</script>



2) Edit ProductAddToCart.html and replace:

<div class="DetailRow" style="display: %%GLOBAL_HideShipping%%">
<div class="Label">%%LNG_Shipping%%:</div>
<div class="Value">
%%GLOBAL_ShippingPrice%%
</div>
</div>


with: 

<div class="DetailRow shipping-info" style="display: %%GLOBAL_HideShipping%%">
<div class="Label">%%LNG_Shipping%%:</div>
<div class="Value">
%%GLOBAL_ShippingPrice%%
</div>
</div>


3) Edit custom.css and paste this code at the bottom: 

.free-shipping-label {
background: #000;
color: #FFF;
width: 130px;
text-align: center;
position: absolute;
z-index: 10;
padding-top: 4px;
padding-bottom: 4px;
}