Solved

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

Ola32
Shopify Partner
7 0 0

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/

Ola32_0-1711023461168.png

 

Accepted Solution (1)

theycallmemakka
Shopify Partner
1351 299 330

This is an 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:

 

theycallmemakka_0-1711028687967.png

 

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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 5 (5)

theycallmemakka
Shopify Partner
1351 299 330

This is an 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:

 

theycallmemakka_0-1711028687967.png

 

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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Ola32
Shopify Partner
7 0 0

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) 

Ola32_0-1711031843040.png

 

theycallmemakka
Shopify Partner
1351 299 330

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. 

theycallmemakka_0-1711032009464.png

 

 

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>

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

theycallmemakka
Shopify Partner
1351 299 330

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>

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Ola32
Shopify Partner
7 0 0

Thanks so much for the help