Unlock Dynamic Pricing: Geolocation for Shopify Storefront Web Components on External Sites

View original discussion by macleanmhl on Shopify Community →

Hey folks! As a Shopify migration expert, I spend a lot of time digging through the community forums, and every now and then, a thread pops up that’s just gold. It tackles a common, often tricky problem with a clear, actionable solution. Today, I want to chat about one such gem: how to get dynamic, localized currency pricing working with Shopify Storefront Web Components when you’re embedding them on an external website.

This isn't just a niche developer problem; it's about making your international customers feel at home and increasing conversion rates. Imagine a customer in Germany seeing prices in Euros right away, instead of US Dollars. It makes a huge difference!

The Challenge: Dynamic Country Codes for External Sites

The discussion kicked off with macleanmhl, who was successfully using Shopify’s web components to embed products on an external site. The core issue? While they could manually set the country="GB" attribute on the tag to show prices in a specific currency, they needed that country parameter to be dynamic, automatically detecting the visitor's location.

Initially, Guleria suggested using country="{{ localization.country.iso_code }}". Now, this is a fantastic solution if you're building directly within a Shopify theme, as it leverages Shopify's built-in localization Liquid object. However, as macleanmhl clarified, they were on an external website, meaning Liquid snippets wouldn't execute there. This highlights a crucial distinction: solutions for a Shopify theme don't always translate directly to external sites using web components.

The Expert Solution: Geolocation is Your Friend

This is where Moeed, a true community MVP, stepped in with a comprehensive breakdown. He confirmed that the shopify-store component itself doesn't have a built-in auto-geolocation attribute. Instead, the task falls to your external site: you need to detect the visitor's country and then dynamically set that two-letter ISO code to the country attribute.

Moeed laid out two excellent approaches, depending on your setup:

Option 1: Server-Side Geolocation (The Gold Standard)

If your external website is behind a service like Cloudflare, this is by far the cleanest and most performant method. Cloudflare automatically detects the visitor's country and passes it along in a request header called CF-IPCountry. You can read this header on your server and render the country attribute directly into your HTML before it even reaches the browser.

Why this is great: It ensures that the correct currency is displayed on the very first paint of the page. No flickering, no brief flashes of the wrong currency – just a seamless experience for your customer right from the start.

Option 2: Client-Side Geolocation (When Server-Side Isn't Possible)

Sometimes, a server-side solution isn't an option, or you might prefer a client-side approach for other reasons. Moeed provided a clever way to do this using Cloudflare's free trace endpoint. It doesn't require an API key and is quite straightforward to implement with JavaScript.

Here’s the JavaScript snippet Moeed shared:

const res = await fetch('https://www.cloudflare.com/cdn-cgi/trace');
const txt = await res.text();
const country = txt.match(/loc=(\w{2})/)?.[1] || 'GB';
document.querySelector('#store').setAttribute('country', country);

Let's break down what this code does:

  1. It makes a request to Cloudflare's trace endpoint.
  2. It gets the response as text, which contains various details about the connection, including the visitor's location (loc=XX).
  3. It uses a regular expression to extract the two-letter country code (e.g., 'US', 'GB', 'DE').
  4. If for any reason it can't detect a country, it defaults to 'GB' (you can change this fallback to 'US' or your primary market).
  5. Finally, it finds your element (assuming it has id="store") and sets its country attribute dynamically.

Crucial Considerations for Client-Side Implementation

Moeed also shared two critical tips for client-side implementation:

  1. Set the attribute as early as possible: To avoid that brief flash of default currency pricing before it updates, execute this JavaScript as early as you can in your page's loading process. Think about placing it in your or immediately after your component.

  2. Clamp to supported markets: Not all countries might be part of your Shopify Markets setup. If a visitor from an unsupported country is detected, and you pass that code directly, it could cause your prices to revert to your store's base currency. Moeed suggests clamping the detected code to markets you actually sell to, with a fallback like 'GB' or 'US'. You'd implement this by checking the country variable against a list of your supported markets before setting the attribute.

Putting it All Together: Your Action Plan

So, how do you implement this on your external site?

If You're Using Cloudflare (and can modify server-side code):

  1. Identify the CF-IPCountry header: In your server-side language (PHP, Node.js, Python, Ruby, etc.), access the incoming request headers. Look for CF-IPCountry.
  2. Inject into HTML: When rendering your page, dynamically insert the country code into your tag. For example, if you're using a templating engine, it might look something like .
  3. Add a fallback: Always have a default country code ready in case the header isn't present or the country isn't supported by your Shopify Markets.

If You're Using Client-Side JavaScript:

  1. Locate your tag: Ensure it has an id attribute, like id="store", so the JavaScript can easily target it.
  2. Add the JavaScript: Place Moeed's code snippet within a