Add Product Badge

The script below shows how to add a tag-based badge and a sale badge base on 'compare at price' in Shopify

Shopify - 

<script>
var __isp_options = {
isp_serp_with_product_attributes: 1,
isp_serp_callback: function (data) { 

for (const key in ISP_PRODUCTS) {
const product = ISP_PRODUCTS[key];
const $gridItem = $(`.isp_grid_product[product_id="${key}"]`); 

// set badges
Badges.create(product, $gridItem); 
} 
}/* end of isp_serp_callback*/
};

const TAG_FACET_NAME = "Tag";
const NEW_TAG_NAME = "New release";
const BEST_SELLER_TAG_NAME = "Best Seller";

const Badges = {

create: (product, $gridItem) => {
if ($gridItem.hasClass("inventory")) return;

$gridItem.addClass("inventory");
Badges.set(product, $gridItem);
},

set: (product, $gridItem) => {
if($gridItem.find(".isp-custom-badge").length > 0) return;

const tags = Badges.getProductTags(product);

if(Badges.isNewEdition(tags)){
$gridItem.prepend(`<span class="isp-custom-badge new-release">New Release</span>`);
} else if(Badges.isOnSale(product)){
$gridItem.prepend(`<span class="isp-custom-badge on-sale">On Sale</span>`);
} else if(Badges.isBestSeller(tags)){
$gridItem.prepend(`<span class="isp-custom-badge best-seller">Best Seller</span>`);
} 
},

getProductTags: (product) => {
const tags = product.att.find(x => x[0] === TAG_FACET_NAME);
return tags ? tags[1] : [];
},

isNewEdition: (tags) => {
return tags.includes(NEW_TAG_NAME);
},

isOnSale: (product) => {
const originalPrice = parseFloat(product.p);
const price = parseFloat(product.p_c);

return price && originalPrice && originalPrice > 0 && price > 0 && price > originalPrice;
},

isBestSeller: (tags) => {
return tags.includes(BEST_SELLER_TAG_NAME);
},

};
</script>
<style>
/* Badges */
.isp-custom-badge {
display: flex;
position: absolute; 
font-weight: 400;
font-style: normal;
z-index: 1;
top: 10px;
right: 10px;
min-width: 8vw;
height: 30px;
padding: 0 30px 0 30px;
margin: 0 0 0 0;
align-items: center;
justify-content: center;
font-size: 16px;
font-family: "proxima-nova";
line-height: 30px;
text-align: center;
white-space: normal;
border-radius: 15px;
}

.isp-custom-badge.on-sale {
color: #fff;
background-color: #2263b2;
}

.isp-custom-badge.new-release{
color: #fff;
background-color: #2263b2;
} 

.isp-custom-badge.best-seller {
color: #fff;
background-color: #2263b2;
} 
</style>

Big Commerce

var __isp_options = {
isp_serp_with_product_attributes: 1,
isp_serp_callback: function (data) {

for (const key in ISP_PRODUCTS) {
const product = ISP_PRODUCTS[key];
const $gridItem = $(`.isp_grid_product[product_id="${key}"]`); 

// set badges
Badges.create(product, $gridItem); 
} 
}
};

const OTHER_TAG_NAME = "Other Badge";
const SPECIAL_TAG_NAME = "Special Offer";

const Badges = {

create: (product, $gridItem) => {
if ($gridItem.hasClass("inventory")) return;

$gridItem.addClass("inventory");
Badges.set(product, $gridItem);
},

set: (product, $gridItem) => {
if($gridItem.find(".poffer-badge").length > 0) return;

var $other = Badges.getProductTags(product,OTHER_TAG_NAME);
var $special = Badges.getProductTags(product,SPECIAL_TAG_NAME);

if($other != null){
$gridItem.prepend('<span class="poffer-badge"><span>' + $other + '</span></span>');
} 
if($special!= null){
$gridItem.prepend('<span class="poffer-badge"><span>' + $special + '</span></span>');
}

},

getProductTags: (product, NAME) => {
var productAttributes = product.att;
var value = null;

value = productAttributes.find(function (a) {
return a[0] === NAME;
}) || false;

if (value) {
return value[1].join(', ').isp_replaceAll(/®/, '<sup>®</sup>');
}
},
};