Text box

Text boxes let you add text to your designs, whether it's fixed text or something shoppers can personalize. The text box defines the boundaries where text can appear, not the size of the text itself. On the canvas, it's represented by a dashed line around the text.

You can customize the font, size, color, alignment, and styling to control how the text looks.

How It Works

When you add a text box to your design, it's personalizable by default.

• Shoppers see a text input where they can enter their own text.

• As they type, their text appears live in the product preview.

• If you offer multiple fonts or colors, shoppers can choose between them.

• You can make the text movable so shoppers can reposition or resize the text within the area you define.

• You can also make the text fixed, so it appears in the design without being editable by shoppers.

How to add a text box

1. Open your Design or Template in the Design Studio.

2. Click Text Box to add a new element.

Each text box has a name you can edit and a unique ID to help you identify it.

Make text fixed or personalizable

By default, every text element you add is personalizable, meaning shoppers can change its content when customizing a product.

If you want to display fixed text that shoppers cannot edit, you can disable personalization for that element.

To make a text element fixed:

1. Select the text element.

2. Find the Personalizable setting.

3. Disable Personalizable Text.

To make the text personalizable again, simply enable the setting.

How to move, resize and transform the text box

You can move, resize, and rotate a text box directly on the canvas.

When you select a text box, a quick-action toolbar appears below it, with shortcuts to duplicate, delete, align, and distribute elements.

For more precise adjustments, expand the Transform toolbox. Use these controls to adjust the text box's position, rotation, size, skew, flip, and layer order.

For detailed instructions on each transformation, see 📄 Transforming an element.

How to style and format the text

Select the text element and expand the Character toolbox to customize its font, size, alignment, spacing, and other formatting options.

Font Option

You can apply one or multiple fonts to a text element.

1. Select the text element

2. Expand the Character toolbox

3. Click to expand the Select a Font list

4. Select a font from the list

New accounts will just have a couple fonts available. You can easily add as many fonts as you want to your font list.

To learn how to add your own fonts see 📄 Upload custom fonts

Tip

You can add multiple font options to a text element by using a Font Library or clicking + Add font option to select additional fonts.

For detailed instructions, see 📄 Text with multiple font options.

Font Size

Text boxes in Customily have a font size range, meaning you can set a minimum and a maximum font size. This is to allow text to resize when shoppers type something super long (making the text smaller to fit more characters).

We recommend using the Max Size as the size that you want. The Min Size will be the limit of the resizing, to ensure that small texts still look good and are printable, leaving the value that comes by default is a great choice. If you don't want the text to be able to resize at all, you should use the same value on both.

To change the font size:

1. Select the text element

2. Expand the Character toolbox

3. Enter the Max font size in points (pt). You can also set a Min font size if needed.

If the selected font size is too large to fit within the text box, the value will turn red and a warning will appear, indicating that you need to reduce the size.

Alignment

You can align a text inside the textbox horizontally and vertically. 

• Horizontally: Left, Center, Right, Justified

• Vertically: Top, Center, Bottom

1. Select the text element

2. Expand the Character toolbox

3. Select from the dropdown the Horizontal Alignment and the Vertical Alignment.

Tracking and Line Spacing

You can adjust the tracking (character spacing) and/or leading (line spacing) of your text by inputting the values. Both tracking and leading are expressed in %.

1. Select the text element

2. Expand the Character toolbox

3. Enter a value for Tracking or Line Spacing

Automatic Multiline

When a text box has enough height to fit multiple lines, it is multi-line by default. However, in order to jump to the next line, shoppers will have to hit Enter (return). If you want the text to jump to the next line automatically, then you should activate Automatic Multiline. This way, when the text hits the boundaries, a breakpoint will be added automatically.

So for long texts, they will automatically continue to the next line without the shopper having to press the Enter key.

1. Select the text element

2. Expand the Character toolbox

3. Enable Automatic Multiline

All Caps

By checking All Caps, you'll force whatever text the shopper types into capital letters.

