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

Hailey
Hailey October 07, 2018

Share:

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.

Google Tag Manager for Enchanced eCommerce and improved Shopify performence store

Get it FREE

Orders

Shopify Order API: Test Shopify orders with REST Admin API Change Order Number in Shopify Delete abandoned checkouts on Shopify Add a Tracking Number Refund an Entire Order Resend Email About Order to Customer View Order Status Page of an Order Find or Complete an Existing Draft Order Refund Order Fulfill Orders For Multiple Locations Export Orders To A CSV File Archive Fulfilled Order Add or Remove Taxes Add or Remove Customer Fulfill Part of Order Manually Create Draft Order Apply Discount to a Specific Item Add Tag to Order Add Products to a Draft Order View Marketing Activity Reports Enable Automatic Abandoned Checkout Recovery Emails Email Customer Link to their Abandoned Checkout Manually Cancel Order View the Fraud Analysis For an Order View Order's Conversion Summary Review an Order's Transaction History Print Order Delete an Order View Order Use Bulk Actions with Filter Sort Orders List Save Filter or Search Refund Part of an Order Fulfill Many Orders At Once Manually Capture Single Payment Manually Cancel Fulfillment Fulfill Orders Manually Show Content Based on Shipping Method Translate Order Status Page Show Content Based on Customer's Locations Enable Push Notifications Attach an Order Tag Add an Opt-In for Order Updates View the Status Page for One of your Orders Show Content Based On an Order for A Particular Product Run Scripts Only on the First Visit on Shopify Manually Add the Order Status URL to your Email Templates Check if Email Templates have been Customized View an Order's Timeline Edit Customer Information


Hailey
Hailey
I'm a detail-oriented, honest and hard-working of Shopify Expert, ready to work with you to find solutions to help you start your business or grow it. We offer fast deliveries without compromising quality. Fast and effective!

Comments for Show Content Based on Customer's Locations



People also searched for

Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up