How to translate your Pages in Showroom

About this article

Retailers value a personal, local touch. In order to amplify cross-border selling and help brands that want to enter a market where English is not the default language, it’s important to be able to translate not only the Showroom UI and products but also to be able to display the Showroom Pages with special collections, additional visuals and other significant information in multiple languages. This article describes the steps needed to achieve this.

How to translate your Pages in Showroom

Centra provides an easy and flexible solution for translating the content of Pages from English into multiple languages – starting with German, Swedish, and French. It’s simple to translate all the textual content on all Showroom Pages so that the Showroom end-user can browse the entire service in their preferred language and have a wholesome experience.

Adding translations

You can define which languages the Page should be available for both new and existing Pages.

A Page requires a default language, which controls the layout of the Page. Currently English is used as the default language, and it will always be required and selected. Please note that this cannot be changed.

Pages that have existed before introducing the translations functionality are assumed to have the content written in English and will have the English language selected by default.

Setting Page languages

When creating a new Page, you can mark languages that should be available in the Languages section.

For already existing Pages you can add new languages as well as remove unnecessary ones in the Page settings pop-up of the respective Page. Any modifications to the languages will be applied after clicking the 'Save' button as shown below:

Available languages

All of the languages below can be used for translations when creating or editing Pages that are displayed:

  • English
  • Deutsch
  • Français
  • Svenska

This means that even if a language is not selected in the ‘Available Languages’ setting in the Showroom plugin, it will still come up in the Showroom Pages and can be used for translations. This is useful when you want to prepare all of the translations for your Showroom Pages before enabling the language switching function for the end-user.

When you select a language that is NOT activated in the Showroom plugin, a warning is displayed below the Languages section.


When you modify the languages on a Page and remove a language that contains translations, the translated content is preserved until you save the Page content (NOT the Page settings). This was added as a precaution, so that translated content is NOT lost in case an incorrect language is removed by mistake.

Translations UI

When more than one language is selected, the Page Editor displays the language tabs above the Page sections.

By clicking on the tabs, you can switch between default language and translation languages, where it’s possible to modify selected parts of already added blocks.

The first tab is always the default language. It’s marked with the layout icon to inform you that the Page layout can be modified in this tab. The subsequent tabs are the translation languages displayed in alphabetical order. When a language is missing translations on any of the translatable elements, a warning icon is displayed next to the name of the language.

A warning is also displayed on block level for every block that is missing translation for any of its content.

Translating Page elements

To add a translation, you must first switch to the target language. The editor then goes into the translation mode, which limits the functionality to only modifying the content of existing text, buttons, and links (in buttons or on whole blocks). Adding translated content works the same way as regular Page editing.

To let you know that the layout editing is disabled in this mode, a warning is displayed below the editor top bar.

The content for additional languages will initially be the same as the content of the default language. It will be automatically synced until you modify the content in the additional language or click on the element (which will mark the element as translated).

Translating text

When you are in translation mode, you can simply replace the default text content of a text part by writing or copying the target translation to the desired text part.

Any links in the translated text can be added in a different place than the original, see the recording below:

Translating buttons

After switching to translation mode, you can replace the label of a button as well as the link in the same way as in regular content editing. The button can be linked or unlinked in additional languages regardless of the link’s presence in the default language.

In translation mode, you can modify block links just like in regular content editing. Only existing links can be modified – if no link has been added in the default language (layout), the link tools is NOT available in translation mode for other languages.

Previewing translations

Page preview allows you to see how the changes will look without the editor elements in place. It can be useful to double-check the Page before publication and make sure that correct products are visible for markets and pricelist combinations.

Accessing Page preview

There are multiple ways of accessing the Page preview. You can open the preview right from the Pages listing by clicking the URI or language flag. Clicking the flag opens the preview in the respective language, while clicking the URI opens the preview in the default language.

You can preview the Page in the selected language right away from the Page listing, by clicking the flag of the desired language in the row of the particular Page. This redirects you to the preview in the language of the flag. The flags also inform you about the publication state of each language.

Preview can be also accessed from the editor view by clicking the 'Preview' button located on the right side of the top bar. When multiple languages are enabled for the Page, the preview opens with the language matching the language tab currently selected in the editor.

When accessing Page preview from the editor view, any unsaved changes will be shown in the preview.

Segmentation preview

In the preview, you can make sure that proper content and products are visible to the customer depending on market and pricelist combination. To do so, click on the cog icon in the top bar, which then displays the segmentation pop-up. Preview can be also accessed from the editor view by clicking the 'Preview' button located on the right side of the top bar. When multiple languages are enabled for the Page, the preview opens with the language matching the language tab currently selected in the editor.

Here you can select market (from markets assigned to the Page), pricelist, and language (from languages enabled for the Page) for the preview.

Device preview

Preview mode allows you to see how the Page will look on different devices by selecting the desired device in the device switcher in the top bar.

Depending on the available screen space, fewer options may be available in the device switcher. For example, when you are previewing the Page on a tablet device, the desktop will NOT be available in the switcher, as it is not possible to preview a wider version of the Page on a smaller screen without scaling it down.

Publishing a Page with translations

When multiple languages are selected for a Page, a more advanced publish drop-down is displayed (compared to single Page publication flow). From the drop-down you can publish, unpublish, and revert changes for each language of the Page. Additionally, you can see when each language was last saved or published.

Some limitations apply in this flow:

  • When you are publishing a Page for the first time, the default language must also be published, and it is preselected in the drop-down whenever you select an additional language
  • When changes are made to the layout, the default language must be published along with any additional language you selected
  • When reverting the default language to the last published version, additional languages are also reverted
  • When unpublishing the default language, additional languages are also unpublished

When a Page has been published, a 'Get shareable link' button is displayed in the top bar of the 'Page Preview', allowing you to get a link to the Page that can be shared with customers.

Previous article: How to customize buttons
Next article: How to clone orders in Centra Showroom

On this page