> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://customix.crisp.help/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).

# Display Multiple Swatches Based on the Number of Characters


In addition to displaying a single alphabet based on the first character, Customix also allows you to display multiple swatches dynamically, depending on how many characters the customer enters.
This is useful for designs where each character needs its own letter image, such as full names or multi-letter monograms.

# How It Works
* Each character in the text input is mapped to **one swatch**
* The number of visible swatches automatically adjusts to the **number of characters entered**
* You can optionally **limit or control layouts** based on text length

### 1. Step 1: Prepare the Alphabet Asset Folder
First, prepare a folder that contains alphabet images in **strict order**, starting with an empty file:
* The **first file must be an empty image** (used when no character is detected).
* The following files should represent letters **A → Z** in order.

![Prepare Alphabet Folder](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_w06g6s.png)
### 2. Step 2: Upload Alphabet Assets to Customix
* Go to Customix Personalizer → Assets
* Upload the entire alphabet folder you prepared
* Keep all alphabet images inside the same folder (for example: Alphabet Style 2)

![Upload the File to Customix](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_2gkyx5.png)
### 3. Step 3: Create a Template and Add the Alphabet Layer
* Create a new template (or open an existing one)
* Add the alphabet folder you uploaded to the template
* Position and resize the alphabet layer as needed in your design

![Add Alphabet Layer](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_xgdava.png)
### 4. Step 4: Add a Text Input Field
* Add a **Text** layer (for example: *Enter Name*)
* Enable **Personalize** for this text field as usual
* On the right-side settings panel, enable: "Display swatches by characters"
* Select the alphabet layer you created earlier (e.g. Alphabet Style 2) and assign it to Character 1

You can also assign as many swatches as needed, for example:
* Character 1 → the first swatch 
* Character 2 → the second swatch 

![Add Text Layer](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_1leml31.png)
The last step, to avoid customers manually selecting alphabet images, you should go to the **Option Sets** tab and hide the Alphabet Style 2 option set. This setup enables automatic alphabet display based on the first character, without requiring customers to interact with image swatches manually.

![Automatic Display](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_1xikwzl.png)
If you’re looking for a more advanced use case where the **l**ayout is automatically adjusted based on the number of text inputs, please refer to our dedicated guide: [“Dynamic Layout Display Based on Text Count”](https://customix.crisp.help/en/article/dynamic-layout-display-based-on-text-count-1hfsp98/?bust=1769770592535)