Adding Flag to a language switcher

[Macoy102890]

Hi everyone,

I have multiple languages set up for my store. I'm using the native Shopify language switcher (through the Impact theme), and while it functions well, I’d really like to add country flags next to the language names in the switcher — for visual clarity and better UX.

Has anyone managed to do this?

I’m open to using custom code or lightweight apps, but I’d prefer to stick with Shopify's native features if possible.

here is our website: www.naraya.com

[The_ScriptFlow]

Hey @Macoy102890,

I hope you are doing well. In order to show the country flag require to do a custom code in your theme file.

This is not possible via only css that I provide you code and it work for you.

But this need to put the right country flags SVG to show near the languages.

Thanks

[loyalty-wizard]

Hey Macoy

I had a look at your site, could you try the following and let me know if this works for you?

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
[data-value="en"]::before {
    content: "";
    background-image: url(https://cdn.shopify.com/s/files/1/0419/8504/8729/files/tn_uk-flag.gif);
    background-size: cover;
    width: 30px;
    height: 18px;
    display: inline-block;
}
[data-value="zh-CN"]::before {
    content: "";
    background-image: url("https://flagcdn.com/w40/cn.png");
    background-size: cover;
    width: 30px;
    height: 18px;
    display: inline-block;
}

[data-value="th"]::before {
    content: "";
    background-image: url("https://flagcdn.com/w40/th.png");
    background-size: cover;
    width: 30px;
    height: 18px;
    display: inline-block;
}

#HeaderLanguageList a {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 0.5!important;
    justify-content: center;
}
</style>

[richardcobain]

To add country flags to the native Shopify language switcher in the Impact theme, you can customize the theme’s Liquid code by editing the language selector section (often in header.liquid or localization-form.liquid) to include flag images next to each language name. You'll need to upload your flag icons to Shopify’s Files and reference them using conditional logic based on the locale (e.g., {{ localization.language.iso_code }}). While there's no built-in setting for this in Shopify, this lightweight customization keeps your setup native without needing third-party apps.

[Macoy102890]

I manage to pull it off.. thank you everyone!!!