Add a custom notification to thank you page

Order fulfillment may take longer during special occasions such as holidays. To avoid cancelled orders due to slow delivery, you can add a custom notification for your customers on the thank you page.

Step by Step Tutorial

From your ShopBase admin site, go to Online Store > Themes > Customize > Checkout Page > More Customization > Put your custom JavaScript code here to add and change some content of Checkout pages.



Paste the following script:

var message = 'We are committed to delivering your orders as soon as possible.';

function addMessageBlock() {
  setTimeout(function() {
    const contentBoxes = document.querySelectorAll('#checkout .main .content-box');
    if (!contentBoxes || contentBoxes.length === 0) {
      return;
    }

    const messageBox = '<div class="content-box" id="additional-content-box"><div class="content-box__row"><div class="content-box__wrapper"><p class="os-step__description">' + message + '</p></div></div></div>';
    if (!document.getElementById("additional-content-box")) {
      contentBoxes[0].insertAdjacentHTML('afterend', messageBox);
    }
  }, 500);
}

window.sbsdk.ready(function() {
  window.sbsdk.page.onContextUpdate(function(context) {
      if (context.type === 'post_checkout') {
        addMessageBlock();
      }
  });
});

You can change your message in var message section upon your wish.

Click Save once finished.

Related articles

Add custom announcement to product page
Add tracking code to thank-you page
Add Power Up Scripts to optimize your store

Updated on: 15/08/2022