Stop Using Apps: How to Display Country Flags Natively in Shopify 2025

Stop Using Apps: How to Display Country Flags Natively in Shopify 2025

If you run an international Shopify store, you know the struggle of the humble country flag. It seems like such a simple requirement: show a small flag next to your currency selector or shipping calculator so customers know they are in the right place.

Yet, nearly 90% of developers and store owners get this wrong.

They typically fall into one of three traps:

  1. The Emoji Trap: You paste a 🇺🇸 or 🇫🇷 emoji into your theme settings. It looks great on your iPhone, but on a Windows PC, it renders as a generic "US" or "FR" text code because Windows 10/11 still lacks native flag emoji support. This makes your site look broken to millions of users.
  2. The External API Risk: You use a service like flagcdn.com. This works, but it introduces an external dependency (DNS lookups, SSL handshakes) that slows down your page load. If their server crashes, your header breaks.
  3. The App Bloat: You install a "Currency Switcher" app. This is the worst option. You are loading nearly 50KB of extra JavaScript just to display a 2KB image. This hurts your Core Web Vitals and SEO.

There is a better way. Shopify quietly updated their Liquid capabilities to allow direct access to high-quality SVG flags through the localization object. It is blazing fast, completely free, and requires zero external libraries.

Here is the comprehensive guide to doing country flags the right way.

The Native Solution: Shopify’s image_url Filter

Shopify now hosts a complete library of SVG flags on their global CDN. You do not need to upload assets, manage sprite sheets, or worry about file naming.

To access these flags, we use the image_url filter combined with the localization object.

The Magic Code Snippet

To render a flag for the user's currently selected country, all you need is this single line of Liquid code:

{{ localization.country | image_url: width: 32 | image_tag }}

Let's break down why this is powerful:

  • localization.country: This object automatically detects the visitor's context (or their manual selection).
  • image_url: width: 32: This tells Shopify's image server to resize the SVG to a manageable size. Even though SVGs are vectors, defining a width helps the browser reserve the correct space layout, preventing "Cumulative Layout Shift" (CLS).
  • image_tag: This is crucial for SEO. It generates the full <img> HTML element and automatically sets the alt attribute to the country's name (e.g., "United States"). You don't have to write the alt text manually.

Implementation: Building a Clean Country Selector

The most common use case is a dropdown menu in the footer or header. Below is a complete, copy-pasteable snippets that loops through your enabled markets and builds a form.

Note: This requires that you have set up "Markets" in your Shopify Admin settings.

{% form 'localization' %}
  <div class="native-country-selector">
    <!-- 1. The Trigger Button (Current Country) -->
    <button type="button" class="current-country" aria-expanded="false">
      {{ localization.country | image_url: width: 24 | image_tag: class: 'flag-icon' }}
      <span>{{ localization.country.name }} ({{ localization.country.currency.iso_code }})</span>
    </button>

    <!-- 2. The Dropdown List -->
    <div class="country-list">
      {% for country in localization.available_countries %}
        <button type="submit" name="country_code" value="{{ country.iso_code }}">
          {{ country | image_url: width: 24 | image_tag: class: 'flag-icon' }}
          <span>{{ country.name }}</span>
        </button>
      {% endfor %}
    </div>
  </div>
{% endform %}

Advanced Use Case: Direct CDN Access

What if you want to display a flag for a specific country that isn't the user's current location? Perhaps you want to display a "Made in Italy" badge on a product page.

You can access Shopify's flag repository directly using standard URL patterns. The format is always: https://cdn.shopify.com/static/images/flags/{code}.svg.

<!-- Example: Hardcoding the Italian Flag -->
<img
  src="https://cdn.shopify.com/static/images/flags/it.svg"
  width="32"
  height="24"
  alt="Italy"
  loading="lazy"
>

Pro Tip: This URL pattern also works for regions. For example, you can use eu.svg to display the European Union flag.

Why This Matters for SEO and Performance

Implementing this native method has tangible benefits for your store's search ranking:

  • Improved LCP (Largest Contentful Paint): Because the flags are hosted on the same CDN as your product images, connection times are minimized.
  • Zero Layout Shift: Unlike external scripts that "pop" flags in after the page loads (shifting your navbar around), the native Liquid filter renders the image server-side. The browser knows the size immediately.
  • Accessibility: Google penalizes sites with poor accessibility. The image_tag filter ensures every flag has descriptive alt text, making your site screen-reader friendly.

Summary

It is time to audit your theme. If you are paying $9/month for an app just to show flags, or if your Windows customers are seeing "US" text instead of a flag, switch to this native method today.

Back to blog