Customization - Static Area For Monograms & Text: Multi font family / color / size selector for users. Charge per character feature. Glow effect

Multi font family / color / size selector for users

How to limit font selection for monogram

Charge Per Character Feature

Specify a special price for certain symbols

Glow effect

Custom user text

With the help of this instruction you can not just add text, but give the buyer the opportunity to choose from the options for color, size and font. We present you a powerful tool for working with text layers.

One color, one font, one size.

If you do not need more than one type of font design - you need to perform just a couple of simple actions.

If you want to allow your users add some text (monogram), for example, print on a T-shirt, you need to do the following:

First of all, First of all, add a new "text field" category.

If you need a simple text monogram, select “Text Monogram Field” or “Long Text Monogram Field”, but if you need complex functionality for wholesale engraving then choose “Engraving For Wholesale” use this article for more information Customization - Text Engraving For Wholesale / Qty Based Unique Text With Templates .

Fill in the following fields

Title: any title, the more descriptive the better.

Type: "Text Monogram Field", "Long Text Monogram Field”, Text List, Dropdown

Save

The next step is to add Option.

Fill in the following fields

1. Label: some name, the more descriptive the better.
2. Default value: any word or characters that will be displayed by default.

      3-4. Set Min and Max Length: the number of characters that the client can enter.

5. Check the box "Charge Per Character" if you need a feature that allows you to charge for each character from engraving.
6. Set the price per text in total or per character.

Save

The next step is to create the layer.

Fill in the following fields

1. Title: some name, the more descriptive the better.
2. Type: Text.  (IMPORTANT: if you would like to have 'bridge or curved effect' or limit the size of the textbox within certain space and increase / decrease the space between the letters automatically based on how many letters are entered - use 'Curved' Text Layer. 
3. View: Select the view in which the text will be displayed.
4. Text: Text to be displayed until custom text is entered.

Go to the Logic tab if you need to specify special conditions for displaying this text. If you want it to be always available, then do not add anything. Guide for Logic Conditional Logic Rules For Displaying Options / Categories / Tabs.

Go to the Advanced Tab.

Fill in the following fields

1. Font size or font size from the category
2. Font family or font family from the category
3. Always uppercase or not
4. Font style (Normal, Bold, Italic)
5. Text wrap. You can create monograms with or without text wrapping. This can be handy if you need to limit the visual text area.
6. Vertical Alignment (for Text monogram with a certain width or Long text monogram)
7. Text width auto
8. Text height auto. 
9. Line height. All three can be set is custom for a text layout you are aiming to.

Save

Scroll down

1. Turn on automatic text width or set it
2. Font colour

      3-5. Text source, specify the one we created at the beginning.  

      6. Save

Most of the settings can be customized so that clients can change them themselves.

Multi font family / color / size selector for users

Here is the result

This article may be helpful:

Cloning custom layers

Conditional Logic Rules For Displaying Options / Categories / Tabs

Customization - Text Engraving For Wholesale / Qty Based Unique Text With Templates

Multi font family / color / size selector for users

To allow customers change font family color or size you need to create appropriate categories and assign them in the custom layer advanced tab:

• Color Thumbnail Category Type - for changing the color. Read more about Color Thumbnail Category Type. Assign created category with color options to custom layer of type 'Text' or 'Curved Text'.
•  "Font Family" and "Font Size" Category Types are described in the video below.
  They allow you to bind your values ​​to a specific custom layer to a category of 'Font Family' or Font Size type.
• This allows the user to change the font size and font type using dropdowns list on the frontend
• You can also link font size to the "Dropdown" or "Text List" categories.
  
  
  

How to limit font selection for monogram

Sometimes customers want to choose a specific font for engraving, but there are too many types and It becomes so hard to choose. Now you can provide a limited amount of font types in Custom Product Builder.

In order to choose what fonts are allowed on the user frontend - please go to Actions > Fonts Manager. Fonts that are in the right column will be displayed on the frontend.

Charge Per Character Feature

The application has a feature that allows you to charge for each character from engraving.

To use this function, please do the following:

First of all you need to add the necessary category. You can use one of these categories: "Text Monogram Field", "Long Text Monogram Field" or "Engraving for Wholesale".

Fill in the following fields

Title: any title, the more descriptive the better.

Type: "Text Monogram Field", "Long Text Monogram Field" or "Engraving for Wholesale".

Save

The next step is to add parameters.

Fill in the following fields

1. Label: some name, the more descriptive the better.

2. Default value: any word or characters that will be displayed by default.

3-4. Set Min and Max Length: the number of characters that the client can enter.

5. Check the box "Charge Per Character".

6. Possibility to specify a special price for certain symbols

7. Сheck the box if you want to consider space as a symbol

8. Set the price per character.

9. Include adding a customer character to the end of the input field. This option will add any character you want to the text. Also, you can set colour of the character.

Save

Here is the result. 

Use Custom Character Prices From General CPB Settings

If you want to charge money for a symbol and at the same time specify a special price for certain symbols, you can use the Custom Character Prices feature. All you have to do is add all these symbols to General CPB Settings and enable this feature.

Go to General Settings.

Add all the necessary symbols and set a price for them.

Save.

To edit or delete a character press the button as shown below.

The next step is to configure the text input option. Any symbol can be put in the text input.

1. To make this function available, first activate the "Charge Per Character" function.

2. Now you can activate the "Use Custom Character Prices" function.

3. Specify prices for regular symbols.

4. Save.

You cal also choose to display the counter of entered charactes

Here is the result.

Glow effect

If you are building a neon sign product, you can add to the custom text glow effect. In the Advanced tab of the Layer select Color settings -> Enable "Enable Glow Effect" -> Here you can regulate the Blur effect strength, as well as external and inner glow. Also, you can turn on Custom glow colour - in this case, the glow colour will depend on this option instead of the colour from the category.

IMPORTANT:  To make sure the product categories / options are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.