Overview

Product Badging is a visual labeling feature within the Unbxd Search panel's merchandising workbench. It enables merchants to highlight specific products on the product cards with badges such as Sponsored, Special Edition, Sale, and more. This would help the merchandisers to:

• 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.

These badges serve as quick, intuitive signals that help guide customers through your catalog, enhance product visibility, and ultimately drive higher conversions.

📘

Important Points to Remember

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

Follow the steps below to implement Product Badging on your Panel.

1. API/ SDK Integration
2. Panel Set-up

Below table gives Header and one liner to put-Gargi. Merge this and use case table

Integration Method

We support two types of integration methods for Product Badges.

API Integration

(Placeholder: API used and overview, endpoints, method, parameters[(descriptions), req(y/n), datatype], error codes. ) Pass the below sample in your API request-which 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. This allows 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"// This allows you to customize how product badges are rendered.
        ],
        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.

Once this is done, you can see the Product Badges on your Product Listing Page.

Functionalities

One line-Gargi

Use Cases for Product Badges