Building Product: Neon Sign Builder

1. Let's begin with uploading an image that will serve as a background for the sign. 

2. Create the first custom option. We will use an "Input field" - "Text area" option type. 

Put down the text that will be displayed to the customers and click the edit button next to the choice to open extended settings of the input field.

Additional settings will let you set the minimal and maximal number of characters, charge per character etc.

3. The next option will let customers select the font size. To create a size selector, please choose the "Font Selector" - "Font Size" option type.

Put down the choice title and set the minimal and maximal available font size.

4. Another option will be the font selector. Create the corresponding option in the app.

Please refer to the following article to learn how to add custom fonts in the default font list: Fonts management

5. Now let's create a color palette. We need the "Single Choice" - "Color Thumbnails" option type. 

Click on the choice thumbnail to add a color, and give the choice a name. 

Here's what we have so far:

6. Now we need to connect the options to a custom text layer. To do this, please go to the "Layers" panel and create a new layer. 

7. Select the "Single Text" layer type.

Name the layer and add a default text which will be displayed on the preview when the product page is open. You can move the layer on the preview and set the position you need. 

8. Go to the "Settings" panel to connect the options that have been previously created to the layer. More detailed examples of how you can set up the layer are shown on the screenshots below:

9. Once all the options are connected, don't forget to apply the settings of the layer and save the product. 

Here's how it looks with the admin mode turned off: 

If you would like to have several limited size options instead of a quantity box where a customer can put down any number, you can create a "Single Choice" - "Text Buttons" option. E.g. you have only 3 sizes to choose from - "Small", "Medium" and "Large". Create the corresponding choices as shown below.

In the "Value" field, put down the necessary font size.

Then connect this option instead of the previous one as the font size source for the text layer.

As you can see, we now have only 3 sizes available.

10. To make sure that some text is displayed by default, set up some default choices in the settings (on the top panel in the app) as shown below. This will pre-select a font color and a font size when the page is open. 

Here's how the final result should look on the storefront:

If you still have any questions, please feel free to reach out to us via [e-mail]