Delivery lead time widget

Store Design
,

Topic summary

A user is attempting to create a delivery widget that displays a country flag emoji and estimated delivery date based on the customer’s geolocation. Their Liquid template code shows country initials (e.g., “LT”) instead of flag emojis and doesn’t update when testing with a VPN.

Root cause identified:

  • localization.country.iso_code is processed server-side when the page loads, based on Shopify store settings—not the visitor’s actual IP address
  • Liquid cannot detect dynamic client-side geolocation
  • VPN testing doesn’t trigger re-rendering since the country is determined at the server level

Proposed solution:
Use JavaScript to detect the country at runtime instead of relying solely on Liquid. A respondent provided sample code combining Shopify’s country data with JavaScript to dynamically insert the correct flag emoji after page load.

Discussion status:
The original poster dismissed the suggested solution as potentially AI-generated, leaving the issue unresolved.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Im trying to have a simple text that would say “delivery to (FLAG) by 20.10) where (flag) is automatically taken customers geo-location and country flag returned.

I have snipped made delivery-time-js.liquid with code:

{% assign country_code = localization.country.iso_code | default: "XX" %}

{% case country_code %}
  {% when "US" %} {% assign country_flag = "🇺🇸" %}
  {% when "DE" %} {% assign country_flag = "🇩🇪" %}
  {% when "FR" %} {% assign country_flag = "🇫🇷" %}
  {% when "GB" %} {% assign country_flag = "🇬🇧" %}
  {% when "CA" %} {% assign country_flag = "🇨🇦" %}
  {% when "LT" %} {% assign country_flag = "🇱🇹" %}
  {% else %} {% assign country_flag = "🌍" %}
{% endcase %}

<div id="delivery-label" class="delivery-badge">
  Delivery to {{ country_flag }} by 10.10
</div>

And then I added {% render ‘delivery-time-js’ %} exactly where the badge should appear.

The issue is that:

  1. The country flag is not appearing, only country initials - for example LT - for Lithuania.

  2. I switched to France using VPN and the country initials did not update. Still showing LT.

1 Like
2

Hi @JustinasR

Ah! I see exactly what’s happening. The issue here is a combination of Shopify Liquid vs. runtime geolocation and how localization.country.iso_code works. Let me break it down:

Liquid runs server-side

  • {% assign country_code = localization.country.iso_code %} is processed once on the server when the page is generated.
  • Shopify determines localization.country based on the store settings / default checkout country, not your VPN IP.
  • That’s why when you switch to France via VPN, it still shows LT (Lithuania) — the server isn’t re-rendering the page for your IP.

Liquid cannot detect dynamic client-side geolocation on page load. To fix this, you need JavaScript to detect country at runtime.

Using JavaScript + Shopify localization API

Shopify exposes a global Shopify.country or you can use a geolocation API in JS to detect the country.

Example using JavaScript + Liquid fallback:

<div id="delivery-label" class="delivery-badge">
  Delivery to <span id="country-flag">🌍</span> by 20.10
</div>

<script>
  // Shopify exposes country ISO code in Shopify.locale.country_code (sometimes in Dawn)
  var countryCode = "{{ localization.country.iso_code | default: 'XX' }}";

  // Optional: use JS geolocation for more accurate detection
  // Example: you could call a geo API here

  var flag = "🌍"; // default flag
  switch(countryCode) {
    case "US": flag = "🇺🇸"; break;
    case "DE": flag = "🇩🇪"; break;
    case "FR": flag = "🇫🇷"; break;
    case "GB": flag = "🇬🇧"; break;
    case "CA": flag = "🇨🇦"; break;
    case "LT": flag = "🇱🇹"; break;
    // add more countries here
  }

  document.getElementById("country-flag").textContent = flag;
</script>
4

you just copy pasted that from chatgpt….