High-converting Multilingual Ghost Theme

High-converting Multilingual Ghost Theme

Building high-converting multilingual websites and newsletters - Generating unlimited revenue from worldwide customers.

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.

Comments

banner-Cuong
Cuong's avatar

Author bio will be limited to 200 characters. You can update your profile on the ghost dashboard. The banner image can be a Twitter banner or a 600x200px image.