Browser limitation detected

Facebook browser may limit features like the Menu. For the best experience, please tap (...) and choose 'Open in Browser'.

Adding as many languages as you want
Photo by Hiroko Yoshii / Unsplash

Adding as many languages as you want

— 1 min read — comments

As a default, TanaFlows theme supports two languages, but you can add as many as you want.

0%

I designed in defaut 2 language support max beacause I want it is simple use for regular users, however you can add many languages as you want, and here the way.

💡
Adding 2 languages first follows this tutorial, then follow this tutorial.
💡
It's important that you customize the theme and save it, because when we add new features, you might have to redo again.

Two steps to add infinity language (repeat).


#1. Edit file language-dropdown.hbs

Find the file language-dropdown.hbs at the path ./partials/nav/language-dropdown.hbs and open it. You will se the block code as below (line 24):

...
    {{!-- Example of adding one more fr language --}}
    {{!-- 1. Change https://yourdomain.com/fr/ into your specific language you want --}}
    {{!-- 2. Change "fr" text as well --}}

    {{!--
    {{#match @site.locale "!=" "fr"}} 
    <div class="...">
        <a class="btn-language-items"
            href="https://yourdomain.com/fr/">
            <svg viewBox=...">
                <use href="..."></use>
            </svg>
            fr
        </a>
    </div>
    {{/match}}
    --}}
    {{!--  Example of adding one more fr language --}}
...

You need remove {{!-- and --}} (line 28) , we will have the block as below in final:

Replace 3 places with your language you want, for example de or tr ,etc

  • {{#match @site.locale "!=" "fr"}}
  • https://yourdomain.com/fr/
  • fr (text)

Save it and done.

💡
Adding new languages is as simple as duplicating the code block.

#2. Edit file multilingual-tags.hbs

Find the file multilingual-tags.hbs at the path ./partials/site-wide/multilingual-tags.hbs and open it.

{{#has tag="#multilingual"}}
...
    {{!-- <link rel="alternate" href="https://yourdomain.com/fr/{{slug}}/" hreflang="fr" /> --}}
...
{{/has}}

You need remove {{!-- and --}} (line 7) and change https://yourdomain.com/fr/{{slug}}/ and fr into your domain with 3rd language you want.

For example:

<link rel="alternate" href="https://ghostfam.com/de/{{slug}}/" hreflang="de" />

Save it and done.

Updated: 06 May, 2026
AI
Share
Comments
banner-Cuong Thach
Cuong Thach avatar

Build a lean website to start selling your products immediately. Founder of bePublish and BrainNode OS.

Join Community TanaFlows

Join TanaFlows community. Make new friends, learn new things, and expand your horizons.