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 đảm bảo rằng bạn đã chuẩn bị và tải lên đầy đủ các Clipart cho từng chữ cái và con số mà bạn dự định sử dụng. Mỗi ký tự khách hàng nhập vào cần có một Clipart tương ứng. 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

Thiết lập Group of Clipart Categories của bạn theo cách tương tự.

Tên thư mục phải trùng khớp hoàn toàn với ký tự mà nó đại diện. Khi chữ cái khách hàng nhập vào khớp với tên của Clipart Group, toàn bộ clipart bên trong sẽ được hiển thị.

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.

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 custom 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ì Custom 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

Tiếp tục tải hình ảnh cho chữ cái đầu tiên. Trong trường hợp này, hãy thử dùng 1 Clipart category làm Personalization Options của nó.

Vì bạn muốn hình ảnh này lấy dữ liệu từ Custom Text layer, hãy chọn layer đó làm source text option.

Trong trường Value to populate, nhập {{char1}} cho chữ cái thứ nhất, {{char2}} cho chữ cái thứ hai, và tiếp tục theo mẫu này cho từng ký tự tiếp theo. Điều này đảm bảo mỗi ký tự khách hàng nhập vào được ghép đúng với clipart tương ứng.

Đừng quên chọn Clipart Folder mà bạn đã tải lên. Điều này đảm bảo hình ảnh đúng được hiển thị cho từng ký tự khách hàng nhậ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.

Chọn Clipart Categories, theo cách tương tự như ở Option A. Trong trường hợp này, hãy thử dùng 1 Group of Clipart categories

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: 13/08/2026

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

Cảm ơn!