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 “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.

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

Published by

Amandeep

Blogger & Web Developer having expertise in Shopify, BigCommerce, WordPress and Front-End Technologies (HTML, CSS and JavaScript).

4 thoughts on “How to add custom notification message on Shopify checkout page”

  1. Thanks for this novel solution!

    Here’s how I used your code to add a note below the shipping options:

    if(typeof Checkout === ‘object’){
    if(typeof Checkout.$ === ‘function’){
    notificationMsg = ‘1 and 2 Day Priority Shipping Options are not available for orders with lithium batteries.’;

    Checkout.$(notificationMsg).insertAfter(‘.section–shipping-method’);

    } // if ends

    } // if ends

  2. This is awesome, but what would I do if I wanted it to show a message to those that ONLY select a certain country, lets say Canada?

  3. Nice one… but this does not work anymore. Shopify has locked this down on purpose to prevent people from modifying their checkout pages. This is a problem because some businesses ONLY do local delivery, for example a flower shop, singing telegram, lawn care or food catering companies. Even your demo is broken. I do see how you pulled this off, its impressive! HEY MAN NICE SHOT! any other ideas on how to prevent shipping to states and zipcodes ON the checkout page?

    1. Are you using Shopify plus or standard Shopify? If it’s shopify plus, you can use use Script editor to add the logic at the checkout. Otherwise, you can use Advanced Shipping Rules or ShipperHQ app for complex shipping rules.

Leave a Reply

Your email address will not be published.

2 × three =