Page Comparison

Most of the text within the checkout will be outputted using a line that looks like this.

$i18n.write("checkout.options.shippingPreferencesHeader","SHIPPING PREFERENCES")

This is calling the write method on the i18n object.  This method is looking up the text under the key.

• checkout
  • options
    • shippingPreferencesHeader

You may be tempted to just edit the text in the second parameter "SHIPPING PREFERENCES", but you're going to be left wondering why the page did not update.  The simple answer is that the second parameter text is there to show you the default text that will be coming out of the English language file.  It makes it easier on the developer to know what the page looks like.  So how do we properly change this from "SHIPPING PREFERENCES" to "SHIPPING METHODS"?  This is all done through the GUI. First click on the Languages tab within StoreFronts and then click Edit next to your language as shown below.

Image Removed

This file is a JSON file.  It's a simple nested data structure using the hierarchy shown above.  So we need to drill down to find.

• checkout
  • options
    • shippingPreferencesHeader

Once you find the key, edit the text contained in quotes to the right.  In this example we want to change "SHIPPING PREFERENCES" to "SHIPPING METHODS" and then click "Save".

Image Removed

Now let's refresh the checkout and we'll see the final result.

Image Removed