Warped text

Warped text lets you add text that fits into a specific shape, whether it's fixed text or something shoppers can personalize. You define the shape, and the text automatically adjusts to fit within it.

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

How it works

When you add warped text 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 automatically adjusts to fit the shape in the product preview.

• 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 warped text

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

2. Click Warped Text to add a new element.

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

Make text fixed or personalizable

By default, every warped text 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 warped text fixed:

1. Select the warped text.

2. Find the Personalizable setting.

3. Disable Personalizable.

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

How to edit the warp shape

You can choose from predefined warp shapes or create your own by adjusting the shape directly on the canvas.

Choose a warp shape

1. Select the warped text element.

2. Choose one of the predefined warp shapes in the side panel to apply it to your text.

Create a custom warp shape

1. Select the warped text element.

2. Click the pencil icon to enter warp editing mode.

You'll see the shape's outline with draggable nodes and handles. You can:

• Drag the nodes to change the shape of the text.

• Adjust the handles to control the curvature between nodes.

  

You can use these controls to create arches, waves, curves, or any custom shape.

How to move, resize, and transform the warped text

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

When you select a warped text, 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 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, and other formatting options.

Font Option

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

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

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

How to apply color and outlines

Select the warped text and expand the Color toolbox to customize its fill color and stroke.

Fill Color

You can apply one or multiple fill colors to a warped text. 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.

To change the fill color:

1. Select the text on a path.

2. Expand the Color toolbox.

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

4. Choose a coloring style: Solid or Gradient.

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 📄 Add multiple color options to text

Stroke

You can apply a colored stroke to the warped text, 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 warped text.

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 📄 Add multiple color options to text

Advanced text settings

Select the text element and expand the Advanced toolbox to configure additional text behaviors such as adding fixed words and symbols.

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 custom text will look

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