You can dynamically apply various types of text, including font family, font size and color. This is all done by setting up a few attribute fields called Gallery Preview Reference and Gallery Preview Selector Note: if you don’t want customer to choose between different fonts and colors, you can better apply the font styles and colors using some custom CSS. Creating the input field Before we can apply changes to the text input preview value, we first need to create our input field if we haven’t done so already. If you have the input in place already, this might be a good point to double-check your settings We want to create a new attribute like this: Template: Text field Type: Input And don’t forget to add in a title. Now we want to scroll down to the Items repeater and click the button “Add attribute item” Next, we give the input field a label and configure the following settings: Enable preview: Yes Preview Top Position: CSS value Preview Left Position: CSS value Preview Width: CSS value Field key: your-unique-text-input (unique identifier for this input value). Will be used in other attributes to reference this field. If you need more text fields you can add more input items to the list.
Now save the attribute and add it to your configurator builder. Update input font family If we want to update the text input font family, we have to create a new attribute type of Font Add a new attribute, enter a title and configure the following fields: Template: any template except for inputs Type: Font Gallery type: Image Gallery Preview Reference: your-unique-text-input (field key of the input optionally comma separated) Now we want to go back to the Items repeater again and click the button “Add attribute item” Next, we give the input field a label and configure the following settings:
For each option you can provide the font family details. Make sure the script link is accessible and you leave “Enable preview” field set to “Yes”. Because we use the font option the input text will automatically update with the configured font family. Add as many font options as you like and save the attribute. Now save the attribute and add it to your configurator builder. Update input color To change the text color we will want to use the attribute type Color. Create a new attribute, enter a title and configure the following fields: Template: any template except for inputs Type: Color Gallery type: Image Gallery Preview Reference: your-unique-text-input (field key of the input optionally comma separated) Scroll down to the items and add your color items in there.
Because we selected color type, the text input will automatically update its color value. Make sure you leave the “Enable preview” fields set to “Yes”. Otherwise the changes may not reflect in the image. Finally, save the attribute and add it to your configurator builder. Update input font size To update font sizes and other properties, you can choose between two approaches: update with a fixed value use input field to dynamically set the value. We will cover both options. With option attribute The simplest option is with a predefined option list.
For this example we are going with the following settings: Template: Dropdown Type: Image Gallery type: Image Gallery Preview Reference: your-unique-text-input (field key of the input optionally comma separated) Gallery Preview Properties: font-size (CSS properties you want to update) After adding in the Gallery Preview Reference, you will notice each attribute item in the list contains a new field called “Gallery Preview Selector” We need that field to update the text value.
For each Gallery Preview Selector, enter the CSS units: 10px, 20px, 30px. And save the attribute. (Also make sure the attribute is included in your configurator builder). Now the font size should update accordingly You can also update multiple CSS values at once Simply add comma separated values, like: font-size, font-weight Then, in the Gallery Preview Selector, enter: 40px, 700 (bold) With input attribute The other approach is by another input field We will create a new attribute for this with the following settings: Template: Numeric field Type: Input Gallery type: Image Gallery Preview Reference: your-unique-text-input (field key of the input optionally comma separated) Gallery Preview Properties: font-size (CSS properties you want to update) And we will add one item to the attribute items list. Add a label and configure following settings: Input Type: Number Enable Preview: No (otherwise we get input value in preview as well) Field min: 10 Field max: 30 Field unit: px Field value: 20 (default value) Finally, save the attribute and add it to your configurator builder. Now the changes should reflect in the image input preview. Update other input attributes Since we use a dynamic approach of Gallery Preview Selector and value, you can update other CSS properties with our fields as well. Think about rotation and font style for example. Be creative! If you need help setting this up, feel free to reach out to support.