Text Boxes are places where customers can type their own custom text. The box sets the boundaries where text can be typed, and is represented on the canvas by a dashed line around the text. You can format texts in many ways to give customers further options.

How It Works

When you add a Text element to your design:

  • Shoppers will see a text input to type custom text.

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

  • You control the font, size, color, alignment, and styling.

  • If multiple font or color options are added, shoppers will see options to pick from them.
  • If Movable Text is enabled, shoppers can also reposition or resize the text within the area you define.


In this article:

To add a text box

You can add text boxes on Designs and on Templates, by clicking the Text Box button.

add text box.png

Each text box that you add will have a Name that you can edit, and a Unique Id for you to easily identify it. 

How to move, resize and transform the text box

Directly on the canvas or by expanding the Transform toolbox, you can transform the text box:

transform text box.png

How to style and format the text

After selecting the element, expand the Character toolbox to format the text inside the text box. Click on each item to learn more:

text character.png

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. Pick a font from the list

2025-06-04 13.50.57.gif

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

Learn how to add fonts into Customily here.

Tip

You can add multiple font options to a text element. To add more than one font option you can either use a font library or assign multiple font options by clicking + Add font option and choosing a new font.

add font option.png
You can see a step-by-step guide on how to do that here.

 

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 customers type something super long (making the text smaller to fit more characters).
2025-06-04 13.55.45.gif

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.

  1. Select the text element
  2. Expand the Character toolbox
  3. Type in the Max (and Min if desired) font size in points (pts)

text size.png

Tip

To preview how the Min or Max font size will look on your design you can click the next to them.

If the sizes you choose are too big for the text box, the size will paint red and you will see a warning letting you know that the font size should be smaller to fit within your text box boundaries.

text too small.png

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.

2025-06-05 09.35.29.gif

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. Type in a value you want for Tracking or Line Spacing.

2025-06-05 09.38.19.gif

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, customers 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 customer having to press the Enter key.

  1. Select the text element
  2. Expand the Character toolbox
  3. Click the Automatic Multiline checkbox

2025-06-05 09.40.53.gif

Keep in mind

If you have a Min and Max font size setup, when reaching the boundaries the text will first resize until it reaches the Min font size. Then it will jump to the next line automatically.

All Caps

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

  1. Select the text element
  2. Expand the Character toolbox
  3. Click the All caps checkbox

2025-06-05 09.42.21.gif

Vertical Text

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

  1. Select the text element
  2. Expand the Character toolbox
  3. Click the Vertical Text checkbox

2025-06-04 14.00.22.gif

How to apply color, outlines, and textures

After selecting the element, expand the Color toolbox to add color options to the text inside the text box. Click on each item to learn more:

color text.png

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!

  1. Select the text element
  2. Expand the Color toolbox
  3. Click the color swatch or the pencil to select a color. Using the swatch you can add colors with Hex, RGB-A, or CMYK-A values (the last 2 depend on the color mode of your design). You can also use the color picker to choose a color from your screen. If you want to add transparency, just slide the Alpha control on the bottom of the chart.
  4. Click Apply

2025-06-04 14.04.33.gif

Tip

You can add multiple color options to a text element. To add more than one color option you can either use a color library or assign multiple color options by clicking Add color option and choosing a new color.

add color option.png
You can see a step-by-step guide on how to do that here.

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.

  1. Select the text element
  2. Expand the Color toolbox
  3. Set the Stroke width
  4. Click the color swatch to select a color for the stroke. 

2025-06-04 14.09.05.gif

Tip

You can add multiple color options to the stroke. They will be independent from the text fill color options if you have them. To add more than one color option you can either use a color library or assign multiple color options by clicking Add color option and choosing a new color.

stroke color option.png
You can see a step-by-step guide on how to do that here.

Patterns and Textures

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

  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.

2025-06-04 14.14.45.gif

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 gold foil, brushed metal, or neon glow. Customily comes with several patterns ready to use as textures. 
Metallic foil.png

Advanced text settings

Inside the Advanced toolbox, you’ll find a few extra options that can help you fine-tune the behavior of your text boxes. Some of the advanced features are only available when creating templates manually, and not when creating designs. Click on each item to learn more:

*these advanced settings are only available when creating templates manually, and not when creating designs.

advanced text.png

Prefix and Suffix

Prefix and Suffix to your text are fixed texts that will be visible when customers start adding their custom text.

  • Prefix: a fixed text will be added before the custom text
  • Suffix: a fixed text will be added after the custom text

To add a Prefix or Suffix

  1. Select the text element
  2. Expand the Advanced toolbox
  3. Type in your Prefix and/or Suffix

2025-06-04 14.28.59.gif

Allow Movable Text

Enabling this option allows customers to move and resize the text inside the defined area. This is useful when you want to give shoppers more freedom in adjusting the layout—like repositioning a name within a frame or shifting a message around a photo.

To allow Movable Text

  1. Select the text element
  2. Expand the Advanced toolbox
  3. Check Allow moving text
  4. The text box will become red, indicating the area of movement. 

2025-06-04 16.13.20.gif

Tip

When this option is enabled, the texts bounding box will become the area of movement. Customers will be able to click and drag the text to change its position within that area. If you want to make the area bigger, just resize the text box on the canvas or with the tool box. To test it out, double click the textbox to move the text around.
If disabled, the text will stay locked in the position you define.

Use text as mask

This setting turns your text into a mask, letting it cut through the image or element placed behind it. It’s commonly used to create photo-filled text effects—like showing a shopper uploaded image through the letters.

To use a text as a mask

  1. Make sure you have an image layer below the text layer (this could be an image upload, or dynamic image)
  2. Select the text element
  3. Expand the Advanced toolbox
  4. Check 'Use as Mask'
  5. The image layer beneath the text will be masked to fit within the text outline, creating a seamless, one-of-a-kind design!

2025-06-04 16.21.02.gif

Text working as a mask will be marked on the layer panel with and images being masked will be marked with

Text Autofill

The Autofill feature allows you to automatically insert dynamic order information—such as the Order Number or File Name—directly into the print file. This is particularly useful for:

  • Tracking: Easily identify and organize print files during the fulfillment process.

  • Labeling: Include order-specific details on products or packaging.

To set up Autofilled Values

  1. Select the text element
  2. Expand the Advanced toolbox
  3. Check 'Autofilled'
  4. From the dropdown menu, select the value you want to insert:

    • Order Number

    • File Name

  5. Optionally, you can add a Prefix or Suffix to include additional text before or after the autofilled value (e.g., "Order: 12345").

2025-06-04 16.33.16.gif

Tip

The autofilled text will appear in the print file but is not visible to customers during the customization process. They won't be able to edit this text.

Test how the shopper experience will look

At any moment while configuring your text box, you can test how it will look on your design, by typing on the spot that reads Type to try the text box.

This is just for you to test, whatever you type there won't be saved, and won't be visible to your customers ever.

Testing text.png

Tip

If you type text and you don't see anything, go check your font size! It is because your font is too big for the size of your textbox, so the text doesn't fit. You can also resize the text box and make your textbox taller until you start seeing the text.

Share

Was this article helpful?

2 out of 7 found this helpful
Have more questions? Submit a request