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

Store Design

Topic summary

A user seeks to relocate the language selector from the footer to the header on mobile for the Dawn Theme. They want it positioned prominently (ideally in the top-right corner) for immediate visitor visibility.

Solution Provided:
A CSS code snippet successfully moves the language selector to the mobile header:

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

This code is added to the base.css file via the theme editor.

Additional Refinements:

  • To position the selector on the right side (removing the hidden search icon), an updated CSS snippet targets the search element with display: none on mobile.
  • One user requests flag icons instead of text labels (“English”/“French”), but the suggested resource addresses country flags rather than language flags—adaptation remains unresolved.

Open Issue:
A participant reports the solution works for language selection but breaks region selection on mobile—clicking “select region” produces no dropdown. This problem remains unaddressed.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
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

3 Likes
5

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

1 Like
6

You are welcome.

7

thanks! that’s works perfectly and super easy.

1 Like
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;
}
}
1 Like
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