Home > Shopify Tutorials > Show Content Based on Customer's Locations

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

Last updated: September 01, 2024
Written and researched by experts at AvadaLearn more about our methodology

By Sam Nguyen

CEO Avada Commerce

This post is about how to show content based on customers’ location. As a shop owner, you maybe want to send a custom message for some specific regions, just like sometimes you need to [show content based on shipping method]. After following this, the message you expected will be shown on the order status page and only who are in the acceptable locations can view it. Here is a step-by-step tutorial for you.

Related Posts:

How to show content based on customers’ locations

Step 1: Go to Checkout

From your Shopify admin page, click on Setting which is at the bottom of the admin page. Then, choose Checkout.

 How to show content based on customers' locations

Step 2: Go to the Additional scripts

Take a view of the Order processing section. Four different sections will appear for you to choose. Make sure to find out Additional scripts which is the last. Then, select it by tapping.

 How to show content based on customers locations

Step 3: Show the message to some specific country

Copy the following code is the first thing you need to do. Afterward, paste it into the Additional scripts text box. This code is to show the message to some specific country you want.


{% 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 %}

Step 4: Show content based on customers’ locations

In this step, you will have to edit the code so that the locations are specified. Type the country or region inside the Liquid {% if %} statement which is at the top of the code. In the above sample code, the message is shown only to the customers who live in USA and New York.

  • If you want to show the message to customers in a different state, replace NY with that state you expected. Remember that it must be the abbreviation. What’s more, if you want to know the postal abbreviation of the US state, UPS will provide you with a list.
  • If you prefer to show the message to more than one state, add and checkout.shipping_address.province_code == 'XX'. To be more clear, XX is the state abbreviation. Repeat this step to add more.
  • To show the message to customers in a different country, you can change US with another name which is the country abbreviation you expected. Don’t forget to replace NY with a state abbreviation in the new country.
  • If you don’t want to specify a state, delete and checkout.shipping_address.province_code == 'NY'.

Step 5: Click Save

Finally, make sure you’ve done successfully by clicking Save button.

 How to show content based on customers' locations

Step 6: Place a test order

In this step, you can view how it works on the order status page. To do this, you need to place a test order.

To show content based on customers' locations on Iphone (Click here)

  • Step 1: Click Setting
    From your Shopify app, click Store. Then, choose Setting.

How to show content based on customers' locations

  • Step 2: Go to the Checkout section
    Select Checkout in the Store setting field.

How to show content based on customers' locations

  • Step 3: Find the Additional scripts
    Scroll down to find Order processing. You will see four options. View the Additional scripts section and click on the text box.

How to show content based on customers' locations

  • Step 4: Paste the code
    Copy the below by selecting the entire code and taping on Copy. After copying the code, make sure to paste it into the Additional scripts text box.

{% 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 %}

  • Step 5: Edit the code
    In this step, you will have to edit the code so that the locations are specified. Type the country or region inside the Liquid {% if %} statement which is at the tope of the code. In the above sample code, the message is shown only to the customers who live in USA and New York.

  • If you want to show the message to customers in a different state, replace NY with that state you expected. Remember that it must be the abbreviation. What’s more, if you want to know the postal abbreviation of the US state, UPS will provide you with a list.

  • If you prefer to show the message to more than one state, add and checkout.shipping_address.province_code == 'XX'. To be more clearly, XX is the state abbreviation. Repeat this step to add more.

  • To show the message to customers in a different country, you can change US with another name which is the country abbreviation you expected. Don’t forget to replace NY with a state abbreviation in the new country.

  • If you don’t want to specify a state, delete and checkout.shipping_address.province_code == 'NY'.

  • Step 6: Click Save
    Scroll down and make sure to select Save after you’ve done.

How to show content based on customers' locations

  • Step 7: Place a test order
    In this step, you can view the results on the order status page. To do this, you need to place a test order.

To show content based on customers' locations on Android (Click here)

  • Step 1: Click Setting
    First, you need to log in your Shopify account, go to Store. Then, choose Setting.

  • Step 2: Go to the Checkout section
    Select Checkout in the Store setting field.

  • Step 3: Find the Additional scripts
    You can find the Order processing field by scrolling down. Then, find out the Additional scripts in four options appeared and click on the text box.

  • Step 4: Paste the code
    In this step, make sure to copy the following code. After copying the code, paste it into the Additional scripts section.


{% 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 %}

  • Step 5: Edit the code
    In this step, you will have to edit the code so that the locations are specified. Type the country or region inside the Liquid {% if %} statement which is at the tope of the code. In the above sample code, the message is shown only to the customers who live in USA and New York.

  • If you want to show the message to customers in a different state, replace NY with that state you expected. Remember that it must be the abbreviation. What’s more, if you want to know the postal abbreviation of the US state, UPS will provide you with a list.

  • If you prefer to show the message to more than one state, add and checkout.shipping_address.province_code == 'XX'. To be more clearly, XX is the state abbreviation. Repeat this step to add more.

  • To show the message to customers in a different country, you can change US with another name which is the country abbreviation you expected. Don’t forget to replace NY with a state abbreviation in the new country.

  • If you don’t want to specify a state, delete and checkout.shipping_address.province_code == 'NY'.

  • Step 6: Save
    Select Save to make sure that you’ve followed this guide successfully.

  • Step 7: Place a test order
    You can view how it works on the order status page. To do this, you need to place a test order.

Summary

Above is a transparent post about how to show content based on customers’ locations. Hope you find it easy to follow. You can also [base on shipping method to show content] which inspires the customers to buy products if you’re interested in this topic.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

People also searched for