How to Get Visitor Location on a Shopify Site

How to Get Visitor Location on a Shopify Site

July 31, 2024

Updated: August 29, 2024

Author: Joe

Shopify Expert, store owner for 7 years, developer, former eCommerce marketer and consultant

This guide shows you how to identify the location of a person visiting your website.

Includes: code snippets, example use cases, and how to integrate into a Shopify theme.

Contents

Why get a visitor's location?

This has been requested enough times I figured it would be useful to create a how-to guide.

Some common reasons I've seen people ask for this functionality:

  • Show custom text based on geographic region
  • Hide add to cart or checkout button for certain countries
  • Hide / show specific shipping options

Code snippet to get the visitor location

Here's a basic JavaScript snippet you can use get the visitor's location:

<script> fetch("https://ipinfo.io/json") .then((response) => response.text()) .then((data) => { alert(data); console.log(data); }); </script>

The alert(data) line will show a popup box with the info. Delete that line if you're testing this on a live site.

The console.log(data) line will show the info in the console of the browser you're using. If you're not familiar with using the console, search for "open developer console in [whatever browser you're using]".

How It Works

The script makes a call to a publicly available API at ipinfo.io, a company that provides IP address data, and returns the data from the browser that triggered that script.

⚑️ To see an even quicker example, without adding code, just navigate to this url: ipinfo.io/json

IPinfo gives you 50,000 free requests per month. If the page you're putting this script on does more than 50k pageviews per month, contact them to ask about a paid plan.

How to integrate into a Shopify theme

Here are the steps to integrate this snippet on the product page of a Shopify website.

1. Duplicate your live theme

In your Shopify admin panel click Online Store then Themes.

Click the 3 dots next to your theme and select Duplicate.

After your theme has been duplicated, click the 3 dots on the new theme and select Edit code.

Now you're editing the code on a backup theme, so you can preview your changes without affecting the live site.

2. Open the file you want to add the code

In the theme editor, click the Snippets folder and select the file buy-buttons.liquid.

This example is for the Dawn theme, but Shopify themes usually follow a similar structure.

If you can't find the file in this example just look for a similar named file in the Snippets folder, or pick another file where you want this to show up. Since you're on a test theme, you can experiment.

Copy and paste these 2 code snippets just below the <div class="product-form__buttons"> line (scroll down to see an example in-file).

<p id="country-message"></p> <style> #country-message { background: #b5ffa9; border-radius: 5px; padding: 4px 8px; } </style> <script> fetch("https://ipinfo.io/json") .then(response => response.text()) .then(data => { const country = JSON.parse(data).country; if (country == "US") { document.getElementById("country-message").innerText = "We have 2 day shipping in the USA πŸ‡ΊπŸ‡Έ"; } else if (country == "BR") { document.getElementById("country-message").innerText = "We ship to Brasil πŸ‡§πŸ‡·πŸ˜ƒ"; } }) </script>

Here's what the code will look like in the Dawn theme:

Show a message based on user location

How the code works

<p id="country-message"></p> is a placeholder that starts blank, and gets filled with the text you select if the country condition matches.

The code inside the <style> block controls the look of the message box. Developer note: I'd usually put that code in a custom.css file instead, to keep the HTML and CSS separate, but keeping here for the example to have everything neatly packed.

After polling ipinfo.io/json, it extracts the 2 digit country code of the browser location.

See country code references here: https://www.iban.com/country-codes.

If you're in a different country, swap in your country code for one of those so you can see the messaging.

Walking through the code it reads like this:

  • If the visitor is in the United States (US) then show the message "We have 2 day shipping in the USA πŸ‡ΊπŸ‡Έ"
  • If the visitor is in Brazil (BR) then show the message "We ship to Brasil πŸ‡§πŸ‡·πŸ˜ƒ"
  • If the visitor is in neither country, then nothing will show

πŸ’‘ Because Brazil is spelled Brasil in Portuguese, we're showing correct spelling to the local region, which brings up another use case for this functionality: use local specific spelling / language.

You could even go a step further and translate the message to Portuguese: "Entregamos no Brasil πŸ‡§πŸ‡·πŸ˜ƒ"

What it looks like

Save your file then click Preview store and navigate to a product page, you should see your message like this:

