> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.customall.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Text Layer Configuration in Artwork


# Add New Text Layer

To add a text to your artwork, click on the **Add** **text** button.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/8/3/6/a836ece0c4805800/image_aubdyg.png)

If you import artwork from a PSD file, Customall will consider text layers as image layers. You need to **Right click** on the image layer, then select **Convert To Text**
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_vos5gc.png)
After adding a new text layer:
* Area 1: It is a preview of the text
* Area 2: They are formats for text like familiar applications (word, excel…).
* Area 3: It is the area to set for text: value and personalized parts

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_8k6g01.png)
# Text Layer Management

Name the text to remember its content. To change the layer's name, click on the pencil icon or double-click on the layer’s name in the left panel.

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_im4c7r.png)
To duplicate, hide, or delete the text layer, just **Right click** on the layer and select your desired action.

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_12yr7yh.png)
# Text Features

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_x7o8ay.png)
1. **Text Font**

To choose a font, click **Select font** and find the font name in the **Custom** section. If the desired font is not available, upload new fonts by clicking **Upload font** and selecting the file to add.
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_1hu4bot.png)
||| If you do not select a font in the artwork, the text will not be displayed on the storefront.

2. **Text Font Size**

When **Auto resize to fit container** is selected, the text font size cannot be adjusted.

3. **Text Alignment (Left/ Center/ Right)**

Click alignment icon number 3 to choose text alignment: Left, Center, or Right.
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_1dis08h.png)
4. **Text Alignment (Top/ Middle/ Bottom)**

Click alignment icon number 4 to choose text alignment: Top, Middle, or Bottom.
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_1adx1op.png)
5. **Text Spacing & Line Height**

Letter: the width of text spacing.
Line Height: the space between lines of text in a paragraph
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_clt5g.png)
6. **Text Color**

Change the default text color by inputting a hexadecimal color code.
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_1xbdzqe.png)
7. **Text Curving**

To create curved text, adjust the curvature using the **Radius** setting, and modify the text size using feature number 2 ( **Text font size**). 

|| The smaller the radius, the more curved the text becomes.
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_1my22f4.png)
|| Currently, curved text cannot be combined with gradient, pattern, or alignment features.

8. **Text Pattern**

To add a text pattern, click **Upload** in the **Pattern** section, then select a photo to add. Adjust the photo's display mode using **Scale**. 

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_lbirwa.png)
|| The maximum file size is 1MB.

9. **Change Case**

Through this setting, you can select the display style for your customer's text: Default (Normal), UPPERCASE, or lowercase.
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_1e4wxyf.png)
10. **Text Stroke**

After enabling this feature, you can select the border color, adjust border thickness, and choose inside or outside border mode.
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_rr5kau.png)
e.g., the word "Customall" in red with a black stroke.
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_rhiqgx.png)
11. **Text Shadow**

You can select the shadow color, opacity, and adjust the drop shadow position.

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_7lb9bq.png)
e.g., the word "Customall" in red with a black shadow.
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_at6jn6.png)
12. **Text Gradient**

After activating this feature, you can select the mode and the color for the text gradient.

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_1xtk2im.png)
![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_yc59bg.png)
13. **Text Position**

In the text position section, you can move the selected layer forward or backward another layer.

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_11bx6cg.png)

14. ** Text Align**

Click **Align** to adjust the text placement to the top, middle, bottom, left, center, or right of the screen.

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_1me2prb.png)

15. ** Text Transform**

Click **Transform** to modify the text box size (width, height, left, top) , text rotation and text skew. 

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_1vvb4io.png)

# Text Layer Settings

**Auto resize to fit container**: The text size will automatically adjust to fit the text box size, meaning that the text size changes when the text box size changes.

**Allow personalized**: Check to allow customers to make custom changes to the text. Uncheck it if you do not want to offer customizable text to customers.

**Use texarea**: Allows customers to create line breaks by pressing Enter for multi-line text.

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_5b8qm5.png)

