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.

Changing text or adding 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. On your Version you’ll edit your UI 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.
{
	"messages": {
		"en-US": {  // the locale you wish to include a custom text
			"checkout": {  // the component you want to edit
        		"title": "Secure Checkout",  // the string you want to edit
      		}
    	}
  	}
}
Translations happen the same way. Translations are nothing but changes to native texts.
{
  "messages": {
    "en-US": {
      "checkout": {
        "title": "Secure Checkout",
      }
    },
    "es-MX": {
      "checkout": {
        "title": "Pago Seguro", 
      }
    },
    "pt-BR": {
      "checkout": {
        "title": "Checkout Seguro",
      }
    }
  }
}

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