Where a product is displayed in your theme (e.g. product detail, collection listing, search), add:
{% if product.price < product.compare_at_price %}
SALE
{% endif %}
or
{% if product.price < product.compare_at_price %}
SALE
{% endif %}
Note that it works only for short words. Instead of longer words, try to use "%".
Next, style badges in your theme css, e.g.:
.sale-badge {
position: relative;
right: 10px;
top: 10px;
font-size: 11px;
line-height: 14px;
padding: 17px 10px;
border-radius: 40px;
font-weight: bold;
background-color: #f56b60;
color: #FFF!important;
/*background-image:url(/img/sale.jpg);
background-position:0 0;
background-repeat:no-repeat;*/
}
.sale-badge-detail {
position: relative;
right: 10px;
top: 10px;
font-size: 11px;
line-height: 14px;
padding: 17px 10px;
border-radius: 40px;
font-weight: bold;
background-color: #f56b60;
color: #FFF!important;
/*background-image:url(/img/sale.jpg);
background-position:0 0;
background-repeat:no-repeat;*/
}