Text to shape

Text to Shape lets you add text inside a shape, automatically arranging the words to follow its boundaries. Unlike a regular text box, the text adapts to the shape, creating layouts that can be difficult to achieve with standard text alignment.

You can customize the font, size, color, alignment, and styling to control how the text looks. You can also adjust the shape itself, changing its size and form to create different text arrangements.

How It Works

When you add a text to shape 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 contained inside the defined shape.

• If you offer multiple shapes, shoppers can choose between them, and the text will automatically adjust to fit their selection.

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

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

How to add a text to shape

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

2. Click Text To Shape to add a new element.

Each text to shape 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 to shape 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 to shape

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

When you select a text to shape, 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.

Choose a shape for your text

The shape defines the area where your text will appear. As you change the shape, the text automatically adjusts to fit its boundaries.

When you select the Text to Shape element, the shape appears in light purple on the canvas. This is only a visual guide to help you edit the text and shape. It won't appear in your final design and disappears when you deselect the element.

To add or change a shape

1. Select the Text to Shape element.

2. Expand the Shape toolbox.

3. Choose how to add your shapes:

   • + Add shape option: Select a predefined shape from Customily, choose a previously uploaded shape, or upload your own.

   • Image Library: Select shapes from an existing Image Library.

   • Vector Library: Select shapes from an existing Vector Library.

4. Select your shapes and confirm your selection.

You can add multiple shapes to the same element, allowing shoppers to choose between them when personalizing their product.

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 to shape 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 shape, 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 and line breaks

Automatic Multiline is always enabled for Text to Shape and cannot be disabled. This allows the text to wrap automatically onto multiple lines to follow and fill the shape.

You can also enable Ignore Line Breaks to ignore line breaks entered by shoppers. This keeps the text flowing naturally within the shape, even if a shopper presses Enter, helping maintain a more consistent layout.

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

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 shape to text.

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.

Test how the shopper experience will look

While configuring your text to shape, 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.