How to Show Content Based on Customer’s Locations on Shopify

Login to your Shopify website using your user credentials.

From within the admin page on Shopify, click on ‘Settings’, which is at the bottom of the admin page as you login. There is then an option labeled ‘Checkout’.

In the ‘Order processing’ section there are four different sections. Find the ‘Additional’ scripts option, which is last on the list and then select it.

Then you need to copy the code below and paste it into the text box within the ‘Additional Scripts’.

{% 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">ADD YOUR 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 %}

This message will display those in the United States and New York. You can then make the changes. Be sure that you’re using abbreviations. You can get the postal abbreviation of any US state using the list provided by UPS.

To add more than one state or area to your custom code, you can add the following code:

and checkout.shipping_address.province_code == 'XX'

Where XX is the abbreviation for the state. Remember to check the abbreviation is correct. You can also change the country. And to not specify a specific state, you can do so by removing that part of the code.

When you’ve made the changes that you want to make, click on the ‘Save’ button. This should now show your message based on the location of the customer.

Be sure to test your new code on the website. There are numerous errors that can be accidentally made when entering in the code. You might need to use a VPN to show the messages for different countries/states.

You can test your new code by placing a test order.