Add custom announcement to product page

This article will guide you how to add the code so the product page has an additional message just below the price of your product. You can use this message to write compelling content that will motivate customers who are hesitant to buy as soon as possible so as not to miss out on great deals. Custom announcement will be displayed on the product page as shown below.

Step by Step Tutorial

If you are using Roller theme, use the script below:

<script>
window.sbsdk.ready(function() {
    window.sbsdk.page.onContextUpdate(function(context) {
        if (context && context.type === "product") {
            if (!document.getElementById("custom-text")) {
            setTimeout(function() {
                var options = { weekday: 'long', month: 'long', day: 'numeric' };
                var today  = new Date();
                var currentTimeString = today.toLocaleDateString("en-US", options);
                var discountCode = "FD10";
                var discountPercentage = "10%";
                var target = document.getElementsByClassName('product__price').length > 0 ? document.getElementsByClassName('product__price') : document.getElementsByClassName('price');
                var text = "<p id='custom-text' style='font-size: 18px;'> Father Day Promotion, using code <b>{{discountCode}}</b> for <b style='color: #c5392e'>{{discountPercentage}} Off.</b><br>Ends on <b>{{currentTimeString}}</b></p>"
                var replaceVariable = function(txt, params) {
                  params.map(function(item) {
                    var txtNeedReplace = "{{" + Object.keys(item)[0] + "}}";
                    if (txt.indexOf(txtNeedReplace) !== -1) {
                         txt = txt.split(txtNeedReplace).join(Object.values(item)[0]);
                    }
                  });
                    return txt;
                }
                text = replaceVariable(text, [{"discountCode": discountCode}, {"discountPercentage": discountPercentage}, {"currentTimeString": currentTimeString}]);
                if (target && target.length > 0) {
                  target[0].insertAdjacentHTML('afterend', text); 
                } 
            }, 1000);
           }
        }
    });
});
</script>

If you are using Inside theme, use the script below:

<script>
window.sbsdk.ready(function() {
    window.sbsdk.page.onContextUpdate(function(context) {
        if (context && context.type === "product") {
            if (!document.getElementById("custom-text")) {
            setTimeout(function() {
              	var priceSelector = document.querySelector('div.product__price-span');
                var target = priceSelector || document.querySelector('.price');
              	if (!target) {
                  return;
                }
                var options = { weekday: 'long', month: 'long', day: 'numeric' };
                var today  = new Date();
                var currentTimeString = today.toLocaleDateString("en-US", options);
                var discountCode = "FD10";
                var discountPercentage = "10%";
                var text = "<p id='custom-text' style='font-size: 18px;'> Father Day Promotion, using code <b>{{discountCode}}</b> for <b style='color: #c5392e'>{{discountPercentage}} Off.</b><br>Ends on <b>{{currentTimeString}}</b></p>"
                var replaceVariable = function(txt, params) {
                  params.map(function(item) {
                    var txtNeedReplace = "{{" + Object.keys(item)[0] + "}}";
                    if (txt.indexOf(txtNeedReplace) !== -1) {
                         txt = txt.split(txtNeedReplace).join(Object.values(item)[0]);
                    }
                  });
                    return txt;
                }
                text = replaceVariable(text, [{"discountCode": discountCode}, {"discountPercentage": discountPercentage}, {"currentTimeString": currentTimeString}]);
                target.insertAdjacentHTML('afterend', text);
            }, 1000);
           }
        }
    });
});
</script>

Additional scripts added to the store will NOT load on the checkout page for security reasons and to prevent payment interference. Use ShopBase’s built-in tracking and integrations instead.

Related articles