This article is also available in:
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

From ShopBase admin site, go to Online Store > Preferences

Scroll to the Additional scripts, in Head section, paste 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);
}
}, 500);
}
}
});
});
</script>



You can change the content displayed on product page in this line: <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>.

Click Save and you are done.

Related articles

Block or allow certain countries to access the store
Block traffic from spyware to your site
Hide the Paypal Express Checkout button
Add Power Up Scripts to optimize your store
Add Facebook Live Chat to your store
Was this article helpful?
Cancel
Thank you!