Delivery lead time code

Technical Q&A
,
1

So im trying to add a badge to my store where it would say “delivery to (Country flag) by 10.10). Where (country flag) would be an actual customer’s browsing location country flag rendered. The delivery time I would configure myself. But I can’t get the geolocation (country flag) to work. I tried several snippets. Any help would be much appreciated.

{% assign country_code = request.locale.country | default: ‘XX’ %}

{% case country_code %}
{% when ‘US’ %}
{% assign country_flag = “:united_states:” %}
{% when ‘DE’ %}
{% assign country_flag = “:germany:” %}
{% when ‘FR’ %}
{% assign country_flag = “:france:” %}
{% when ‘GB’ %}
{% assign country_flag = “:united_kingdom:” %}
{% when ‘CA’ %}
{% assign country_flag = “:canada:” %}
{% when ‘LT’ %}
{% assign country_flag = “:lithuania:” %}
{% else %}
{% assign country_flag = “:globe_showing_europe_africa:” %}
{% endcase %}

Delivery to {{ country_flag }} by 10.11
2

Hi @JustinasR ,
I hope this message finds you well.
If you want the badge to change dynamically by actual visitor country, you’ll need the JavaScript + geolocation API approach.

Best
Anmol

4

Thanks @anmolkumar I actually tried that too with the following code, but still couldn’t get it to work. Any ideas what’s the issue?

<div id="delivery-label">Delivery to 🌍 by 10.11</div>

<script>
fetch('https://ipapi.co/json/')
  .then(res => res.json())
  .then(data => {
    const countryCode = data.country_code.toUpperCase(); // e.g., "LT"
    // Convert country code to emoji flag
    const flag = countryCode.replace(/./g, c => String.fromCodePoint(127397 + c.charCodeAt()));
    
    document.getElementById('delivery-label').innerHTML = 
      `Delivery to ${flag} by 10.11`;
  })
  .catch(() => {
    // fallback if API fails
    document.getElementById('delivery-label').innerHTML = 
      'Delivery to 🌍 by 10.11';
  });
</script>
5

hi @JustinasR ,
This is corrected code. Replace your code wth this code.

<div id="delivery-label">Delivery to 🌍 by 10.11</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  fetch('https://ipapi.co/json/')
    .then(res => res.json())
    .then(data => {
      if (!data.country_code) return; // fallback if no code
      const countryCode = data.country_code.toUpperCase();
      const flag = countryCode.replace(/./g, c => 
        String.fromCodePoint(127397 + c.charCodeAt())
      );
      document.getElementById('delivery-label').innerHTML = 
        `Delivery to ${flag} by 10.11`;
    })
    .catch(() => {
      document.getElementById('delivery-label').innerHTML = 
        'Delivery to 🌍 by 10.11';
    });
});
</script>

If I was able to solve your issue, please don’t forget to like and mark it as solution,
as it may help others who have the same issue. If you need any further assistance, feel free to reach out to me.
Best
Anmol

6

Thanks so I implemented this, but its not working right. Initially when i refresh the page it for a brief second shows LT (Lithuania which is where im from) and then immediately switches to :globe_showing_europe_africa:. The same thing was hapenning with my initial code. Here is the preview link: https://31hi7ncdvb2ygc64-77830390093.shopifypreview.com

image
image2372×934 133 KB

7

Sorry correct preview link: Premium Men 2 in 1 Aftershave Balm | MANSOME Europe

8

@JustinasR ,

Go to Shopify Admin → Settings → Markets.
Ensure that your home country + any other countries you sell to are added inside a Market.
Example: Lithuania should be in your Primary Market.
If Lithuania is not included, Shopify won’t return the correct flag.
after that
Go to Online Store → Themes → Actions → Edit code.
Open file /sections/main-product.liquid
then find the price block which looks like this
product__price
or
{{ product.price | money }}

Just below that, paste this 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 class="delivery-badge">
  Delivery to {{ country_flag }} by 10.10
</div>

in Assets/base.css add this code at the bottom

.delivery-badge {
  font-size: 14px;
  margin-top: 8px;
  color: #333;
}

Save and refresh
Open your site from your local country → should show your flag.
Use a VPN (or ask a friend abroad) → Shopify should swap the flag based on localization.

Best
Anmol

9

@anmolkumar Thanks for that. So what I did is I made a new snippet called delivery-time-js.liquid and added your 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 - LT.
  2. I switched to France using VPN and the country initials did not update. Still showing LT.

image
image1316×468 68.1 KB

Preview link: https://tcazj0aahuybsffv-77830390093.shopifypreview.com

10

DIrect preview link: Premium Men 2 in 1 Aftershave Balm | MANSOME Europe

11

@anmolkumar Hi are you able to double check this again for me pls?