Sample product:

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.

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.

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

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.

fter that, add 3 Quote layers, corresponding to the same 3 colors, also align and position them relative to the alphabet layers

c. Create Layout

Select all 6 layers and click Create Layout icon to group them into **Layout 1. **

lick on the Layout 1, and press the combo buttons Ctrl + C and Ctrl + Vto duplicate Layout 2 with the same structure

ext, expand Layout 2 and select the 6 layers corresponding to the first character, also use the combo Ctrl + C and Ctrl + Vto create 6 additional layers for the second character, as shown in the reference image as below.

ave 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)

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.

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

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.

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

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

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

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.

Updated on: 30/01/2026