1. Select the text element

2. Expand the Character toolbox

3. Enable All Caps

Vertical Text

By checking Vertical Text, you'll change the text direction.

1. Select the text element

2. Expand the Character toolbox

3. Enable Vertical Text

How to apply color, outlines, and textures

Select the text element and expand the Color toolbox to customize its fill color, stroke, and patterns or textures.

Fill Color

You can apply one or multiple fill colors to a text element. You can assign colors by Hex value, RGB-A, CMYK-A, or by using a color picker. The color chart will change from RGB-A to CMYK-A, according to the color mode of your workspace. The A stands for Alpha, which means you can also add transparency to your text colors!

When setting the fill, you can now choose between different coloring styles:

Solid

Apply a single color to the entire text.

Gradient

Blend two or more colors smoothly across the text.

Alternating colors

Apply different colors to letters in a repeating sequence.

To change the fill color:

1. Select the text box.

2. Expand the Color toolbox.

3. Click the color swatch or pencil icon to open the color editor.

4. Choose a coloring style: Solid, Gradient, or Alternating.

5. Select a color using the color picker, or enter a HEX, RGB-A, or CMYK-A value (depending on your design's color mode).

6. Click Apply.

Tip

You can add multiple color options to a text element by using a Color Library or clicking +Add color option to select additional colors.

For detailed instructions, see 📄 Text with multiple color options

Stroke

You can apply a colored stroke to the text element, this can be a different color from the fill color. The stroke will apply to the text always, so if you have multiple font options and multiple color options, the stroke will apply to all of them.

To add a stroke:

1. Select the text element.

2. Expand the Color toolbox.

3. Under Stroke, click Add Stroke.

4. Adjust the stroke width and choose its color. You can add multiple colors if needed.

Tip

You can add multiple color options to the stroke by using a Color Library or clicking +Add color option to select additional colors.

For detailed instructions, see 📄 Text with multiple color options

Textures

You can enhance your text with textures, giving it unique visual effects like metallic finishes, watercolor fills, glitter, or fabric looks.

To apply a texture:

1. Select the text element

2. Expand the Color toolbox

3. Choose a pre-defined pattern from the Customily library, or upload your own image.

4. Adjust the scale of the pattern to control how it appears within the letters.

Tip

If you use a transparent PNG as your texture, the selected text color will show through behind the pattern. This is great for effects like metallic foil, brushed metal, or glitter. Customily comes with several patterns ready to use as textures. 

How to apply a shadow

You can add a shadow to a text element to create depth, contrast, or a soft glow effect.

Choose between two shadow styles:

• Solid shadow: Creates a sharp, defined shadow behind the text.

• Blurred shadow: Creates a softer shadow with adjustable blur, which can also be used to create a glow effect.

To apply a shadow:

1. Select the text element.

2. Expand the Shadow toolbox.

3. Choose between a solid or blurred shadow.

4. Click the color swatch to select the shadow color.

5. Adjust the Offset and Angle to position the shadow.

6. If using a blurred shadow, adjust the Blur slider to control its softness.

To remove a shadow, click the currently selected shadow style again to deselect it.

Tip

You can add multiple color options to the shadow by using a Color Library or clicking +Add color option to select additional colors.

For detailed instructions, see 📄 Text with multiple color options

Advanced text settings

Select the text element and expand the Advanced toolbox to configure additional text behaviors, including fixed words and symbols, text masks, cutouts, and date formatting.

Add fixed words and symbols

Use these settings to add text or symbols that appear automatically alongside the text entered by the shopper. These additions stay fixed and cannot be edited by the shopper.

• Prefix

  Adds text or symbols before the personalized text. For example, entering Est. displays Est. 1985 when the shopper enters "1985".

• Suffix

  Adds text or symbols after the personalized text. For example, entering Family displays Johnson Family when the shopper enters "Johnson".

• Between Characters

  Adds a character or symbol between each letter. For example, entering · displays J·O·H·N instead of "JOHN".

• Between Words

  Adds a character or symbol between words. For example, entering ♥ displays John ♥ Smith instead of "John Smith".

To add fixed words or symbols:

1. Select the text element

2. Expand the Advanced toolbox

3. Enter the text or symbol in the corresponding field.

Allow Movable Text

Enable Allow moving text to let shoppers move and resize their personalized text within a defined area. This is useful when you want to give shoppers more freedom to position their text.

To allow moving text:

1. Select the text element

2. Expand the Advanced toolbox

3. Enable Allow moving text.

4. The text box will turn red, indicating the area where shoppers can move their text.

The text's current position will be its initial position in the preview. You can change this using the Adjust Text Position button.

Text Autofill

Use Autofilled to automatically populate a text element with an order number or file name.

This is useful when you want to include order-specific information in your production file without requiring shoppers to enter it themselves. Autofilled text appears only in the print file. Shoppers cannot see or edit it during customization.

To enable Autofilled:

1. Select the text element.

2. Expand the Advanced toolbox.

3. Enable Autofilled.

4. Under Autofilled Values, select Order Number or File Name.

Use text as mask

Use this setting to fill text with an image placed behind it. The image will only be visible inside the letters, creating effects such as photo-filled names or messages.

To use text as a mask:

1. Add an image layer beneath the text layer. This can be an image upload or a dynamic image.

2. Select the text element.

3. Expand the Advanced toolbox.

4. Enable Use as Mask.

Text layers used as masks are identified by a mask icon in the Layers panel.

Images being masked also have their own indicator.

Use text as a cutout

Use Use as Cutout to remove the shape of the text from an image or element behind it, creating a transparent area in the shape of the letters.

This is especially useful for creating cutout products, such as personalized metal signs, where the letters need to be cut out of the material.

Unlike Use as Mask, which displays an image inside the text, Use as Cutout creates a transparent opening where the text appears.

To use text as a cutout:

1. Add the text element over the image or element you want to cut out.

2. Select the text element.

3. Expand the Advanced toolbox.

4. Enable Use as Cutout.

Text layers used as masks are identified by a cutout icon in the Layers panel.

Images being cut also have their own indicator.

Date format

Use Date format to choose how a shopper's selected date appears in a text box.

This setting is used when a Date Picker option is connected to a text element, allowing shoppers to personalize products with dates such as birthdays, anniversaries, or other special occasions.

To set the date format:

1. Select the text element connected to the Date Picker.

2. Expand the Advanced toolbox.

3. Enter your preferred format in the Date format field.

To learn how to connect a Date Picker to a text element, see 📄 Date Picker

How to create a repeating text pattern

Use the Pattern toolbox to repeat a text element across your design. This is useful for creating repeating names, words, or decorative text patterns.

To create a pattern

1. Select the text element you want to repeat.

2. Expand the Pattern toolbox.

3. Click Create Pattern from Element.

4. Adjust the pattern using the available settings:

   • Spacing – Horizontal and Vertical: Control the distance between repeated elements.

   • Offset – Horizontal and Vertical: Adjust the positioning of the repeated elements.

5. Click Refresh to Fill Page to regenerate the pattern after making changes to the original element, such as resizing it.

To edit or remove a pattern

Creating a pattern generates multiple duplicated elements, each on its own layer. These duplicates are permanently locked and cannot be unlocked or edited individually.

All duplicates remain linked to the original text element. Any changes you make to the original, including its text, styling, or position, also apply to the duplicates.

Moving the original element moves the entire pattern. Clicking Refresh to Fill Page regenerates the pattern and returns the original element to the center of the page.

To remove the pattern, click Remove in the Pattern toolbox. This deletes all duplicated elements while keeping the original text element intact.

Test how the shopper experience will look

While configuring your text box, enter sample text in Type to try the text box to see how it looks in your design.

This text is only for testing. It won't be saved or visible to your shoppers unless Personalizable text is disabled.