Overview
The Visual Product Configurator Custom Text Addon allows the customer to add a custom textfield, with a custom color and font, to the preview area of the product customization. The text value of the field is usually sent with the order of the customized product.
Requirements and Installation
The instructions for the requirements, installation, and setup of the Custom Text Addon can be found here. Any additional setup information will be provided below.
Extra Setup
Your custom text field will only show if you have set up your Text Components and selected one for the field in your component.
To set up your text component, you have to create your fonts and colors first. It is after doing both that you can apply them within your text will display as you want it when the text component is chosen within your VPC component.
[Menu under Product Builder]
Manage fonts
This allows you to import your selected fonts, or choose them from the list of Google fonts that we provide within a dropdown field.
[Manage font section]
Steps
- Click on ‘Manage fonts’ in the submenu under ‘Product Builder’ in the Menu.
- Add a name for your new font. You can either use Google fonts or add your own TTF/OTF font file.
- If you choose Google fonts, you can either select from the preloaded dropdown of Google fonts, or add the full URL for it in the ‘URL’ field if your chosen Google font is not in the loaded font list.
- If you choose to use your own TTF/OTF font file, you can add it using the ‘Add font file’ button.
- Click on the ‘Add Font’ button at the bottom of the page to add the font to your font list.
- Your current list of fonts will always be displayed on the right-hand side of the ‘Manage fonts’ page.
Manage colors
[Manage colors section]
Steps
- Click on ‘Manage colors’ in the submenu under ‘Product Builder’ in the Menu.
- Add a name to identify your chosen color.
- Click the ‘Color code’ field and select your chosen color in the popup screen. You can choose to type in values in the RGB field, type into the HSB field, or enter the color code in the hash field (#).
Text Components
Text components are pieces of text that you create in the Text Component subsection, and now choose within your component within the component’s ‘Manage options’ section.
- To create a text component, click the ‘Text components’ submenu under ‘Product Builder’ in the menu. Click ‘New text component’ at the top of the page.’ [image]
- In the page that loads, you will see three (3) sections: Text component settings, Fonts, and Colors. [image]
- For the Text component settings section, if you opt to enable the ‘Boxed text’ field, a new field displays, allowing you to set the box width (in percentages) for the enabled box. [image]
- Fill the fields in the Text component settings section, and select the Font and Color you created previously, in their respective sections.
[Font and color selection within the Text component] - For fonts and colors, you have the option to enable the display of the other fonts and colors you have created within the system, to the user at the front end.
- Save/publish your text component.
Applying the Text Component
You apply the text component you have created by:
- In the configuration, select ‘Textfield’ in the ‘Behaviour’ dropdown list.
- Click ‘Manage options’. Click ‘Add options’.
- Type a name in the ‘Name’ field, then select your chosen text component under the ‘Text component’ field.
- Close the popup dialog.
- Save/publish the configuration.
Multiview text fields
This feature allows you to add a text on various views, it works only with the multiview addon.
- Go to “Configurations” and click on “add component” to create your custom text option
- Choose “multiple-views textfield” as your component behavior option
- Next click on “Manage options” and define the price and the text positions
- Finally go to “Settings” and select whether or not to display the custom font or color on the configurator page.
- Save your configuration
