When Customers type in a text field, the app will automatically display Cliparts based on each character they enter. Each character is matched with a corresponding image from the selected Clipart category.

Continue reading this Article to learn more about setting up this feature on your Store.

Which Method Should You Use?

• Manual Placement — in the artwork setup process, you place each character individually, anywhere on the artwork. Best when letters don't follow a straight line or need individual positioning.

• Auto Placement — in the artwork setup proces, you set up one block of text, and it scales automatically to fit whatever the customer types.

Use these links to quickly jump to your desired sections:
Option A: Manual Placement
Option B: Auto Placement

Prepare Your Clipart Assets

You can prepare your Cliparts as either a single Clipart Category, or a Group of Clipart Categories. Both Manual Placement and Auto Placement can use either type.

Option 1: A single Clipart Category

• Please navigate to your Assets > Clipart Categories > and create a new folder there

• After uploading your Cliparts, it is crucial to name each image according to the letter or number it represents.

Option 2: A Group of Clipart Categories

• In Teeinblue Portal > Assets > Clipart Categories, create a Group of Clipart Categories. Inside the group, create one sub-category for each supported character, such as A, B, or C.

• Name each sub-category exactly after the character it represents, then add the Cliparts customers can choose for that character. When a customer types a matching character, Teeinblue shows that sub-category's Cliparts and the customer selects one Clipart for the character.

Option A: Manual Placement

Create the Artwork

In this example, we will demonstrate an ornament product that allows customers to enter their names. Each letter of the name will be represented by a matching ornament clipart.

• First, create a Single-line Text layer to allow customers to enter their name.

• Since this Single-line Text layer is used only to collect input data, we offer a display setting for it. You can choose not to display the layer in the Gallery, but still show it in the Customization Form so that customers can enter their name.

• To avoid the Customers from inputting un-supported characters, you can use the Custom Rule feature:

• To create the Dynamic Clipart by Text layer, click on the +Layer button, then select Dynamic Clipart by Text > Manual Placement

• In Teeinblue Portal > Artworks, open the Artwork, select the Dynamic Clipart by Text layer, then choose the Custom Text layer as the source text option.

• In Value to populate, click + Add variable, then choose the variable that matches your setup:
• {{charX}}: returns the character at position X in the value entered by the customer. For example, use {{char1}} for the first character and {{char2}} for the second.
• {{value}}: returns the full value entered in the Text layer. Manual Placement uses the entire value to find one Clipart with the same name. For example, the value 24 displays the Clipart named 24.

• In Teeinblue Portal > Artworks > open the Artwork > select the Dynamic Clipart by Text layer > Dynamic clipart source, choose 1 Clipart category and select one category, or choose 1 Group Clipart category and select a group. When using a group, set Option Title for the Clipart option shown to customers. You can use {{character}} in the title; it is replaced by the matched sub-category name.

• Continue to do so with other letters:

Notes

• Since this option is image-based, you will not be able to change the font size, font family, or letter spacing. You will need to adjust the images directly in your Artwork Editor to ensure everything is displayed correctly and looks well-aligned.
• Customers may enter names with different numbers of characters. We recommend creating separate templates for different name lengths so you can easily adjust the display of each letter.

Option B: Auto Placement

Create the Artwork

• First, create a custom text layer to allow customers to enter their name, the exactly the same way as in Option A.
• To create the Dynamic Clipart by Text layer, click on the +Layer button, then select Dynamic Clipart by Text > Auto Placement

• Draw the Frame on your canvas by dragging and dropping it to set its width, height, and position. This frame is the area your cliparts will be laid out inside.

• Open the Design Settings section (shown at the top of the layer panel) and configure:

Direction

Whether cliparts are laid out in a row (Horizontal) or a column (Vertical).

Gaps
Adjust the spacing between each Clipart as a percentage of the Clipart's own size

Alignment (on the top toolbar)

Where the cliparts sit within the frame. The available options depend on Direction:

1. Horizontal: Left / Center / Right
2. Vertical: Top / Middle / Bottom

• In Teeinblue Portal > Artworks > open the Artwork > select the Dynamic Clipart by Text layer > Dynamic clipart source, select 1 Group Clipart category, choose your group, and set Option Title. {{character}} is replaced by the matched sub-category name.

• Since this type of layer can populate the value from the whole custom text, please select the Custom Text Layer as its source Layer

Creating the Campaign

Once you're happy with your settings, be sure to launch it to your Storefront!

Updated on: 14/09/2026