Re: Language Selector Dawn theme in header

Solved

How can I move the language selector to the header in Dawn theme?

melli-mello
Tourist
4 0 1

 

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.

 

plekje.jpg

Schermafbeelding 2022-11-07 163438.jpg

 

Our website is:

mellimello.com

 

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!

 

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1786 3127

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>

View solution in original post

Replies 22 (22)

PageFly-Victor
Shopify Partner
7865 1786 3127

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

melli-mello
Tourist
4 0 1

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.

PageFly-Victor
Shopify Partner
7865 1786 3127

hi @melli-mello can you take screenshot of where you want to add it? I will duplicate that selector and insert that for you

melli-mello
Tourist
4 0 1

Plaats taal selector.jpg

We want it to go next to the search icon at our webpage.

 

 

 

Plaats taal selector-1.jpg

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.

PageFly-Victor
Shopify Partner
7865 1786 3127

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>
melli-mello
Tourist
4 0 1

Thank you so much, this is exactly what we wanted!

 

Is it also possible to make it drop down instead of going up?

chachaperchee
Tourist
7 0 1

Hi !  this is not working for us unfortunately 😞 Can you please help ? 

TwoHappyHuskies
Visitor
1 0 1

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.

IlzeZD
Tourist
4 0 1

Hi @PageFly-Victor !

Many thanks for helping to duplicate language selector from footer to header!

Jakub_Szczepan
Visitor
2 0 0

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 regardsProjekt bez tytułu-18.jpg

 

2023sp
Visitor
2 0 0

I copied and pasted as advised. But I couldnt. Why is that? 

2023sp
Visitor
2 0 0

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! Untitled.jpgWhy is that? 

bienartista
Visitor
1 0 0

Hello,

I am having  the same issues where can I paste the code to have the language option on my header? 

PageFly-Victor
Shopify Partner
7865 1786 3127

hi @melli-mello please try and add this code to your theme css file

.disclosure__list-wrapper {
bottom: unset !important;
}
VPDDLG
Visitor
1 0 0

Hello,

Where should we had this code section ? I don’t know where to find the « theme css file »

PageFly-Victor
Shopify Partner
7865 1786 3127

Hi @VPDDLG ,

 

You can find it by:
Step 1 : Online Stores > More action > edit code > find on this

PageFlyVictor_0-1670474459880.png

 

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

PrintNStuff
Excursionist
18 0 3

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

Capture.PNG

PrintNStuff
Excursionist
18 0 3

oh and remove the text language

Spineify
Visitor
1 0 1

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

 

Capture.PNG

Philosophie
Visitor
2 0 0

_Prints 25 Nov (22).png

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!

mandymanting
Visitor
1 0 1

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.

Kleentex
Visitor
1 0 0

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.

 

Remove language selector.png