How do i add a flag icon next to language selector Be Yours Theme

[Ola32]

Hi does anyone know how to add a flag icon next to each language in the language selector? 

website url is :https://www.almadeportugal.com/

[theycallmemakka · Accepted solution]

Hi @Ola32 ,

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="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>

Result:

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Ola32]

Hi thanks you so much it worked perfectly , if its not asking to much do you know how to replace the little planet icon with the current selected language (also what is the url for the uk flag if you dont mind sharing) 

[theycallmemakka]

Hi @Ola32 ,

It is not possible to update it with CSS. We will have to update the base code to make this changes. 
There is no such selectors related to language which we can target with CSS. 

And to update the flag, you can replace the old code with this new one

<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_uk-flag.gif?v=1711032088);
    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>

[theycallmemakka]

Hi @Ola32 ,

Use this updated code to change USA flag to UK

<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_uk-flag.gif?v=1711032088);
    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>

[Ola32]

Thanks so much for the help

[iwshfaras]

Hello, I can't seem to find the code for the Greek flag, could you help me please? Thank you and Merry Christmas!