Internationalization

There are a few options to manage multi-language and multi-country content in Storyblok. Option 1 is a good decision if you have most of your content translated. Consider using option 2 if the content tree is different in every language and option 3 when you want to mix the first two options.

Option 1: Single tree and field level translation

Storyblok can store multilanguage content on the field level. This means you only need one content tree. A single tree stores each translation as a property under the same content item.

As long as your site content is very similar from one language to another, this is the best option. You will have fewer pages to manage and the system takes care of serving the correct language automatically.

Setup

In order to setup field level translation you need to add languages under the tab “Languages” in the space settings and define set the fields to translatable in the schema configuration of each component. Once you configured the languages you should see a language switch like in the following screenshot.

Multilanguage Storyblok

API-access

You can access the localized version of the content by prepending the language code to your api requests. Following a few examples.

Default version:
api.storyblok.com/v1/cdn/stories/home
Localized verison:
api.storyblok.com/v1/cdn/stories/de/home

Default version:
api.storyblok.com/v1/cdn/stories?starts_with=news
Localized verison:
api.storyblok.com/v1/cdn/stories?starts_with=de/news

To get all stories beginning at the root level you need to use the asteriks symbol after the language identifier.

Example:
api.storyblok.com/v1/cdn/stories?starts_with=de/*

Option 2: Multiple trees

This structure consists of separate content trees, one for each language. One content tree for English, another for German and so on. This effectively duplicates some content but allows completely customized local content.

This option is also optimal when the content for each language is managed by separate teams or your website or app is organized differently for each language.

Setup

First you will need to create folders at the root level of your content repository. They represent each language or country version of your content.

Img

To make it easier to create a linkage between the alternative versions of each language you can install the “Dimensions” app. This will add a tree icon to the top right corner of the content editor.

The submenu show a list of folders and the connected alternative versions. When clicking “Create” a new content item will be duplicated from the current content item.

Img

Option 3: Mixed

You can also mix the first two options and create separate tree structures only where you need it. A good example are multi language and multi country setups where you use a option 2 for organizing country or region specific content and option 1 for the translations.

Documentation