How to move Language Selector to header on mobile version (Dawn Theme)

Store Design
1
Show More

loolakoola_0-1681112834169.png
loolakoola_0-1681112834169.png1080×610 591 KB

I’m using Dawn Theme and I tried to move language selector from footer to header(on red circle position) on mobile version, but I couldn’t make it at last.

Please somebody helps me.

2

Hi @loolakoola ,

Could you share your store URL?

3

https://freetrialix.myshopify.com/

this is my store.

or at least, I want to put language selector on top so visitors can see selector at once. Thank you so much.

4

Go to store admin > Sale channels > Online store > Themes > Edit codes > Assets > open base.css file and add this code below at the bottom

.desktop-localization-wrapper localization-form { display: block !important; }

Here is the result

Screenshot 2023-04-11 at 11.01.38.png
Screenshot 2023-04-11 at 11.01.38.png510×453 291 KB

5

literally OMG. I really appreciate to your help. just amazing

6

You are welcome.

7

thanks! that’s works perfectly and super easy.

8

Hi @Dan-From-Ryviu ,

Thank you for your help!

I just want to move the language selector on the right on mobile. it doesn’t move right because there’s still the magnifying glass icon that’s there. It’s hidden, but when I hover the mouse over it, it still exists. I would like to delete it completely so that the language selector can take its place. I’d like him to be right. And if possible, the language selector should be white, and when I scroll down the page, it should turn black. Like the three lines of the menu.

Premium Chauffeured Car & Concierge Service – LeaderLimousines.jpg
Premium Chauffeured Car & Concierge Service – LeaderLimousines.jpg1179×2556 241 KB

9

Hi @1F I was missing your comment. Please use this code

.desktop-localization-wrapper localization-form { 
    display: block !important; 
}
@media (max-width: 749px) {
.header__icons--localization .header__search {
    display: none !important;
}
}
10

Thank you veryyyyyy much Dan!!! It works perfectly!

Do you know if there is any possibility to put the flag instead of “English” or “French”?

Many thanks dude!

11

I found this hope it helps

https://jesperahlbom.com/blogs/free-shopify-guides/how-to-add-country-flags-to-your-region-selector

12

Thank you but this is for the country localization and not language selector. I’ve seen this page a couple of weeks ago. It should works adapting it but I’m not able to do it.

Appreciate dude

13

Hi, I have tried to add this code in my theme and it did work however, it only shows the language correctly but not the regions in mobile view. It only shows the option for ‘select region’ but when we click on it, nothing pop up. If you can help me to figure this out that will be great. Thanks you