General usage

Read below, or watch the video version here.

How to setup the text overlay feature

The setup is split in 3 sections:

• The Fonts Library, where fonts are managed globally
• The layer, where general options are set:
  • Fonts available for that text (at least one required)
  • Colors available for that text (at least one required)
  • Text type (single line or multiple line
• The content (choices), where more specific options are set:
  • Text position, rotation and text box size
  • Text alignment
  • Font size
  • Maximum number of characters
  • Input placeholder

The fonts Library

To use fonts in the text overlay, you first need to add those to the fonts library.
A single library is used for all the products, and fonts are then selected for each field.

Upload your fonts to the font library. Use the Category option to filter and find fonts easier.

The layer

Once you have uploaded your fonts, you can go ahead and create the Text overlay layer:
Add a new layer, and change its type to “Text overlay”:

Then set the specific settings:

• Text type
  Single line or multiple lines
• Text color label (optional)
  A custom label for the colors section
• Text colors (required)
  At least one color is required. If only one color is set, the setting will not be visible in the front-end.
  
• Fonts label (optional)
  A custom label for the fonts section
• Fonts (required)
  At least one font is required. If only one font is set, the setting will not be visible in the front-end.
  
• Font list display
  Drop down or list
• Text case
  Whether to automatically change the case, or keep it as the user types it.

The content

In the content section, the choices each represent a text field in the front-end, with position and dimensions.

You will typically have one choice per layer, but you can technically add as many as you want. For example if you need text on 2 lines. Or, if the location or size can change depending on a previous selection, you can show/hide choices using conditional logic.

Once you have added a choice, you can set the following options:

• Default text (optional): A default value for the field. Will be displayed in the preview, and accepted as a valid value when the field is required.
• Placeholder (optional): A placeholder text. Will only appear in the field, not in the preview.
• Required
• Maximum number of characters (optional): The text will also be limited by the text box defined in the text position later on.

Once these options are set, you can move on to setting the text position(s) on the product.
You can set a position for each view.
If a view does not have a position, the text will not be visible for that specific view, as you would expect.

When clicking “Set text position and rotation”, a modal window will open.

You will first need to select a reference image in order to position the text:

Once an image is selected, you can start moving the text to its desired location.
You can either drag and drop the text, or use the position fields:

Available settings are:

• Position X
• Position Y
• Width
• Height (for multiple line texts only)
• Font size
• Text align
• Rotation

That’s it, your customers can now preview their text live on your configurator.