How to add country flags to your country/region selector (Shopify Guide 2023)

In this Shopify guide, I've prepared all the code you need to display country flags in your currency and region selector. It's a popular way to enhance your store for the international market.

It's a copy/paste guide for the non-technical person. I use Dawn theme version 9.0.0 in this guide but the same steps work for almost all free themes in Shopify's theme store. Good luck!

• Step 1: Add this code in country-localization.liquid
• Step 2: Add this code in component-localization-form.css
• Step 3: Confirm that it's working

Step 1: Add this code in country-localization.liquid

• Go to "Edit Code" on your theme
• In the top left corner search for "country-localization.liquid"
• Go to row 8
• Replace row 8 with below string of code so it looks like the following image

<div class="disclosure c-disclosure-country">

• Go to row 16
• Jump down to a new row
• Copy and paste below code on the new row so it looks like the following image

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

• Go to row 35
• Replace everything from row 35 to 39 with below code so it looks like the following image

<span class="localization-form__currency">
 {{ country | image_url: width: 20 | image_tag }}                 
 {{- country.currency.iso_code }}
 {{ country.currency.symbol }}
 {{ country.name | prepend: "| " }}
</span>

• Save this file in the top right corner

Step 2: Add this code in component-localization-form.css

• Stay in "Edit Code" on your theme
• In the top left corner search for "component-localization-form.css"
• Go to the bottom of this file
• Jump down to a new row
• Copy & paste below code so it looks like the following image

/* Customisations for country flags */

.c-disclosure-country .localization-form__select img,
.c-disclosure-country .disclosure__link img {
  border-radius: 4px;
  margin-right: 6px;
}

.c-disclosure-country .localization-form__select span,
.c-disclosure-country .localization-form__currency,
.c-disclosure-country .disclosure__link {
  display: inline-flex;
  align-items: center;
}

• Save this file in the top right corner

Step 3: Confirm that it's working

• Stay in edit code mode and click "Preview Store" in the top right corner (see below image)

• The country flag should now be visible in the country/region selector in your store as below images

• PS. Don't forget to enable the country/region selector in your theme customizer in the header and footer section.

Conclusion

This solution can vary if you got a custom design or theme. But it works on most free Shopify themes today if you want to add country flags to your country/region selector.

I do not recommend adding flags to your language selector. Since a flag represents a country, not a language. For example, you can speak Spanish, Chinese or English in many countries so a flag does not make any sense in that case.

Contact me below if you need help but I tried to keep it as easy as possible.

Thank you for reading! / J