Translations

If you want to change the text of a native component you don’t have to create a custom component just for translation purposes. Ollie Shop comes with the feature that allows you to manipulate text via configuration.

Ollie Shop Messages

Every string in Ollie Shop can be personalized, even from native Ollie Components. To make it easy for you to change the text on any native component we created a variable to represent each text. There is no way we can list all of them, but it’s very easy to find out what is the variable name for any given string.

Steps

Open any checkout page in your browser.
Right-click on an element that contains a customizable text and select Inspect.
In the browser DevTools, go to the Elements tab.
Expand the selected HTML node. You will find the custom text metadata attributes applied to the element, immediately before or alongside the rendered text.

Metadata attributes

Each customizable text includes the following attributes:

id		Description	Usage
`data-translation-key`	mandatory	Unique identifier of the message	Use this key to customize the text in the Admin Dashboard → Messages section.
`data-translation-raw`	mandatory	The original, unprocessed message template	This value does not include the final rendered text. Instead, it shows the message with its variable placeholders as defined by the translation system
`data-translation-variables`	optional	Defines the variables used by the message	- Dynamic values (e.g. item counts, prices) - Pluralization rules - Rich text or conditional content

In the image below, the message uses cardinal pluralization provided by the next-intl library.

For more details about pluralization and message formatting, refer to the official next-intl documentation here.

Alternatively you can use the Ollie Devtools to quickly find the text you want to customize.

Changing a text or adding a translation

Native Components

As an example let’s change the text insde the “Checkout” button of the cart page

We must identify the name of this component and where it is positioned in the template. An easy way to do this is to inspect the element via your browser as explained above. On your Version you’ll edit your UI Messages Configuration and include the new text.

An editor will appear where you’ll be able to insert your custom text. You must include the language you want your change to be applied, as well as the details of your component.

Adding a Translation to a native text

Translations happen the same way. Translations are nothing but changes to native texts.

Custom Components

Translations can also be applied to custom components, the pattern is the same, the only difference is that you’ll have an object specific for custom components

{
	"messages": {
		"custom": {
			"en-US": {
     			"myCustomComponent": {
        		"button": "Add Your Text Here",
      			}
    		}
    	}
  	}
}

Overview

Start Here

Core Concepts

Customization

CLI Reference

Ollie SDK

Analytics & Scripts

AI Skills

Tools & Tips

Product updates

Ollie Shop Messages

Steps

Metadata attributes

Changing a text or adding a translation

Native Components

Adding a Translation to a native text

Custom Components

​Ollie Shop Messages

​Steps

​Metadata attributes

​Changing a text or adding a translation

​Native Components

​Adding a Translation to a native text

​Custom Components

Ollie Shop Messages

Steps

Metadata attributes

Changing a text or adding a translation

Native Components

Adding a Translation to a native text

Custom Components