> ## 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). # Dynamic Layout Display Based on Text Count (Feature in Legacy Version) Sample product: https://customix-demo-store.myshopify.com/products/jd002-god-says-i-am-name-letter-in-bible-toile-de-jouy-style-personalized-jewelry-dish # Step 1: Prepare Design Assets To enable Dynamic Layout Display Based on Text Count, you need to prepare two sets of design assets. These assets determine how different layouts are displayed based on the characters entered by customers. ### a. Large Alphabet Images (Main Character) This asset set controls the main large character displayed in the layout. File order structure: * File 1 → Empty image (required placeholder) * Files 2–27 → Lowercase letters `a–z` * Files 28–54 → Uppercase letters `A–Z` * Files 55–64 → Numbers `0–9` (optional) > ⚠️ Do not skip or reorder files. All images should use the same size and alignment. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_1033t74.png) ### b. Quote Layout Folders Prepare 54 folders corresponding to 54 character cases, following the same logic as Part 1: * 27 folders for lowercase letters `a–z` * 27 folders for uppercase letters `A–Z` Each folder represents the quote layout for one specific character. > Folder order and structure must remain consistent with the character mapping used in Part 1. ![Quotes Asset](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_wc4j9i.png) # Step 2: Add Elements to the Template After preparing all design assets, the next step is to add these elements into a template and set up the layouts. ### a. Upload Assets to Assets Library * Upload all prepared files and folders to **Assets → Images** * Make sure the folder structure (backgrounds, alphabets, quotes) is uploaded correctly ![Upload Materials to Assets](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_10rq3k9.png) ### b. Create a Sample Template Create a new template and start adding elements, the first one is the Background with 3 color: blue, red, black. Next, add 3 Alphabet layers then resize and position these layers to the desired location in the design. ![Add Alphabet Layers](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_tdev0d.png)ter that, add 3 Quote layers, corresponding to the same 3 colors, also align and position them relative to the alphabet layers ![Add Quotes Layer](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_goejpp.png) ### c. Create Layout Select all 6 layers and click **Create Layout** icon to group them into \*\*Layout 1. \*\* ![Group into Layout](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_h36d7u.png)ick on the Layout 1, and press the combo buttons `Ctrl + C and Ctrl + V`to duplicate Layout 2 with the same structure ![Duplicate to Layout 2](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_o4cdqe.png)xt, expand Layout 2 and select the 6 layers corresponding to the first character, also use the combo `Ctrl + C and Ctrl + V`to create 6 additional layers for the second character, as shown in the reference image as below. ![Create Layers for 2nd Character](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_bnayjp.png)ve the template to keep the current structure before moving to the next configuration step # Step 3: Option Set Mapping & Logic In this step, we’ll configure the option sets and logic to automatically switch layouts, alphabets, and quotes based on the text entered by customers. ### a. Add a Text Field option * Go to **Option Sets → Add → Text Field** * This field will be used for customers to enter their text (e.g. name) ![Add a Text Fields](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_a9sysw.png) ### b. Enable Character-based Swatches In the Text Field settings, enable **Display swatches by characters**, then assign: * **Blue Alphabet** → Character 1 * **Blue Alphabet 2** → Character 2 > This mapping defines which alphabet layer is used for each character position. ![Enable Character-based Swatches](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_145bfg7.png) ### c. Enable Layout Switching by Text Length Enable the **Display layout swatches by text length feature, t**his allows layouts to automatically adjust based on how many characters the customer enters. * Text length = 1 character → Show Layout 1 * Text length = 2 characters → Show Layout 2 ![Enable Layout Switching by Text Length](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_l9zge4.png) ### d. Set Global ID for Character Synchronization Now you have to set the Global ID for all layers that will be affected by the first character that customers enter: * Blue Alphabet * Black Alphabet * Red Alphabet * Blue Quotes * Black Quotes * Red Quotes ⚠️ Do not select nested option values inside the Quote option sets, and set Global ID = 1 When **Blue Alphabet** switches to character **A**, all other layers with **Global ID = 1** will automatically switch to the corresponding **A** value. Repeat the same process for the second character. ![Set Global ID for Same Level Option Set](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_1bddtzu.png) ### e. Set Display Conditions by Background Color To ensure correct color matching, select all **Black** layers (Alphabet + Quotes) and add the condition: **Show only when Background = Black** ![Set Up Display Condition by Background Color](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_129vm3.png) Repeat the same setup for\*\* \*\*red and blue characters. This ensures that only the correct color assets are displayed based on the selected background. ### f. Hide Unnecessary Options ![Bulk Hiding Unnecessary Options](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_1kgql2n.png) # Final Result When the customer enters **1 character** (e.g. `c`), only **Layout 1** is shown and the Quote and alphabet for **C** are displayed ![Typing 1 Character Result](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_nnfwsb.png) When the customer enters **2 characters** (e.g. `cd`) **then the Layout 2** is shown, then Quotes and alphabets for **C** and **D** are displayed accordingly. ![Typing 2 Characters Result](https://storage.crisp.chat/users/helpdesk/website/-/b/3/c/1/b3c1fc6f21f6e800/image_1d35hd9.png)