Shopify-themes css customizations troubleshooting design

Technical Q&A
1

Hi everyone,

I’ve been struggling with this issue for a long time and haven’t been able to solve it.

I’m using Shopify (Online Store 2.0) with the Dawn theme.
My store is multilingual using Shopify’s native localization (no third-party language switcher app).

Problem:
On mobile view, the language switcher is always placed inside the hamburger menu.
I want the language selector to be visible outside the hamburger menu (in the mobile header bar itself).

What I’ve tried:

  • Checked Header and Localization sections in the theme editor
  • Reviewed header.liquid / header-group.liquid
  • Looked for settings related to mobile layout or localization placement
  • Tried CSS-only approaches (not successful, element not available outside menu)
  • Followed multiple guides and forum suggestions

Result:
No matter what I do, the language switcher is only rendered inside the mobile hamburger menu, and I cannot move or duplicate it cleanly outside without breaking the layout.

Question:
Is this a limitation of the Dawn theme / Shopify localization?
Has anyone successfully placed the language switcher outside the hamburger menu on mobile using native Shopify localization?
If yes, what is the correct approach (Liquid structure or supported workaround)?

Thanks in advance.

2

@Cocksmachine please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

@media screen and (max-width: 749px) {
.dropdown-localization{margin-bottom: 100px; display: flex !important;}
.language-selector{right: 30px;}
}

image
image1366×768 266 KB

3

Hey @Cocksmachine

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.menu-drawer.motion-reduce.color-scheme-2 {
    z-index: 99999 !important;
}
</style>

RESULT:

image
image351×762 46.1 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

4

Hi ,
Thank you very much for your help and for sharing these steps. I will test the solution and get back to you if I encounter any issues. I appreciate your support.

5

Hi
Thank you very much for your help and for sharing these steps. I will test the solution and get back to you if I encounter any issues. I appreciate your support.

6

Hi Suyash,
Honestly, thanks a lot :folded_hands:
The Language Switcher issue is completely fixed with the code you sent, and it works perfectly.

I just wanted to ask for your guidance on two small things, if you don’t mind:

  1. When opening the website on mobile, there’s a bit of extra space under the logo. If you have any advice on how to remove that, I’d really appreciate it.

  2. Also, the page has a slight horizontal (left–right) scroll on mobile. If you could point me in the right direction on what usually causes this and how to fix it, that would be great.

Thanks again—really appreciate your help.
You’re a lifesaver :ok_hand:

7

Hi, Moeed
Thank you for taking the time to reply and help me — I really appreciate it :folded_hands:

Unfortunately, the code you shared didn’t work in my case, but another solution from one of the team members solved the issue perfectly.
I’ll send you that code as well, in case it’s useful for you or for similar situations in the future.

Thanks again for your time and support

@media screen and (max-width: 749px) {

.dropdown-localization{margin-bottom: 100px; display: flex !important;}

.language-selector{right: 30px;}

}

8

Don’t , you can be way better of using markets so the language doesn’t have to even be mucked with by the customer.

Slapdash styling and playing UI designer is how merchants make their websites look ramshackle and more and more broken if not shady and untrustworthy.

litmus test’s are:
Have any customers clearly complained they can’t figure out how to change a language on a website.
Do you have any analtytics that show being unable to change language is costing sales etc etc
If you haven’t asked yourself hard questions like this then high chance your wasting time playing designer instead of improving actual business issues and in doing so creating new problems.

9

@Cocksmachine please remove my previously given css completely and add this one to check

@media screen and (max-width: 749px) {
.dropdown-localization{position: relative; bottom: 30px;display: flex !important;}
.language-selector{right: 30px;}
header-actions{padding-top: 15px;}
}

image
image1366×768 276 KB

10

Hi Dear suyash

I just wanted to let you know that I replaced the code with the new solution, and everything is now working perfectly.

Honestly, you are one of the most knowledgeable and skilled people I’ve come across when it comes to Shopify, and the way you support users is truly impressive. Your guidance made a real difference, and I really appreciate the time and effort you put into helping.

Thanks again for your support — it means a lot.

Best regards,
Ahmad

11

@Cocksmachine Thank you very much for the very kind words, very happy that my given css worked for you.

12

Dear suyash

IMG_4957
IMG_49571290×2796 367 KB

Thank you very much for your time and support. I really appreciate the effort you put into helping me — it truly means a lot to me.

I’m not sure whether I’m allowed to reach out with further questions or not, so please feel absolutely free to let me know if this is outside the scope. I just wanted to quickly share one last thing related to the same issue.

I’m sending you a photo so you can see how the website behaves on mobile. As shown in the photo , the page scrolls slightly left and right. I’m not sure if this is normal mobile behavior or if it indicates an underlying issue in the layout.

Whenever you have a moment, I’d really appreciate your opinion on whether this scroll is expected or something that should be fixed.

Thanks again for all your support and kindness.

13

This happens because language selector container protrudes beyond the right screen border now that its visible on mobile.
Try adding

localization-form-component {
  max-width: 100%;
}

to the code you’ve added earlier.

14

Hi,

Just a quick note to let you know that the issue is now resolved and everything is working perfectly.

Thank you very much for your help and support — I really appreciate it.

Best regards,
Ahmad

16

First problem is that URL structure is fixed in Shopify and you would not be able to replicate what you have now in WP.

Second – there is no tool to replicate the designs, so this would need a lot of manual work to do.
There are migration solutions, but they are mostly data migration.

17

We would like to discontinue the current website and rebuild it entirely using Shopify. Before proceeding, we want to confirm that it is possible to create the same website functionality and structure on Shopify.