Bài viết này cũng có sẵn trong:

Về tính năng Dynamic Clipart By Text

Khi khách hàng nhập vào một trường văn bản (text field), ứng dụng sẽ tự động hiển thị các Clipart dựa trên từng ký tự họ nhập. Mỗi ký tự sẽ được ghép với một hình ảnh tương ứng từ danh mục Clipart đã chọn.

Hãy đọc tiếp bài viết này để tìm hiểu cách thiết lập tính năng này trong Store của bạn.

Nên dùng phương pháp nào?

Manual Placement — trong quá trình thiết lập artwork, bạn đặt từng ký tự riêng lẻ, ở bất kỳ vị trí nào trên artwork. Phù hợp nhất khi các chữ cái không nằm trên một đường thẳng hoặc cần được đặt vị trí riêng.

Auto Placement — trong quá trình thiết lập artwork, bạn chỉ thiết lập một khối văn bản duy nhất, và nó sẽ tự động co giãn để vừa với nội dung mà khách hàng nhập vào.

Cả hai phương pháp đều có thể dùng 1 Clipart Category hoặc 1 Group of Clipart Categories — phương pháp bạn chọn không giới hạn cách thiết lập Clipart mà bạn sử dụng.

Dùng các liên kết sau để nhảy nhanh đến phần bạn muốn:
Option A: Manual Placement
Option B: Auto Placement

Chuẩn bị Clipart Assets

Trước khi thiết lập Manual Placement hoặc Auto Placement, hãy chuẩn bị và tải lên các Clipart cần dùng. Tùy cách thiết lập, tên Clipart phải khớp với từng ký tự hoặc toàn bộ nội dung khách hàng nhập. Bước này là bắt buộc để tính năng hoạt động chính xác.

Bạn có thể chuẩn bị Clipart dưới dạng một Clipart Category đơn, hoặc một Group of Clipart Categories. Cả Manual Placement và Auto Placement đều có thể dùng cả hai loại.

Option 1: Một Clipart Category đơn

Vào Assets > Clipart Categories > và tạo một thư mục mới tại đây

Sau khi tải Clipart lên, điều quan trọng là bạn phải đặt tên từng hình ảnh theo đúng chữ cái hoặc số mà nó đại diện.

Tính năng này ghép Clipart dựa trên tên file, vì vậy tên hình ảnh phải trùng khớp hoàn toàn với ký tự mà khách hàng nhập vào. Tên sai hoặc thiếu sẽ khiến hình ảnh không hiển thị đúng cách.

Option 2: Một Group of Clipart Categories

Vào Teeinblue Portal > Assets > Clipart Categories, tạo một Group of Clipart Categories. Trong group, tạo một sub-category cho mỗi ký tự được hỗ trợ, ví dụ A, B, C.

Đặt tên từng sub-category trùng khớp hoàn toàn với ký tự mà nó đại diện, rồi thêm các Clipart khách hàng có thể chọn cho ký tự đó. Khi khách hàng nhập ký tự khớp, Teeinblue hiển thị Clipart trong sub-category tương ứng để khách hàng chọn một Clipart cho ký tự.

Việc ghép khớp phân biệt chữ hoa và chữ thường ở cả hai option — A và a được xem là hai ký tự khác nhau, vì vậy hãy đảm bảo bạn đã tải lên cả hai kiểu chữ nếu khách hàng có thể nhập một trong hai.

Nguồn 1 Group Clipart category chỉ có trong Artwork 2.0.

Option A: Manual Placement

Tạo Artwork

Trong ví dụ này, chúng ta sẽ minh họa sản phẩm ornament cho phép khách hàng nhập tên của họ. Mỗi chữ cái trong tên sẽ được thể hiện bằng một clipart ornament tương ứng.

Đầu tiên, tạo một Single-line Text layer để khách hàng nhập tên.

Tính năng Dynamic Image by Text dựa trên chức năng Auto-populate values from other options. Điều này có nghĩa là Custom Text layer là source layer bắt buộc. Các clipart layer sẽ lấy dữ liệu từ layer văn bản này để mỗi ký tự khách hàng nhập vào hiển thị đúng hình ảnh.

Vì Single-line Text layer này chỉ được dùng để thu thập dữ liệu đầu vào, chúng tôi có một tùy chọn hiển thị cho nó. Bạn có thể chọn không hiển thị layer này trong Gallery, nhưng vẫn hiển thị trong Customization Form để khách hàng nhập tên.

Cách này giúp ẩn layer chữ khỏi phần xem trước sản phẩm nhưng vẫn dùng được làm nguồn cho tính năng Dynamic Image by Text.

Để tránh khách hàng nhập các ký tự không được hỗ trợ, bạn có thể dùng tính năng Custom Rule:

