Bootstrap Studio

# Localizing and Testing Reflow

The Reflow Toolkit (opens new window), which powers the ecommerce functionality in Bootstrap Studio, offers a rich localization (translation) API and testing capabilities.

Version Note

Localizations and testing are available only in toolkit v2. You need to switch the Reflow toolkit to v2 in order to use these features.

# Localization

Open the Settings dialog and in the Ecommerce tab you can see the "Translations" option.

Ecommerce Settings

To translate Reflow, you need to specify a locale file. This will change the entire user interface of Reflow components, including labels, text prompts and error messages.

To create a translation, follow these steps:

  1. Download the en-US.json (opens new window) file. This is Reflow's default language file. You will use it as a starting point.
  2. Import the file in your design.
  3. Translate some or all of the phrases to your language of choice. Note that the keys should not be changed.
  4. Enter the path to the localization file in the Translations input or select it from the dropdown menu.
  5. When previewing your design in the browser, check the console for any error messages that may point you to potential problems with your translation.

Learn more about the translation format here (opens new window).

# Test mode

Reflow offers a test mode (opens new window) you can use while developing and testing your app. We recommend working in test mode to avoid the risk of accidentally initializing charges with actual money.

You can activate test mode from the Activate Test Mode dropdown:

  • In Preview - this will only activate test mode in the Bootstrap Studio window and Browser Preview.
  • Always - this will also activate it when exporting and publishing.

All components in the page will now be switched to test mode and display only test-mode products which you've defined in your Reflow project.

While in this mode, you can use PayPal and Stripe test cards to try out your integration. Completing the shopping cart checkout process will create a test-mode order in your Reflow project, without doing an actual monetary transaction.

User account signed in with the auth button component will also be created in test-mode.

← Date Picker →