Change order of languages in language selector

Store Design

Topic summary

A user needed to reorder languages in their Craft theme’s header language selector, moving away from alphabetical order to a custom sequence (Nederlands, Deutsch, English, French).

Initial Solutions Proposed:

  • Manual editing of the language-localization.liquid file in theme code
  • Note that language selectors typically sort alphabetically, with popular countries sometimes prioritized

Working Solution:
A custom liquid script was provided to be added via Customizer > Custom liquid section in Footer. This JavaScript code sorts both Country and Language selectors by reordering DOM elements.

Issue & Fix:
The initial code broke language switching functionality because it recreated HTML elements, removing event handlers. The solution was updated to use appendChild() instead of innerHTML, which moves elements while preserving their attached event handlers.

Status: Resolved. The corrected code successfully reorders languages while maintaining switching functionality.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Is there a way to change the order of languages in the (header) language selector? For example, instead of:

Nederlands

Francais

Deutsch

English

I need:

Nederlands

Deutsch

English

French

Theme used: Craft

Languange app: Translate & Adapt

Thanks for any reply!

2

It can be modified in the theme liquid section of your header through editing code

If you mind few help, let me know

3

Hi @Hanzzzie ,

I checked and you can sort it manually. So if you have only 4 languages ​​above, you can rearrange it at theme code.

Please go to Actions > Edit code > snippets > language-localization.liquid file.

I hope it helps!

4

This depends on your theme and visitors.

Usually, country list is sorted alphabetically, but, say Dawn (and your theme too) can sort countries which are popular in your store to the beginning of the list.
However, they are still should be sorted alphabetically by name, so I do not quite understand how you’re getting the initial list.

But you can still sort them the way you like. While this can be done in liquid, this will require editing your theme code which will make further updates difficult.

So instead go to Customizer, add a “Custom liquid” section to your “Footer” section group and paste this code:

This code should work for Dawn and Craft and will sort both Country and Language selectors.

If not – let me know the store URL and I will have a further look.

5

Thanks all. I used your solution Tim. Works great, thanks!

6

@tim_1 . Sorry, I was to fast. With the liquid script the order can be rearranged. That works perfect, only problem is that after adding the code the language doesn’t switch anymore to a selected language. Any idea how to solve that?

7

OOPS, my fault.

Small change should fix it:

instead of:

list.innerHTML = "";
    sorted.forEach(el=> {
      list.innerHTML += el.outerHTML;

now we do:

sorted.forEach(el=> {
      list.appendChild(el);
    });

This should move elements rather then recreating them – would keep event handlers attached by theme code intact.

please, like and mark as solution when confirmed working so that others know which code is right.

1 Like
8

Great, thanks @tim_1 !