Working with microcopy

Where to find copy-texts

One of the biggest mandatory tasks for a customization project is to change the UI texts. FTW-daily is a rental marketplace for saunas - so, there are quite many components and pages that need to change the copy-texts.

The easiest way to modify the copy texts is through Flex Console, in Build > Content. This page helps you modify what in Flex is known as microcopy – button labels, help texts, and other small messages that help your user find their way around the marketplace.

Note: Hosted assets are available in Flex and the FTW templates starting from version v8.5. If you have an earlier version and want to implement the feature in your template, you can see the necessary modifications in the PR for ftw-daily.

When you first start building your marketplace, the JSON field in the Microcopy section is empty, and all microcopy comes from built-in microcopy files in the template. (We refer to these texts as microcopy, but in the template they are in the translations folder. In addition to the default en.json file, there are other languages available, which is why the folder is titled translations.)

In the Microcopy section, you can see links that lead to the microcopy folders for each FTW template repository, if you want to copy the relevant microcopy to Flex Console. In this tutorial, we will not copy the full texts – instead, we will enter only the microcopy we want to modify.

The built-in default microcopy for the FTW template can be found in this en.json file:

└── src
    └── translations
        └── en.json

In addition to microcopy, your marketplace has content pages, such as AboutPage, PrivacyPolicy, and TermsOfService. Those pages are managed in Flex Console under Content > Pages, and they can be modified similarly to the landing page.

In this tutorial, we change the microcopy of Hero component, but we have another document that dives deeper into this topic: How to change FTW bundled microcopy

Change the microcopy for Topbar component

The content of microcopy file has a format, where the "key" contains a dot notation:
"<ComponentName>.<microcopyKey>": "<microcopyMessage>"

So, there are a couple of ways to find the correct microcopy key for UI components:

• You could search for a microcopy message in the microcopy file
• You could check the name of the component and search for the component name in the microcopy file.

The latter option becomes easier if you use browser extension: React Developer Tools.
Here's a link to Chrome extension.

In the screenshot, the highlighted text (listing creation link) comes from a component called FormattedMessage. This is a component from React Intl library which FTW templates use to embed microcopy messages to correct microcopy keys. If you check the props section on the Components tab of Web Inspector (when React Developer Tools is installed), you see a row: id: "TopbarDesktop.createListing".

So, the microcopy message can be found from en.json file under the microcopy key: TopbarDesktop.createListing. There are also a few other messages you can see in the top bar without signing in – some in the TopbarDesktop component and one in TopbarSearchForm. Let's change all of them:

{
  "TopbarDesktop.createListing": "+ Add your cottage",
  "TopbarDesktop.login": "Log back in",
  "TopbarDesktop.signup": "Create an account",
  "TopbarSearchForm.placeholder": "Search cottages..."
}

Copy and paste the above rows, complete with the curly brackets, to the Microcopy JSON field.

When you save the file, you should soon see the changes in the top bar on the search page:

To get more insight into microcopy syntax, different language files, and localization of dates and money values, you should check the article: How to change FTW bundled microcopy.

To learn more about how the hosted microcopy work in FTW templates, read the article on hosted assets in FTW.

To read more about how microcopy can be modified in Flex Console, check out the article about microcopy in Flex.

In the next article, you learn how to configure FTW-daily and change the default currency.
› Go to the next article