All things Shopify and commerce
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.
Solved! Go to the solution
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
This is an accepted solution.
Add this code to bass.css file
#HeaderLanguageForm {
display: none;
text-align: right;
}
@media screen and (max-width: 990px) {
#HeaderLanguageForm {
display: block;
}
}
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.
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 ,
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
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
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.
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
Please replace this code
{%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}
by
{%- form 'localization', id: 'HeaderLanguageForm', class: '' -%}
to make your select box look better
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 ?
This is an accepted solution.
Add this code to bass.css file
#HeaderLanguageForm {
display: none;
text-align: right;
}
@media screen and (max-width: 990px) {
#HeaderLanguageForm {
display: block;
}
}
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 🙂
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.
oh sorry for that issue can you please share your store url so i will check and let you know
Debut theme
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
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
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025