Overview

Product Badging is a visual labeling feature within the Unbxd Search Console’s Merchandising Workbench. It enables merchants to highlight specific products on the product cards with badges such as "Sponsored", "Special Edition", "Sale", and more. These badges serve as quick, intuitive signals that help guide customers through your catalog, enhance product visibility, and ultimately drive higher conversions without altering your inventory.

📘

Important

• Badge customization options (color, text, and font) is not supported currently.
• Currently, product badges would require an API or SDK integration and the badges shown in Search and Browse are for preview purposes only.

Benefits

• Improved User Experience: Customers can instantly identify product highlights or offers.
• Boosted Conversion Rates: Targeted badges help nudge purchase decisions.
• Flexible Merchandising: Easily apply badges across your catalog to suit marketing strategies.

Integration Method

We support two types of integration methods for Product Badges.

API Integration

Pass the below sample in your API request.

https://search.unbxd.io/63e6578fcb4382aee0eea117aba3a227/docs-unbxd700181508846765/search?q=shirt&fields=badges_unx,vPrice&version=V2

SDK Integration

To display product badges, include the badges_unx field in the productAttributes array. Once added, this field becomes available as a property in the product object within the products template function, allowing you to customize how product badges are rendered.

products: {
        el: document.querySelector(".ms-search-result-container__Products"),
        tagName: "UL",
        productItemClass: "ms-product-search-result__item",
        attributesMap: {
            unxPrice: "Price",
            unxTitle: "title",
            unxImageUrl: "imageUrl",
            unxVariants: "variants",
        },
        productType: "SEARCH",
        onProductClick: function (product, e) {
            if(product){
                localStorage.setItem('backToProductid',product.uniqueId);
            }
        },
        productAttributes: [
            "sku",
            "Url",
            "uniqueId",
            "imageUrl",
            "Name",
            "Images",
            "ProductName",
            "BasePrice",
            "Price",
            "uniqueId",
            "variants",
            "productUrl",
            "Description",
            "AdjustedPrice",
            "PrimaryImageUrl",
            "Attr_5637150579",
            "ColorHexMapping",
            "ColorImageVariantMapping",
            "Brand",
            "score",
            "badges_unx"
        ],
        template: function (product, idx, swatchUI, productViewType, products) {

            const {
                uniqueId,
                imageUrl,
                Images,
                Name,
                Price,
                AdjustedPrice,
                productUrl,
                Attr_5637150579,
                ColorHexMapping,
                ColorImageVariantMapping,
                Brand,
                score,
                badges_unx
            } = product;


            const {
                productItemClass
            } = products;

            let imageurl = Array.isArray(imageUrl) ? imageUrl[0] : imageUrl;

            let displayPrice = ``;
            var swatchBtnUI = ``;
            var btnList;
            var imgList;
            if (swatchUI) {
                btnList = swatchUI.btnList;
                imgList = swatchUI.imgList
            }
            if (btnList) {
                swatchBtnUI = '<div class="UNX-swatch-wrapper">' + btnList + '</div>';
            }
            if (imgList) {
                imagesUI = imgList;
            }

            newimageUrl = imageUrl[0];
            var custAdjustedPrice;
            if (AdjustedPrice != Price) {
                custAdjustedPrice += '<span class="msc-price__strikethrough" aria-hidden="true">$' + AdjustedPrice.toFixed(2) + '</span><span aria-hidden="true" class=""><span class="msc-price__actual" itemprop="price">$' + Price.toFixed(2) + '</span></span>'
            } else {
                custAdjustedPrice += '<span aria-hidden="true" class=""><span class="msc-price__actual" itemprop="price">$' + Price.toFixed(2) + '</span></span>'
            }
            var SwatchIm = newimageUrl.split('Products/')
            var swatchHtml = '';
            if (ColorHexMapping && ColorImageVariantMapping) {
                var json = ColorHexMapping;
                var swatches = JSON.parse(json);
                var swatchImage = JSON.parse(ColorImageVariantMapping);
                for (var i = 0; i < swatches.length; i++) {
                    if (i == 0) {
                        swatchHtml += "<li class='color-swatch selected' role='button' value='" + SwatchIm[0] + 'Products/' + swatchImage[i].Url + '&w=357&h=535&q=80&m=6&f=jpg' + "'><button style='background-color:" + swatches[i].Hex + "'></button></li>"
                    }
                    else {
                        swatchHtml += "<li class='color-swatch' role='button' value='" + SwatchIm[0] + 'Products/' + swatchImage[i].Url + '&w=357&h=535&q=80&m=6&f=jpg' + "'><button style='background-color:" + swatches[i].Hex + "'></button></li>"
                    }
                }
            }
            return [`
            <li class="ms-product-search-result__item" id="${uniqueId}" data-id="${uniqueId}" data-s="${uniqueId}" unbxd-title="${Name}" unbxd-price="${Price}" unbxdattr="product" unbxdparam_sku="${uniqueId}" unbxdparam_prank="${idx}" unbxdparam_requestId="${window.unbxdSearch.state.requestId}">
                <div aria-label="" class="msc-product has-sale">
                    <a href="/en${productUrl}">
                        <div role="link" class="msc-product__image">
                            <div class="msc-empty_image-placeholder">
                                <picture>
                                    <source class="sourceImage" data-srcset="${newimageUrl}&w=357&h=535&q=80&m=6&f=jpg"  media="(max-width:768px)" srcset="${newimageUrl}&w=357&h=535&q=80&m=6&f=jpg">
                                    <img alt="${Name}" src="${newimageUrl}&w=357&h=535&q=80&m=6&f=jpg" class="unbxdImage msc-main_image msc_image lazyloaded">
                                </picture>
                            </div>
                        </div>
                    </a> 
                    <ul class="custom-swatches">
                        ${swatchHtml}
                    </ul>
                    <a href="/en${productUrl}">
                        <div role="link" class="msc-product__details">
                        <div class="UNX-brand">${Brand ? Brand : ''}</div>
                            <h4 class="msc-product__title">${Name}</h4>
                                <span class="msc-price">${custAdjustedPrice.replace('undefined', '')}</span>
                                <p class="msc-product__text">${Attr_5637150579 == "In-store only" ? Attr_5637150579 : ''}</p>
                        </div>
                    </a>
                    <div class="product-badge">${badges_unx}</div>
                </div>
            </li>`].join('');
        }
    }

Set up Product Badges

To upload your product badges, follow the steps below:

1. Log in to Netcore Unbxd Panel and navigate to Merchandising > Product Badges

2. Click Upload file and upload the file that contains your productIDs.
3. Click Sync to begin syncing the data from your uploaded file. This will create a new attribute UNX_badges in the feed as a new column, where the badge name is appended against each product ID.

This workflow is similar to the Collections workflow. Refer here to know more.

Key Actions for Product Badges

Use Cases for Product Badges