**Enable initial value**: The value appears in the text box when customers click on the product link. They can delete this value and enter their desired content.

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_d7ib9z.png)

**Enable prefix**: Set a fixed word or character before personalized text. 
Eg. Est. 2020, Est. 2019, etc. (the word "Est." is fixed)

**Enable suffix**: Set a fixed word or character after personalized text. 
Eg. Grandma's Garden, Nana's Garden, etc. (the phrase " 's Garden" is fixed)

|| Customers cannot delete these characters.

**Enable max size**: Set the maximum font size. When reached, the text automatically shrinks to fit the text box.

**Enable auto line break**: Activate multi-line text. Upon selection, specify the minimum font size. When the text reaches this minimum size, it wraps to the next line.

|| Customers are unable to freely enter text down the line as they wish.
|| The minimum font size must be smaller than the maximum font size.

**Depend on another layer**: Enable text layers to be dependent on other text layer, ensuring identical attributes. 
e.g., layer B depends on Layer A, entering text characters on Layer A will result in the same characters appearing on Layer B.

**Label**: Show the heading name of the text field on the storefront.
e.g., Grandma's Name, Enter Year, etc.

**Help text**: The content displayed when additional captions are needed for the text.
e.g., Please use standard English only and exclude emojis.

**Placeholder**: Temporary text displays in the input field until an action is taken.
e.g., Type here, etc.

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_r8q1a5.png)

**Is required**: Tick this option if placing an order requires filling in this field.

**Is numberic**: Tick the checkbox if only numbers are allowed in the text box.

**Min length - Max length**: Limit the number of characters customers can input, preventing text from becoming too small when entering many characters.

| Min length can either be 1 character or left blank.

**Allow buyers to change text color**
* *"Select color" label:* Displays the title for the color selection field on your storefront.
* *"Select color" help text:* Additional explanations displayed when needed.
* *Add color suggestion list:* Click the **plus (+)** button to add colors you want to suggest to buyers on your storefront.

  ![](https://storage.crisp.chat/users/helpdesk/website/-/a/8/3/6/a836ece0c4805800/image_wz99g.png)

To remove a color, click the **X** icon. To change the order of colors, use the **move** icon to drag and reorder them.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/8/3/6/a836ece0c4805800/image_1vgz94g.png)

This is how the color selection will be displayed to customers on your storefront.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/8/3/6/a836ece0c4805800/image_frvfvy.png)

|| When using the "Depend on another layer" feature, please make sure to check the "Sync font & color from root layer" box. This ensures that the dependent layer inherits the correct color settings, so the preview and print file display accurately.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/8/3/6/a836ece0c4805800/image_1w42emm.png)

**Allow buyers to change text font**
* *"Select font" label*: Displays the title for the font selection field on your storefront.
* *"Select font" help text*: Additional explanations displayed when needed.
* *Font collection:* Select the fonts you want to make available for your customers. You can also upload new fonts by clicking **Add font**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/8/3/6/a836ece0c4805800/image_lbxvnb.png)

To ensure all fonts are displayed correctly and look great, click on **Test** font before your save. Select the font you want to check.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/8/3/6/a836ece0c4805800/image_ye7ody.png)

It will appear on the storefront like this. Please double-check to ensure everything looks perfect.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/8/3/6/a836ece0c4805800/image_tepuxx.png)

|| When using the "Depend on another layer" feature, please make sure to check the "Sync font & color from root layer" box. This ensures that the dependent layer inherits the correct font settings, so the preview and print file display accurately.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/8/3/6/a836ece0c4805800/image_16vv30j.png)

**Apply to all template**: Allow text layer settings and text features from one template to be applied to others that share the same layer ID within the artwork.

![](https://storage.crisp.chat/users/helpdesk/website/a836ece0c4805800/image_1chhver.png)

# Text Advanced Settings

For detailed instruction, read this article: [Advanced Settings in Artwork](/en/article/advanced-settings-in-artwork-1ujh5op/)