Show content based on customers' locations

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

You can add a custom message to the order status page that is shown only to customers with shipping addresses in a certain region. For example, you can choose to show a message only to customers who live in New York, USA. You can specify as many locations as you like.

Steps:

Desktop

1. From your Shopify admin, go to Settings > Checkout.

iPhone

1. From the Shopify app, go to Store > Settings.
2. Under Store settings, tap Checkout.

Android

1. From the Shopify app, go to Store > Settings.
2. Under Store settings, tap Checkout.

1. In the Additional scripts text box, paste the following sample code:

   {% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
   <script type="text/javascript">
     var customMessage = document.createElement("div");
     customMessage.innerHTML = '<div class="section" style="padding-top: 3em"><div class="content-box"><div class="content-box__row"><p class="os-step__description">TYPE YOUR CUSTOM MESSAGE HERE.</p></div></div></div>';
     console.log(document.querySelector("[data-order-summary-section=payment-lines]"));
     document.querySelector("[data-order-summary-section=payment-lines]").before(customMessage);
   </script>
   {% endif %}

2. Edit the code to specify where customers must be to receive the custom message. To do this, you need to edit the country and state abbreviations inside the Liquid {% if %} statement at the top of the code block. The message in the example above is set to show for customers who live in New York, USA.

   • To show the message to customers in a different state, replace NY with the state abbreviation of your choice. To find the postal abbreviation to use for a US state, you can check this list of state abbreviations from USPS.
   • To show the message to customers in New York as well as another state, add and checkout.shipping_address.province_code == 'XX' where XX is the state abbreviation of your choice. To add more states, repeat this step.
   • To show the message to customers in a different country, replace US with the country abbreviation of your choice. You also need to replace NY with a state or province abbreviation in the new country. If you prefer not to specify a state, then delete the following: and checkout.shipping_address.province_code == 'NY'.

   For additional guidance on writing Liquid if statements, see the Liquid reference on Control flow tags.

3. Place a test order to view the results on the order status page.