The Text Preview extension for Add-Ons Ultimate allows you to display your user’s inputted text over the main product image.
In the example below, you can see that there’s a text field on the right where the user has entered some text. This text is replicated over the product image on the left.
Text Preview settings
Text Preview has a specific field type. So your first step is to create a new add-ons field and choose ‘Text Preview’ as the field type.
The Text Preview field type has all the parameters that a standard text field has, including minimum and maximum number of characters, free characters, etc.
It also has a number of additional features, shown below:
- Text center – X axis
This setting determines how far left or right the centre of the text will sit relative to the main product image. If you enter 0 here, the centre of the text will appear on the left side of the image; 50 will position the text exactly in the horizontal centre of the image. - Text center – Y axis
This setting determines the text’s vertical position relative to the main product image. A value of 0 will position the text at the top of the image; 50 will be the vertical middle; and 100 will be the bottom of the image - Width
This determines how wide the text field is relative to the image size – 100 would mean the text field was the same width as the main image - Default text colour
You can set the default preview text colour here - Default font size
Use this to set the preview text’s default font size in pixels - Default Google font
Choose the Google font to use for the preview text - Customers can change the colour?
If you select this option, the user will be able to use a colour picker to set the preview text colour - Customers can change the font size?
Enable this option to allow the user to change the font size of the preview text - Customers can change the font family?
Enable this option to allow the user to choose the font to use in the preview text