Regions and Languages

Set Up Markets and Languages

Overview

If you want your app available in multiple regions or languages, you can configure Markets and Languages inside TNL Studio.

This guide covers:

  • Enabling a region picker
  • Adding and organizing markets
  • Enabling multiple languages
  • Editing translations

Configure Markets (Regions)

1. Open Market Settings

  1. Go to Mobile Menu
  2. Select Markets

2. Enable the Region Picker

  • Toggle Region Picker on

This allows users to select their region inside the app.

⚠️

Make sure the Region Picker is added to your navigation (either in the Account Menu or Main Navigation).


3. Customize the Region Selector

You can control how the selector appears:

  • Show currency
  • Enable search (recommended if you offer many regions)
  • Show flags
  • Show dividers
  • Set a default market

4. Add Available Regions

The left column displays regions pulled from Shopify:

  • Multiple connected stores will display all associated regions
  • Stores with multiple markets will display all configured markets

To add a region to your app:

  1. Click the + icon next to the region
  2. The region will appear in your active list

You can:

  • Reorder regions
  • Add headers or dividers
  • Set a default region

Headers and dividers are helpful if you offer many regions.


Configure Languages

If you're offering multiple regions, you may also want to offer multiple languages. TNL Studio will automatically translate all content within your app.

1. Open Language Settings

  1. Go to Mobile Menu
  2. Select Languages

2. Enable Languages

  • Toggle Enable Languages
  • Select a Default Language

3. Add a New Language

  1. Toggle on the language you want to enable
  2. Click Enable and Translate

The system will automatically translate your app content.
Once complete, the new language will be available.

💡

If using multiple languages, enable a Language Selector in your navigation.


Preview and Edit Translations

Preview Translations

You can preview translations from the Pages menu using the page actions.


Edit Language Packs

To modify translations:

  1. Open the Language Pack
  2. Review:
    • Default text (reference column)
    • Translation column
  3. Override any text as needed
  4. Click Save

Your updates will replace the automatic translation.



Best Practices

  • Set a clear default market and language.
  • Enable search if offering many regions.
  • Always add region and language selectors to navigation.
  • Review automatic translations before publishing.
  • Use headers/dividers for better organization.

Your app is now ready to support multiple regions and languages.