Skip to main content
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

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

​
Metadata attributes

Each customizable text includes the following attributes:
idDescriptionUsage
data-translation-keymandatoryUnique identifier of the messageUse this key to customize the text in the Admin Dashboard → Messages section.
data-translation-rawmandatoryThe original, unprocessed message templateThis 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-variablesoptionalDefines 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.
Messages Cardinal Plural
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
Translation Cart Pn
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.
Version Messages Admin Pn
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.
Translation

​
Adding a Translation to a native text

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

​
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",
      			}
    		}
    	}
  	}
}