> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.teeinblue.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Dynamic Clipart by Text 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/tib-gif_1ylvs8f.gif) 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/fixed-placement_2lgelv.gif) * **Auto Placement** — in the artwork setup proces, you set up one block of text, and it scales automatically to fit whatever the customer types. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/dynamicscaling_17prdjq.gif) | Both methods can use either **1 Clipart Category** or **1 Group of Clipart Categories** — the method you choose doesn't limit which Clipart setup you use. **Use these links to quickly jump to your desired sections:** [Option A: Manual Placement](#1-option-a-manual-placement) [Option B: Auto Placement](#1-option-b-auto-placement) --- # Prepare Your Clipart Assets | Before setting up either Manual Placement or Auto Placement, prepare and upload the Cliparts you plan to use. Name each Clipart to match either an individual character or a complete text value, depending on your setup. This step is **essential** for the feature to work correctly. 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** ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/monosnap-image-2025-10-30-11-5_10jkt1z.png) * After uploading your Cliparts, **it is crucial to name each image according to the letter or number it represents.** || The feature matches Cliparts by name, so the image name must exactly correspond to the character entered by the customer. Incorrect or missing names will prevent the images from displaying properly. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/monosnap-image-2025-10-30-11-4_1992yug.png) ##### 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`. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/monosnap-teeinblue-portal-2026_16v3y51.png) * 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. | Matching is **case-sensitive** in both options — `A` and `a` are treated as different characters, so make sure you've uploaded both cases if your customers may enter either. | The **1 Group Clipart category** source is available only in **Artwork 2.0**. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/monosnap-xmas-plate-kienstagin_1ofgjsz.png) --- # 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. | The Dynamic Image by Text feature is based on the `Auto-populate values from other options` functionality. This means the Custom Text layer is required as a source layer. The clipart layers will populate data from this text layer so that each character entered by the customer displays the correct image. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/screenshot-2026-08-27-154424_hhbold.png) * 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. | This keeps the text layer hidden from the product preview while still serving as the source for the Dynamic Image by Text feature. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/tmp_rhkovc.png) * To avoid the Customers from inputting un-supported characters, you can use the [Custom Rule](https://support.teeinblue.com/en/article/how-to-stop-your-customers-from-entering-unwanted-text-ck9kg4/) feature: ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/image_1uj6s1q.png) * To create the Dynamic Clipart by Text layer, click on the `+Layer` button, then select `Dynamic Clipart by Text` > `Manual Placement` ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/monosnap-teeinblue-portal-2026_1gyy7q9.png) * 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/screenshot-2026-08-27-155946_1kymotp.png) * 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`. | Matching with `{{value}}` must be exact. The matching Clipart is displayed as a single Clipart. If no Clipart name matches the full value, no Clipart is displayed. * 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/monosnap-image-2025-10-30-12-1_1qdmztg.png) * Continue to do so with other letters: ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/download-1_100vq4y.png) || Be sure to set their `Value to populate` correctly! ##### 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/download-2_13h2njs.png) --- # Option B: Auto Placement | **Auto Placement** is the faster option: instead of creating and positioning an image layer for every letter, you set up a single frame (row or column) and the app automatically arranges and scales the Cliparts to fit — no matter how long the customer's input is. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/dynamicscaling_bqf1gn.gif) ## 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` ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/monosnap-teeinblue-portal-2026_kxnn2t.png) * 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/image_1mlk06v.png) * 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 | Every clipart keeps its own aspect ratio and shrinks or grows to fit inside the frame — nothing is stretched or squashed. ###### Alignment (on the top toolbar) ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/image_8lbka9.png) 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/monosnap-teeinblue-portal-2026_1m3nodp.png) * Since this type of layer can populate the value from the whole custom text, please select the Custom Text Layer as its source Layer ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/monosnap-teeinblue-portal-2026_1lxaj5f.png) --- # Creating the Campaign Once you're happy with your settings, be sure to launch it to your Storefront! ![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/tmp_1byaaec.png)