Shopify themes, liquid, logos, and UX
Hi,
My team and I were looking for the option to move or replicate the language selector from the footer to the menu in the header. We were looking for moving it next to the search icon as shown in the picture.
We are using the dawn theme.
Our website is:
I have searched other community questions that are almost the same, but none seem to work for us.
I'm not looking for downloading another application.
Would love to hear from someone who can help me!
Solved! Go to the solution
This is an accepted solution.
please help me to add this code to your theme.liquid file above the </head>
<script>
const pfInterval = setInterval(() => {
var headerSearch = document.querySelector('.header__search')
var form = document.querySelector('localization-form')
if(form) {
clearInterval(pfInterval)
var formClone = form.cloneNode(true);
headerSearch.append(formClone)
}
},100)
</script>
This is PageFly - Free Landing Page Builder.
Regarding your concern about to display the language switcher to select multiple languages.
You can enable that on your theme first. In theme > more action > language
After that if that not display like what you want i think you should use an 3rd apps to display that.
Hope this can help you solve the issue
Best regards,
PageFly
We already have a language selector. But it's in the footer of our website. We also want it in our header menu. So I don't know if this is the right solution or how it's going to work.
hi @melli-mello can you take screenshot of where you want to add it? I will duplicate that selector and insert that for you
We want it to go next to the search icon at our webpage.
Now it's here, but idealy we want to duplicate this so we can also use it as shown in the picture before this one.
This is an accepted solution.
please help me to add this code to your theme.liquid file above the </head>
<script>
const pfInterval = setInterval(() => {
var headerSearch = document.querySelector('.header__search')
var form = document.querySelector('localization-form')
if(form) {
clearInterval(pfInterval)
var formClone = form.cloneNode(true);
headerSearch.append(formClone)
}
},100)
</script>
Thank you so much, this is exactly what we wanted!
Is it also possible to make it drop down instead of going up?
Hi ! this is not working for us unfortunately 😞 Can you please help ?
Hi! When I add this code all I get is the Country selector. I am trying to add the language selector to the header, can anyone help please.
Hi @PageFly-Victor !
Many thanks for helping to duplicate language selector from footer to header!
Hi,
Could You help me with placing the selector before "search" icon?
When I apply your code the selector is after that icon and it looks strange.
I' ve marked a place, that I want selector to be put.
Help me please 😉
Best regards
I copied and pasted as advised. But I couldnt. Why is that?
I copied and pasted as advised. But I couldnt. I only saw the currency switcher being added on the top, but I cannot change language. Pls see the screenshot. Thank you! Why is that?
Hello,
I am having the same issues where can I paste the code to have the language option on my header?
hi @melli-mello please try and add this code to your theme css file
.disclosure__list-wrapper {
bottom: unset !important;
}
Hello,
Where should we had this code section ? I don’t know where to find the « theme css file »
Hi @VPDDLG ,
You can find it by:
Step 1 : Online Stores > More action > edit code > find on this
And find for base.css or
Step 2: And paste the code I gave you at the bottom of the file
Let me know if it works!
Best regards,
Victor | PageFly
Hei, I have been following this thread and managed to move the language selector in the header also. But is there a way to customize it to look something like: ENG/FIN instead of drop down menu?
https://z918gj8kj5mul7nu-60720152771.shopifypreview.com
oh and remove the text language
Hello, the code is working fine but for some reason the languages drop up instead of down.
I tried your other code but it is not working and shows a weird message on top of the page.
Your help would be appreciated
Hi, I followed your forum and somehow managed to change my language selector from footer to this current location on the header (please see red circle?. However I would prefer that the language selector is located next to the shopping cart on above right of my homepage (please see red arrow). can you please tell me what i should do? I'm using the Studio free theme. Appreciate your help on this. Thank you!
Hi there, I have the same problem which is the menu drops up instead of down. I wonder if and how you solved the issue? No one seems to be replying to this thread anymore.
I hope it will help you. Just go to theme editor and then disable language selector.
Step: > Go to theme editor
> Homepage Template
> In section header it will show announcement bar and header section
> Click once of them that you want to disable. And then see at the right side. Click enable if you want to show and click disable if you don't want to show.
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025