How to show flag instead of text when changing language?? (Impact theme)

Solved

How to show flag instead of text when changing language?? (Impact theme)

alfredbjornerod
Tourist
3 1 0

Hello!

 

We just published our webshop in two different languages. To make it easier to see how to change the language, I would like to add a flag to the option instead of it being a text (see image) on the header. 

 

We currently use theme Impact version 6.5.0. 

 

I already tried at bunch of youtube videoes, but it seams not to work with ours theme. I've also tried some apps, but none of them have a suitable design for our site. 

 

alfredbjornerod_0-1737545454218.png

 

Accepted Solution (1)

alfredbjornerod
Tourist
3 1 0

This is an accepted solution.

I was able to fix it myself thanks to AI. I replaced text with flags in the language selector by uploading flag SVGs, modifying the localization-selector code to use <img> tags. Now it looks like this:

alfredbjornerod_0-1737726379765.png

 

View solution in original post

Replies 5 (5)

htmlBurger
Shopify Partner
83 7 20
Hello,

Are you currently using the default language selector provided by the theme? It appears that version 6.5.0 of the Impact theme includes an option to display country flags:
 

1737554529330.png

Have you tried enabling this option?
Found this helpful? Like and accept as solution to help others too!
htmlBurger – Founded in 2007, Shopify experts for 10+ years.
Custom themes, UI/UX design, ongoing maintenance & support.
Let's talk: ecom@htmlburger.com
alfredbjornerod
Tourist
3 1 0

Hi! Yes I'm using the default language selector provided by the theme, but I think this adds flag to the market (if your selling across nations), this option is for me not available on the language selector. We have only Norway as a market, but norwegian and english as languages. 

namphan
Shopify Partner
2263 296 332

Hi @alfredbjornerod,

Please send the website link, I will check it for you

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

PaulNewton
Shopify Partner
7721 678 1619

Hi @alfredbjornerod 👋 if you customizing the theme use the country object and image_url filter:

https://shopify.dev/docs/api/liquid/objects/country#country-rendering-a-flag-image 

 

If you need deeper customization then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

 

Good Hunting.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


alfredbjornerod
Tourist
3 1 0

This is an accepted solution.

I was able to fix it myself thanks to AI. I replaced text with flags in the language selector by uploading flag SVGs, modifying the localization-selector code to use <img> tags. Now it looks like this:

alfredbjornerod_0-1737726379765.png