how to move languge selector bar from footer to the header or menu in mobile version

Solved

how to move languge selector bar from footer to the header or menu in mobile version

samsam2
Excursionist
18 0 2

dear

 

i am using dawn theme, and recently i added Arabic language to my website and i would like to move the language selector bar from footer to the header or menu in mobile version.

Accepted Solutions (2)
ExpertRookie
Shopify Partner
1518 249 324

This is an accepted solution.

Hi @samsam2 ,

 

Please use this code to make your select better (remove the old code and replace by this)

 {%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}
    <select class="locale-selectors__selector" name="locale_code" onchange="window.HeaderLanguageForm.submit()">
      {%- for language in localization.available_languages -%}
        <option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
          {{ language.endonym_name | capitalize }}
        </option>
      {%- endfor -%}
    </select>
{%- endform -%}

on mobile i can see the language bar only when its English, when i choose Arabic the bar disappear and i cant take back to English: It disappears because you submitted on the preview mode, after the submission you are no longer on the preview mode. I think you should to test it on live view

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

View solution in original post

ExpertRookie
Shopify Partner
1518 249 324

This is an accepted solution.

@samsam2 

Add this code to bass.css file

 

 

 

#HeaderLanguageForm {
    display: none;
    text-align: right;
  }

@media screen and (max-width: 990px) {
  #HeaderLanguageForm {
    display: block;
  }
}

 

 

 

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

View solution in original post

Replies 15 (15)

KetanKumar
Shopify Partner
37583 3668 12151

@samsam2 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
samsam2
Excursionist
18 0 2

Dear Ketan

 

thank you for your reply

 

here is the URL: https://mia-concept.com/

i would like to know how to get the language bar selector from footer to header in desktop and mobile version ,

ExpertRookie
Shopify Partner
1518 249 324

Hi @samsam2 ,

 

Please try to put this code to any place on the header

 {%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}
  <div class="localization-form__select">
    <select class="localization-selector link" name="locale_code" onchange="window.HeaderLanguageForm.submit()">
      {%- for language in localization.available_languages -%}
        <option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
          {{ language.endonym_name | capitalize }}
        </option>
      {%- endfor -%}
    </select>
  </div>
{%- endform -%}

Try it and let me know

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
samsam2
Excursionist
18 0 2

thank you it works but

- on mobile i can see the language bar only when its English, when i choose Arabic the bar disappear and i cant take back to English

- is it possible to make the bar smaller or any other modification to make it more beautiful 

 

here is the preview link : https://h9glfdmcfbmuogm6-62968234183.shopifypreview.com

 

best regards

ExpertRookie
Shopify Partner
1518 249 324

Hi @samsam2 
I think you added the code into the preview link.
when you change the language, the url will change and link to the store with published theme.

 

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
ExpertRookie
Shopify Partner
1518 249 324

This is an accepted solution.

Hi @samsam2 ,

 

Please use this code to make your select better (remove the old code and replace by this)

 {%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}
    <select class="locale-selectors__selector" name="locale_code" onchange="window.HeaderLanguageForm.submit()">
      {%- for language in localization.available_languages -%}
        <option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
          {{ language.endonym_name | capitalize }}
        </option>
      {%- endfor -%}
    </select>
{%- endform -%}

on mobile i can see the language bar only when its English, when i choose Arabic the bar disappear and i cant take back to English: It disappears because you submitted on the preview mode, after the submission you are no longer on the preview mode. I think you should to test it on live view

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
ExpertRookie
Shopify Partner
1518 249 324

@samsam2 

Please replace this code

{%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}

by

{%- form 'localization', id: 'HeaderLanguageForm', class: '' -%}

to make your select box look better

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
samsam2
Excursionist
18 0 2

i published on the main website and works great , 

one last thing 🙂 

is it possible to move it to the right or header or to the menu in mobile version at least ?

 

samsam2_0-1667146078200.png

 

ExpertRookie
Shopify Partner
1518 249 324

This is an accepted solution.

@samsam2 

Add this code to bass.css file

 

 

 

#HeaderLanguageForm {
    display: none;
    text-align: right;
  }

@media screen and (max-width: 990px) {
  #HeaderLanguageForm {
    display: block;
  }
}

 

 

 

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
samsam2
Excursionist
18 0 2

thank you alot for your efforts ,

 

it works perfect on mobile but not exist on desktop ( desktop not important at the moment 95% of my visitors are on mobile browser)

 

thank you again 🙂

ExpertRookie
Shopify Partner
1518 249 324

@samsam2 

You are welcome
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
loolakoola
Excursionist
63 0 7

Hi, ExpertRookie, I'm using Dawn so I followed your advice.

So I can see selector on top but i I found t dosen't work actually for me.

When I select other languages, the store's language setting is not change.

How can I deal with it? Thank you. 

KetanKumar
Shopify Partner
37583 3668 12151

@loolakoola 

oh sorry for that issue can you please share your store url so i will check and let you know

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Coffeesection
New Member
4 0 0
Hello, please help me to move language selector bar to the top right corner (Translate & Adapt)

 

Debut theme

Coffeesection_0-1711722826248.png

 

 

 

Also how to set Bulgarian language for Bulgarian market customers?

 

The default is English in Bulgaria market and can't be changed?

 

 

 

Thanks for your help

 

Coffeesection
New Member
4 0 0

https://coffeesection.com/

 

Also how to set Bulgarian language for Bulgarian market customers?

 

The default is English in Bulgaria market and can't be changed?

 

 

 

Thanks for your help

 

Coffeesection_0-1711723035774.png

 

Coffeesection_1-1711723092822.png