Building Product: Neon Sign Builder

Here are steps to build a basic neon sign product

Base

1. Upload a background. We suggest using darker background images to present the Neon sign product in a more realistic way. You can upload the image straight to the background. 

2. If you want to present your neon sign on several different backgrounds you need to create a category for it. Custom options -> Add the first customization -> Set Title -> Set Type as Single choice, Icons -> Scroll down to Options List and upload images both for Front and for the Thumbnail. (IMPORTANT: keep the size of the thumbnail small, because they will be displayed as 70x70 images on the front end – means, that there is no point in uploading big images). You can create as many background options as you require.

 

3. Now we need to add text input for the customer to put their text in. Add customization -> Input field -> Text area -> Scroll down to options to make sure that there is only one option left.

4. Press the edit option. Here you can set:
a. Minimum and Maximum length of the custom text
b. Activate the character counter, which will display the number of characters in the input
c. You can choose to count the space as a character or don’t.

5. As an alternative instead of text input you can use preset texts. To do so Add customization -> Single Choice -> Text buttons -> Edit options -> You will need to put text in the label field -> this text will display on the live preview after following steps.

6. If you want to change the size of the text on the live preview depending on the customer’s choice you can create another category. You can use several types of categories for this: Text buttons, Dropdown or Font select/Font size. In the first two variants, you will need to set each option manually. The Font select/Font size category creates options on its own - you will need to set just one option, that will contain all possible sizes.

7. To allow customers to select the colour for the text you need to create another customization Single choice -> Color choice. In the options of this category, you will see a small circle that is white by default. You can click on this circle and choose the colour from the colour picker. if you know the HEX code or RGB of the colour you can just put them in the fields.

8. To allow your customers to change the font you will need another category Font Select -> Font Family. It will create only 1 option that will contain all the Fonts you selected in your Font manager. (To learn more about custom fonts and font management, please check this guide).

9. Now we need to connect all these customizations to the live preview. To do so we need to create a new Layer: Decoration areas -> Add custom Layer -> Click on it.

10. In the settings tab of the Layer change Type to Text.

11. Next open Advanced Tab -> Text Settings

a. Select Font Size From Category to connect the font size of the text on the Live preview to the category. Select panel and category. If you don't want text size to be changed by the customer, you can set a default number.

b. Select Font Family From Category to connect the font family of the text on the Live preview to the category. Select panel and category. If you don't want the text font to be changed by the customer, you can set a default font.

c. Select Text source to connect the text of the text on the Live preview to the text input. Select panel, category and option.

d. Open Color settings and select Font Color From Category to connect the colour of the text on the Live preview to the category. Select panel and category.

12. Now when you type text in the text input and change all settings they will appear on the live preview

Neon

To add the Neon effect to this text do the following:

1. Go to Decoration areas -> open the Layer with text -> Advanced tab -> Color Settings -> Enable Glow Effect
2. You can change parameters of Blur, Lighten Inner Glow Color and Lighten External Glow Color to achieve the glow effect you want.

3. If you turn on Custom Glow Color the colour of the neon effect will stay the same regardless of the colour choice customers make.

Pricing

The price can be added to any option except Font family categories. Additionally, you can add price per character in the text input.

If your pricing is more complicated, please check the Calculate fields category.