Adding flags to the language selector

[Ali_09]

Hey,

How do you add flags to the language selector so that the people that don't understand the current shop language, can see that the language selector is where the flag is?

Trade 15.2.0 theme store.

[topnewyork]

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="pt-PT"]::before {
    content: "";
    background-image: url(https://cdn.shopify.com/s/files/1/0419/8504/8729/files/tn_po-flag.gif?v=1711028464);
    background-size: cover;
    width: 30px;
    height: 18px;
    display: inline-block;
}
[data-value="en"]::before {
    content: "";
    background-image: url(https://cdn.shopify.com/s/files/1/0419/8504/8729/files/tn_us-flag.gif?v=1711028458);
    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>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[Ali_09]

Hey,

i can see that it isn't there but only, when i click on the language.

can i do so that the language / country i choose is always there on the first picture?

thank you!