Moving language switcher from footer to header theme dawn

Shopify Discussion
1

Hi there all!

I want to move the language switcher from my footer to header in the dawn theme.

Is that possible?

Please help this girl out!!

Thank you!!

2

You can move the language selector by editing the code. To do that go to the Themes section of your store and then click Edit Code option of your theme and find the header.liquid file.

Themes > Edit Code > header.liquid

Now paste the code given below, right above the closing header tag (which looks like this )

Save the file and reload your site. You should have the language selector on your header.

Now you can turn off the language selector in footer from the customize settings.

**Note**: this code snippet is latest as of writting this post (2 - FEB - 2023)
3

Hi there Zain ali!

Thank you for your help, it worked perfect! But i doesn’t look that smooth. I have attached the printscreen so you can see what i mean.

I rather place the language bar back in the footer but this time next to the sign up bar.

Is there any chance you could help me with that? Please let me know!!!

i want it next to the newsletter bar
i want it next to the newsletter bar1440Ă—900 78.3 KB

language bar in header
language bar in header1440Ă—900 106 KB

4

Hi Sam!

I am glad the solution worked for you. And for your new issue you just need to move the language selector code in footer.liquid file.

Follow the path used before and go to the Themes section of your store and then click Edit Code option of your theme and find the footer.liquid file.

Themes > Edit Code > footer.liquid

Now locate the

tag with the class name “footer__localization”. It should be on line 229. Then copy the code from line 229 to line 318 (See the attached image).

Screenshot from 2023-02-03 10-54-09.png
Screenshot from 2023-02-03 10-54-09.png1839Ă—943 235 KB

After copying the code paste it above in the file just before socials on line 146 (See attached image).

Screenshot from 2023-02-03 10-55-53.png
Screenshot from 2023-02-03 10-55-53.png1839Ă—943 194 KB

Now remove the code from below (where it was before) and save the file, then reload the page.
You should have the language selector next to the newsletter sign-up.

Hope it helps.

Regards,

Zain Ali.

5

Hi there ZainAli!

Thank you again so much for your help. Now im ashamed to ask you the next question about this. As you can see on the picture i wanted to be where i placed the green line.Now it look very sloppy.

I have asked chatbot gpt and gave me a css code. But i dont know where to place it.

I want the translater to be also the same hight as the sign op button, see picture.

After this you are done with me haha.

Kinds regards from Holland,

Samira

6

Hi again Samira,

I can’t see any image in your reply but as far as CSS code is concerned you can place it in the footer.css file by going through the same process.

Themes > Edit Code > footer.css

Open the file and paste the new code at the end of the file. Save and reload the page hopefully your desired result would be achieved.

Regards,

Zain Ali.

7

Thank you for this solution, I have followed the instructions and now the selector is both on the header and footer, however, the header selector only has English and does not allow to choose the second language (Greek). Can you help me to sort this?

8

Hi,

Thank you very much for the answer! I have tried to copy and paste this code snippet into my header.liquid file, but what I get is that the language selector is in a separate line with the rest of the icons. What I would like is that the language selector is in the same line with the rest of the icons and shows as an icon. Can we do this?

Thank you very much for the help!