Custom text add-on
Custom text add-on allows the users to add text to the configurable product. They also can edit the text font, color, and position. 3 steps are required to set up the feature: add new fonts, add new colors, create the text component and add it to your configuration.
/!\ Associated posts /!\
1. Add new fonts
To do so, go to Dashboard > Product Builder > Manage fonts. You’re able to add google fonts or upload your own font file.
1.1. Google fonts
To add a google font, pick up one in the dropdown list. Once done, the “Name” and “URL” fields will automatically be filled up. Then, hit the “Add font” button.
When adding a new Google font, do not change its default name and URL shown in the “Name” and “URL” fields. In case your webisite is already using the font you want to add, clear the “URL” field for not including the same font twice.
1.2. TTF/OTF files upload
You can also upload fonts from TTF or OTF files. After uploading the files you will have to select at least one “Style” before adding the font.
2. Add new colors
To add colors go to Dashboard > Product Builder > Manage colors. You’re able to select the color with a color picker.
3. Add a new text component
After the fonts and colors, let’s create the text component. To do so, go to Dashboard > Product Builder > Text components and add a new text component.
4. Text component general settings
Those settings are mostly about the text box and its position on the configurator preview.
4.1. Boxed text
This setting allows you to define boundaries for the text. If set to “YES“, you will be prompted to define the dimensions of the text area in which the text will be confined.
The text box dimensions are expressed as a percentage of the preview dimensions. So, setting the “Box width” to 10% and the “Box height” to 15% means that it is 10% of the width of the preview and 15% of its height respectively.
The position setting allows you to define a default position for the text.
- “Top” for the distance from the top edge of the preview
- “Left” for the distance from the left edge of the preview
- “Angle” for the rotation degrees of the text
Distances are expressed as a percentage of the preview dimensions. For example, setting the “Left” position to 10% and the “Top” position to 20% means that it is 10% of the width of the preview and 20% of its height respectively.
4.3. Font size
It sets the default font size of the text when shown on the preview
4.4. Characters limits
With this setting, you can define the number of characters the user can type.
If you set a price for the text, when the user types a text, this price is automatically added to the total price of the product being configured. If the user removes the text, the text price is subtracted from the total price.
4.6. Multiple lines
Longer texts can be written in several lines. If set to “YES“, this setting will allow line breaks in the text field so that the text can be shown in multiple lines.
4.7. Text actions settings
Those settings allow or prevent the user to perform certain actions directly on the text that is shown on the preview.
If set to “YES“:
- Lock rotation: prevents the user to rotate the text
- Lock scaling from right to left: prevents the user to scale the text horizontally
- Lock scaling from top to bottom: prevents vertical scaling
- Lock the horizontal movement: ensures that the text always stays at the same distance from the left edge of the preview
- Lock the vertical movement: ensures that the text always stays at the same distance from the top edge of the preview
5. Fonts settings
This setting allows you to choose whether to show a font dropdown to the user so that they can change the text font on the preview.
5.1. Use global fonts
If set to “YES“, all created fonts will be listed in a dropdown on the configurator. if set to “NO“, it means you don’t want to show all the fonts for this text component. You then will be prompted to choose the fonts to display in the “Selected fonts” field.
5.2. Default font
This is the default font assigned to the text when the user types it.
5.3. Show the fonts list
If set to “NO“, the fonts list won’t be shown to the user. In this case, they won’t be able to change the font. If set to “YES“, they will be able to change the text font in a dropdown.
6. Colors settings
This setting allows you to choose whether to show the text colors to the user so that they can change the text color on the preview.
6.1. Use global colors
If set to “NO“, it means you don’t want to display all the colors for this text component. You then will be prompted to choose the colors to display in the “Selected colors” field. On the other hand, If it is set to “YES“, all defined colors will be listed on the configurator.
6.2. Default color
This is the default color assigned to the text when the user types it.
6.3. Show the colors list
If set to “NO“, the defined colors won’t be shown to the user. So, they won’t be able to change the text color. If set to “YES“, they will be able to change the text color.
7. Use text components in a configuration
This is the final part about setting up the custom text addon. Now that the text component is created, you need to associate it with an option in a configuration. To do so, edit a configuration and add a new component with the “Text field behavior“.
Make sure the “Index” of the text component is higher than all other components indexes. This ensures that the user will always be able to see their text on the preview.
Now, associate your text component (created on Dashboard > Product Builder > Text components) with a configuration option. To do so, click the “Manage options” button, add the option and select the right text component in the dropdown.
For Custom text add-on to work properly, an option image must always be displayed in the preview. So, make sure to set at least 1 option (with its image set) as “Default” in any component of your configuration.
Was this post helpful?
Last updated on May 13, 2022