This power script will helps you add a special announcement to your product page underneath your product pricing. For example: You may use this to motivates hesitating customers to buy as soon as possible to catch the juicy deals.

How it looks



Tutorial

From your store admin, go to Online Store > Preferences
Scroll to the Additional scripts > Head section and paste the script below

<script>
window.sbsdk.ready(function() {
window.sbsdk.page.onContextUpdate(function(context) {
if (context && context.type === "product") {
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 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 content in Line 8 if you need.

Save and you are done.
Was this article helpful?
Cancel
Thank you!