Show a message above the add to cart button in Dawn

Tips and Ideas

If you're not familiar working with CSS, here are some beginner examples.

If you're not familiar with RGB colors, search "color picker" in Google to get the values to change the color of the message box.

More ideas:

  • If you want to restrict actions of visitors, like hide the add to cart button, use that code snippet as a foundation then change the action

  • Here's a guide to swap out or hide the add to cart button, or add an extra button

  • Highlight key information for people from certain countries (shipping, customs, product information)

  • Showing location based messages can help your pages be more engaging and helpful to the customer. Brainstorm ideas on what kind of fun or helpful messaging you can put there.

Important privacy note

You may need to need to update your website or privacy policy to indicate that you're collecting a visitor's location.

Check with your regional laws or consult with a professional.

If you don't have a contact, I recommend reaching out to Termly for questions and solutions regarding compliance.

They have a privacy / cookie compliance app that I've used on multiple sites for compliance with GDPR, cookie acceptance, privacy settings, etc.

Need help integrating?

If you're not comfortable editing your theme code or prefer to have it handled for you, contact us to have a professional Shopify developer add this for you.

If you want to do more advanced functions, like showing inventory available at specific locations, we can integrate that for you using our app Product Automator (it's not possible with just theme code, an API connection is needed).

πŸ§™β€β™‚οΈ If you liked this post please check out our apps Order Automator and Product Automator.

βœ… We've built a suite of tools to automate tasks and extend Shopify functionality. Our mission is to help Shopify stores and the people that work in them save time and money.

About the Author: Joe

Joe's a 10+ years Shopify partner, certified Shopify Expert, 7 year Shopify store owner, former Shopify optimization agency owner, creator of Order Automator and co-creator of Product Automator. Outside of tech he's into nature adventures, travel, trees, music, books, and art. πŸ•πŸŒŽπŸŒž

Some of our blog posts contain affiliate links, meaning Automator Apps could receive a commission if you sign up for an app or service using those links. We only recommend things we believe in, and there is no additional cost to you, we're just recommending trusted partners.

Recent Posts


About Us

We make Shopify apps, custom plugins, and automated solutions.

We also have years of experience working with and managing Shopify stores.

Our goal is to help Shopify stores be more efficient and more successful with smart solutions.

Contact us if you need a technological solution for your business.


βš™οΈ Automation Apps for Shopify Stores

Use Order Automator to automate routine Shopify tasks, connect your store to 3rd party marketplaces (Amazon, TikTok, etc), and save you time and money.

It's customizable too, so you can request specific functionality for your store.


Product Automator has a suite of features to help organize your products and collections, increase your conversion rate, and get operational notifications.

It's a newer app so we're adding new functionality every week. Try it now and contact us to make a request or custom tailor a feature to your store.


🚚 Recommended Fulfillment Solutions for eCommerce Stores

ShipBob is a 3rd party fulfillment service that connects easily with Shopify, ships worldwide, and has no minimum requirements.

Connect ShipBob to your Shopify store, send inventory, then your orders will get automatically fulfilled.

Available in the US, UK, Canada, Europe, and Australia


Use Amazon FBA to automatically fulfill your Shopify store orders domestically and internationally.

See How to Automate Shopify Order Fulfillment with Amazon MCF / FBA to learn how to set it up.

Using the Order Automator app connected to your Amazon Seller Central account, you can do things like:

  • Automatically sync inventory between Amazon and Shopify
  • Automatically fulfill Shopify orders using Amazon FBA inventory
  • Route Shopify orders to Amazon marketplaces around the world, handling international fulfillment

Fulfilling off-Amazon orders with your Amazon inventory is called MCF. Learn more about Amazon MCF here.


πŸ€– Cool AI Apps for Shopify Stores

Zipchat is an AI chatbot that automates sales and support. Visitors can ask questions on your site and get instant answers based on information from your site + additional details you feed it.

We tested it and instantly found a few use cases to automatically answer common questions, like shipping and product recommendations.

Highlights

  • Give instant answers and cut down on support inquiries
  • Increase AOV by recommending cross-sell products
  • Provide order updates and tracking links

Bonus: The team is knowledgable and active in the eCommerce community. Ask them about their newsletter.


All Guides and Posts