How to add custom notification message on Shopify checkout page
Today, I’ll write Quick tutorial on how to add custom notification message on shopify checkout. We’ll add two notifications, first one will remain visible all the time on shipping address page and second one will appear if customer select shipping country other than US.
Today, I’ll write Quick tutorial on how to add custom notification message on shopify checkout. We’ll add two notifications, first one will remain visible all the time on shipping address page and second one will appear if customer select shipping country other than “United States”.
Here is the demo.
Here are the implementation steps:
Step 1: Go to Shopify Admin Panel. Under Sales Channel, Click on “Online Store” and after go to “Preferences” page.
Step 2: Under Google Analytics Section, It will have an option “Add Custom JavaScript to Google Analytics”. Just click on that.
Step 3: Paste this code in the script box.
<pre class="brush: jscript; title: ; notranslate" title="">
function countryCheck(country) {
if(country != 'United States'){
Checkout.$("#country-message").show(0);
} else {
Checkout.$("#country-message").hide(0);
}
}
if(typeof Checkout === 'object'){
if(typeof Checkout.$ === 'function'){
//Default Message will be visible where as country specific message will be hidden
notificationMsg = '<p id="default-message" style="background-color:#eee; padding:10px; margin:10px 0;">This is a default message. It will appear on page load.</p><p id="country-message" style="background-color:#eee; padding:10px; margin:10px 0; display:none;">This message will appear when you select country other than US.</p>';
//Country Selectbox Selectbox
$countrySelectboxId = Checkout.$("#checkout_shipping_address_country");
// Insert Default Message on Page Load above the shipping methode section
Checkout.$(notificationMsg).insertBefore('.section--shipping-address');
// Check Country on Page Load
countryName = $countrySelectboxId.val();
// Call Country Check function on Page Load
countryCheck(countryName)
// Call Country Check function on selectobox change
$countrySelectboxId.on("change", function(){
countryName = $countrySelectboxId.val();
countryCheck(countryName)
});
} // if ends
} // if ends
Now, Just save and then test.
You can also check the final code files on github: https://github.com/amandeepsinghvirdi/shopify-checkout