Add Text & Text Personalization
TABLE OF CONTENTS
Personalization Settings
Paragraph Text
To add a text to your artwork, click on the "Text" button.
Or upload a PSD file. If you choose to import text from a PSD file, remember to click converting your PSD text to Teeinblue's text layer. After conveting, you should re-check the text font family and adjust it if needed
Your text content. Add a text that you want to be showed by default on design.
Eg. Lily (a name for a woman), 17/09/2020...
This doesn't change the layer's name. To change the layer's name, just double click on the layer name.
Change the default color of this text.
Please read the article: About Fonts for more details.
Set a limit for text frame-width. It will help to scale text size when text is long and reach the frame-width limit.
For short text like names, we suggest that you set the max-width for text frame equal to 500 - 600 px.
You can also set a background effect for the custom text fields.
And this is the results on your Storefront:
Same as the option in Layer options. Learn more.
Turn this on if you do not want customer to add text for this layer.
Enable "Allow personalized" toggle to allow your customer to make custom changes with that text.
After enabled, there will be an input field on personalization form on storefront to add custom text.
Show the label of the text field on storefront.
Eg. Upload your photo, Woman's name...
Temporary text showed on input field as guidelines.
Eg. Type your name here
Set default input type:
All characters (Aa Bb 123 @#$)
Only numbers (123)
Date picker
Choose how to display your customer's texts:
Normal
lowercase
UPPERCASE
Capitalize Each Word
Set limit on the number of characters that customer type in. This prevents too long text or overlapping.
Set a fixed word/character before or after your personalized text. The position of this word won't be changed as your customer add text
Eg. Mr. Leroy
You can choose to offer your color option as
Color Picker
or limit the number of colors by setting up with Color Category (in Assets page). Learn more on how to set up Color Category here
Let your customer choose font family. This feature only works if you set up the original text layer with Custom Font
Step 1: You'll need to set up Font Category in Assets > Font Categories. Learn more on how to set up Font Categories here
Step 2: Go back editing the text layer in Artwork > choose the Font Category that you've just created
Here's is the result on storefront:
In this example, if the Map Location is set to Berlin, Germany, both the text field and the Live Preview will automatically set to Berlin, Germany as well.
To do so, please follow these steps:
Create a text layer like you usually do
Select Populate values from other options
Continue to select the Layer you want to get value from. In this case, it would be the Street Map layer
Select the type of value you want to get. You can click on the Lookup values button for more details. At the moment, we support these values. We will be continuing to update more in the future!
Since you want to get the place name value, then you can copy and paste the {{place_name}} value there.
| Tips: You can also enter a custom text there along with the custom value
Check your results on the Storefront:
Please keep in mind that you can also combine different custom values if you want as well!
NOTES:
Customers can still edit the text field anytime, even after it's been filled.
If the Customers change the map location again, the text field will update with the new values, which could replace any custom info they added before.
Enable this option if it's a mandatory field to place order.
Choose alignment for your text input.
You can add stroke effect to your text via this setting.
And this the the results on your Storefront:
You can always enable both settings at the same time.
You can adjust letter spacing using this icon
Inside Artwork Editor, click the + icon and select Paragraph option.
Things to keep in mind:
The container size will be fixed, all text in paragraph will not exceed this container.
If the text is longer than the width → the text will break to the next line
If the text is longer than the height → the text will auto scale down to fit its container
If the text is shorter than the height → the text will remains the same, the maximum font size should equal the font size that you set for the paragraph.
Horizontal Alignment
Vertical Alignment
The paragraph will automatically be scaled vertically. You cannot disable this setting.
Things to keep in mind:
On your Product Page, if the text is longer than the container’s height, the font size will be reduced to fit the text into its container.
The auto scaling feature does not work on Artwork Editor yet. You will have to try it on Campaign Editor, or Product Page.
You can set the letter spacing of your paragraph via this setting:
You can use the following properties:
Font Size
Font Family
Font Color
If a paragraph reaches its container box, increasing font size will do nothing.
Background will fit with the paragraph content (not the container box)
This will be applied to the whole paragraph, not each line individually. The input of [Enter] or [Spacebar] will be calculated as 01 character.
You will find this setting in Extra section. This setting is used to update the paragraph position of your rendered order design.
Sometimes, depending on the custom fonts you are using, a paragraph's position might be a few pixels off in the order design.
We can’t calculate exactly position of some handwriting fonts. Therefore, the position of the paragraph on Artwork and Product Page might be a few pixels off with the position on Order design:
If the paragraph is top-aligned (vertical align), it will be moved down a few pixels on Order design.
If the paragraph is bottom-aligned (vertical align), it will be moved up a few pixels on Order design
If the paragraph is middle-aligned (vertical align), it will be in correct position, not be deviated at all. You will not need to use this setting.
If these cases happen, follow the following step to fix the position of the paragraph of your orders:
Step 1. Open the Artwork, and adjust the vertical offset setting.
Use this option to correct it (- 1 to move up 1px and + 1 to move down 1px)
Step 2. Save the Artwork once you are done.
Step 3. Regenerate the design file.
You can repeat from Step 1 to find optimal result.
Step 4. Be sure to update the Campaign once you are done. You will not have to repeat these steps anymore.
Curve Text
Skew Text
Input Type
For detailed instruction, read this article: Add Condition for Layer
This field is only used for extra styling. Require CSS knowledge.
Personalization Settings
Paragraph Text
To add a text to your artwork, click on the "Text" button.
Or upload a PSD file. If you choose to import text from a PSD file, remember to click converting your PSD text to Teeinblue's text layer. After conveting, you should re-check the text font family and adjust it if needed
General Settings
Default text
Your text content. Add a text that you want to be showed by default on design.
Eg. Lily (a name for a woman), 17/09/2020...
This doesn't change the layer's name. To change the layer's name, just double click on the layer name.
Text color
Change the default color of this text.
Fonts
Please read the article: About Fonts for more details.
Auto scale when text is too long
Set a limit for text frame-width. It will help to scale text size when text is long and reach the frame-width limit.
For short text like names, we suggest that you set the max-width for text frame equal to 500 - 600 px.
Text Background
You can also set a background effect for the custom text fields.
And this is the results on your Storefront:
Personalization Settings
Add toggle to show/hide
Same as the option in Layer options. Learn more.
No Personalization
Turn this on if you do not want customer to add text for this layer.
Enable Personalization
Enable "Allow personalized" toggle to allow your customer to make custom changes with that text.
After enabled, there will be an input field on personalization form on storefront to add custom text.
Option Title
Show the label of the text field on storefront.
Eg. Upload your photo, Woman's name...
Placeholder Text
Temporary text showed on input field as guidelines.
Eg. Type your name here
Input type
Set default input type:
All characters (Aa Bb 123 @#$)
Only numbers (123)
Date picker
Input text case
Choose how to display your customer's texts:
Normal
lowercase
UPPERCASE
Capitalize Each Word
Text character limit
Set limit on the number of characters that customer type in. This prevents too long text or overlapping.
Enable prefix/suffix
Set a fixed word/character before or after your personalized text. The position of this word won't be changed as your customer add text
Eg. Mr. Leroy
Allow customers to change Text Color
You can choose to offer your color option as
Color Picker
or limit the number of colors by setting up with Color Category (in Assets page). Learn more on how to set up Color Category here
Allow customers to change Font
Let your customer choose font family. This feature only works if you set up the original text layer with Custom Font
Step 1: You'll need to set up Font Category in Assets > Font Categories. Learn more on how to set up Font Categories here
Step 2: Go back editing the text layer in Artwork > choose the Font Category that you've just created
Here's is the result on storefront:
Populate values from other options
In this example, if the Map Location is set to Berlin, Germany, both the text field and the Live Preview will automatically set to Berlin, Germany as well.
To do so, please follow these steps:
Create a text layer like you usually do
Select Populate values from other options
Continue to select the Layer you want to get value from. In this case, it would be the Street Map layer
Select the type of value you want to get. You can click on the Lookup values button for more details. At the moment, we support these values. We will be continuing to update more in the future!
Since you want to get the place name value, then you can copy and paste the {{place_name}} value there.
| Tips: You can also enter a custom text there along with the custom value
Check your results on the Storefront:
Please keep in mind that you can also combine different custom values if you want as well!
NOTES:
Customers can still edit the text field anytime, even after it's been filled.
If the Customers change the map location again, the text field will update with the new values, which could replace any custom info they added before.
Mark as required
Enable this option if it's a mandatory field to place order.
Align text
Choose alignment for your text input.
Stroke Text
You can add stroke effect to your text via this setting.
And this the the results on your Storefront:
You can always enable both settings at the same time.
Letter Spacing
You can adjust letter spacing using this icon
Paragraph
Creating the Paragraph
Inside Artwork Editor, click the + icon and select Paragraph option.
Paragraph container
Things to keep in mind:
The container size will be fixed, all text in paragraph will not exceed this container.
If the text is longer than the width → the text will break to the next line
If the text is longer than the height → the text will auto scale down to fit its container
If the text is shorter than the height → the text will remains the same, the maximum font size should equal the font size that you set for the paragraph.
Paragraph alignments
Horizontal Alignment
Vertical Alignment
Auto scaling (vertical)
The paragraph will automatically be scaled vertically. You cannot disable this setting.
Things to keep in mind:
On your Product Page, if the text is longer than the container’s height, the font size will be reduced to fit the text into its container.
The auto scaling feature does not work on Artwork Editor yet. You will have to try it on Campaign Editor, or Product Page.
Paragraph letter spacing
You can set the letter spacing of your paragraph via this setting:
Adjust font properties
You can use the following properties:
Font Size
Font Family
Font Color
If a paragraph reaches its container box, increasing font size will do nothing.
Text background
Background will fit with the paragraph content (not the container box)
Text character limit
This will be applied to the whole paragraph, not each line individually. The input of [Enter] or [Spacebar] will be calculated as 01 character.
Vertical offset
You will find this setting in Extra section. This setting is used to update the paragraph position of your rendered order design.
Sometimes, depending on the custom fonts you are using, a paragraph's position might be a few pixels off in the order design.
We can’t calculate exactly position of some handwriting fonts. Therefore, the position of the paragraph on Artwork and Product Page might be a few pixels off with the position on Order design:
If the paragraph is top-aligned (vertical align), it will be moved down a few pixels on Order design.
If the paragraph is bottom-aligned (vertical align), it will be moved up a few pixels on Order design
If the paragraph is middle-aligned (vertical align), it will be in correct position, not be deviated at all. You will not need to use this setting.
If these cases happen, follow the following step to fix the position of the paragraph of your orders:
Step 1. Open the Artwork, and adjust the vertical offset setting.
Use this option to correct it (- 1 to move up 1px and + 1 to move down 1px)
Step 2. Save the Artwork once you are done.
Step 3. Regenerate the design file.
You can repeat from Step 1 to find optimal result.
Step 4. Be sure to update the Campaign once you are done. You will not have to repeat these steps anymore.
Features that do not work with the Paragraph function yet:
Curve Text
Skew Text
Input Type
Conditional Settings
Add Condition
For detailed instruction, read this article: Add Condition for Layer
Extra Settings
Custom class
This field is only used for extra styling. Require CSS knowledge.
Updated on: 19/11/2024
Thank you!