When you enable languages that you want to support in your help center, your end users can select the language in which they want to see the information.
In this workflow, you'll learn how to edit the names of the languages displayed in the language dropdown menu in the footer of your pages in your help center.
Replace the script of the footer template
Replace the default code in the footer.hbs file with custom code to edit the names of the languages displayed in the language dropdown menu.
To edit edit the footer
- In Guide, on the sidebar, click the Customize design icon (
)
- Select Customize on the theme you want to edit
- Select Edit code
- In the Templates section, select footer.hbs, and remove the code below
<footer class="footer">
<div class="footer-inner">
{{#link 'help_center'}}{{help_center.name}}{{/link}}
<div class="footer-language-selector">
{{#if alternative_locales}}
<div class="dropdown language-selector">
<button class="dropdown-toggle" aria-haspopup="true">
{{current_locale.name}}
</button>
<span class="dropdown-menu dropdown-menu-end" role="menu">
{{#each alternative_locales}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{name}}
</a>
{{/each}}
</span>
</div>
{{/if}}
</div>
</div>
</footer> - Replace this code with the code below.
<footer class="footer">
<div class="footer-inner">
{{#link 'help_center'}}{{help_center.name}}{{/link}}
<div class="footer-language-selector">
{{#if alternative_locales}}
<div class="dropdown language-selector">
<button class="dropdown-toggle" aria-haspopup="true">
{{#is current_locale.name 'English (US)'}}
Test
{{else}}
{{current_locale.name}}
{{/is}}
</button>
<span class="dropdown-menu dropdown-menu-nd" role="menu">
{{#each alternative_locales}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{#is name 'English (US)'}}
Test
{{else}}
{{name}}
{{/is}}
</a>
{{/each}}
</span>
</div>
{{/if}}
</div>
</div>
</footer>
The example above replaced English (US)
with the language name you want to change. Replace 'Test' with the name you want to display in the language dropdown menu.
See the example below showing the English (US)
dropdown option replaced with 'Test'.
Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Post any issues you have in the comments section or try searching for a solution online.
6 comments
Willie
When using the code above, the language dropdown in our footer is not collapsed. Any tips on where we're going wrong?
Code:
Link: https://help.crunchyroll.com/hc/en-us
Screenshot:
0
Eric Nelson
Just looking at your public stylesheet it looks like your 'dropdown-menu' class has been removed so there is nothing saying for those elements to be hidden. I'd suggest taking a look at it in the copenhagen theme's css and bringing it over to your custom theme.
0
Abdul Khader Malim
Hi All,
Is there any possibility to display country name as label name instead of locale ?
Thanks
0
Erica Girges
Unfortunately, there isn't a way to automatically convert the locale to the country name. However, you could use the above solution to manually edit them as such.
Hope this helps and apologize for any inconvenience!
Erica
0
Tommy Strand
Is there any possibility to add a flag icon next to the language name?
0
Gabriel Manlapig
Yes, it seems this is possible to add a flag icon next to the language selector. I've taken a look and found that other users are discussing similar needs here:
Change text switching language
I hope that helps!
0