Để tạo layer Dynamic Clipart by Text, nhấn nút +Layer, sau đó chọn Dynamic Clipart by Text > Manual Placement

Trong Teeinblue Portal > Artworks, mở Artwork, chọn layer Dynamic Clipart by Text, rồi chọn Custom Text layer làm source text.

Tại Value to populate, nhấn + Add variable, rồi chọn:
{{charX}}: lấy ký tự ở vị trí X. Ví dụ, {{char1}} lấy ký tự đầu tiên và {{char2}} lấy ký tự thứ hai.
{{value}}: lấy toàn bộ nội dung khách hàng nhập. Manual Placement sẽ tìm một Clipart có tên trùng với toàn bộ nội dung đó. Ví dụ, giá trị 24 sẽ hiển thị Clipart có tên 24.

Khi dùng {{value}}, tên Clipart phải khớp hoàn toàn. Clipart khớp sẽ được hiển thị dưới dạng một Clipart duy nhất. Nếu không có tên phù hợp, Clipart sẽ không hiển thị.

Trong Teeinblue Portal > Artworks > mở Artwork > chọn layer Dynamic Clipart by Text > Dynamic clipart source, chọn 1 Clipart category và một category, hoặc chọn 1 Group Clipart category và một group. Khi dùng group, đặt Option Title cho option Clipart hiển thị với khách hàng. Bạn có thể dùng {{character}} trong tiêu đề; biến này sẽ được thay bằng tên sub-category khớp.

Tiếp tục thực hiện tương tự cho các chữ cái khác:

Hãy đảm bảo đặt Value to populate của chúng cho đúng!

Notes

Vì option này dựa trên hình ảnh, bạn sẽ không thể thay đổi font size, font family, hoặc letter spacing. Bạn cần chỉnh trực tiếp các hình ảnh trong Artwork Editor để đảm bảo mọi thứ hiển thị đúng và cân đối.
Khách hàng có thể nhập tên với số lượng ký tự khác nhau. Chúng tôi khuyến nghị tạo các template riêng cho từng độ dài tên khác nhau để bạn có thể dễ dàng căn chỉnh hiển thị cho từng chữ cái.

Option B: Auto Placement

Auto Placement là option nhanh hơn: thay vì tạo và đặt vị trí một image layer cho từng chữ cái, bạn chỉ thiết lập một frame duy nhất (hàng hoặc cột) và ứng dụng sẽ tự động sắp xếp và co giãn các Clipart để vừa khớp — bất kể nội dung khách hàng nhập vào dài đến đâu.

Tạo Artwork

Đầu tiên, tạo một custom text layer để khách hàng nhập tên, theo cách hoàn toàn giống như ở Option A.
Để tạo layer Dynamic Clipart by Text, nhấn nút +Layer, sau đó chọn Dynamic Clipart by Text > Auto Placement

Vẽ Frame trên canvas bằng cách kéo và thả để đặt chiều rộng, chiều cao và vị trí của nó. Frame này là vùng mà các clipart sẽ được sắp xếp bên trong.

Mở phần Design Settings (hiển thị ở đầu layer panel) và cấu hình:

Direction

Các clipart được sắp xếp theo hàng (Horizontal) hay theo cột (Vertical).

Alignment

Vị trí của các clipart bên trong frame. Các option khả dụng phụ thuộc vào Direction:

Horizontal: Left / Center / Right
Vertical: Top / Middle / Bottom

Max cliparts before scaling down

Số lượng clipart tối đa có thể hiển thị ở kích thước lớn nhất. Nếu tên của khách hàng có nhiều ký tự hơn con số này, tất cả clipart sẽ cùng co nhỏ lại để vẫn vừa bên trong frame. Nhận giá trị từ 1 đến 20.

Gap (px)

Khoảng cách giữa mỗi clipart. Gap lớn hơn sẽ giãn các clipart ra xa nhau hơn; gap âm sẽ khiến chúng chồng lên nhau.

Mỗi clipart giữ nguyên tỷ lệ khung hình của nó và co nhỏ hoặc phóng to để vừa bên trong frame — không có gì bị kéo giãn hay bóp méo.

Trong Teeinblue Portal > Artworks > mở Artwork > chọn layer Dynamic Clipart by Text > Dynamic clipart source, chọn 1 Group Clipart category, chọn group và đặt Option Title. {{character}} sẽ được thay bằng tên sub-category khớp.

Vì loại layer này có thể lấy giá trị từ toàn bộ custom text, hãy chọn Custom Text Layer làm source Layer của nó

Tạo Campaign

Khi đã hài lòng với thiết lập của mình, hãy nhớ launch nó lên Storefront!

Cập nhật vào: 14/09/2026

Bài viết có hữu ích không?

Cảm ơn!