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

Cho phép khách hàng chọn Font Family, Font Color, và Text Background

Chúng tôi đã thay đổi toàn diện cách bạn quản lý việc cá nhân hóa text trong Teeinblue.

Trước đây, các setting về font và màu bị gắn cố định vào từng text layer. Giờ đây, chúng đã được tách thành các Form Element độc lập. Bạn có thể tạo riêng các layer Font, Color và áp dụng chúng cho nhiều text layer cùng lúc bằng tính năng Populate Values.

Hãy đọc tiếp bài viết để tìm hiểu thêm về những thay đổi mới này.

Chuẩn bị Assets

Upload Font và tạo Font Category

Để upload Font, hãy vào Assets > Upload Fonts và click nút Upload Font.

Chỉ dùng font định dạng TTF.

Sau khi upload Font, bạn cần tạo một category cho chúng. Hãy vào Assets > Font Categories và click nút + New Category. Sau đó, bạn có thể thêm các Font đã upload vào Category này.

👉 Bước cấu hình trong Artwork nằm ở phần Tạo layer chọn Font bên dưới.

Tạo Color Category cho Font

Bạn có hai lựa chọn chính cho màu chữ:

Color Library: tạo một Color Category riêng với danh sách màu có sẵn để khách hàng chọn. Bạn có thể tìm hiểu thêm về Color Category trong bài Color Categories.

Color Picker: cho phép khách hàng chọn bất kỳ màu nào bằng công cụ chọn màu.

Cách liên kết các cấu hình này với text layer sẽ được hướng dẫn ở bước sau.

👉 Bước cấu hình trong Artwork nằm ở phần Tạo layer chọn màu chữ bên dưới.

Tạo Category cho nền chữ

Bạn có thể dùng bất kỳ Clipart category nào làm nền cho text. Cách liên kết với layer sẽ được hướng dẫn ở bước sau, nhưng trước tiên bạn cần tạo category.
Tạo một Clipart category mới cho nền chữ như sau:

👉 Bước cấu hình trong Artwork nằm ở phần Tạo Category cho nền chữ trong Artwork bên dưới.

Thiết lập Artwork với Font, màu chữ và nền chữ tùy chỉnh

Như đã đề cập, quy trình mới tách phần chọn Font và chọn màu thành các Form Element độc lập. Thay vì bị gắn vào từng text layer, các setting này giờ được tạo thành các option riêng và có thể áp dụng cho toàn bộ thiết kế.

Ở bước này, bạn chỉ tạo các lựa chọn. Chúng chưa được gắn với text layer nào, mà chỉ là các lựa chọn khách hàng sẽ tương tác.

Tạo layer chọn Font

Trong Artwork Editor, click + Layer và chọn Font.

Bảng setting của layer này sẽ khá quen thuộc với bạn. Hãy chọn Font Category bạn đã tạo ở bước trước.

Tạo layer chọn màu chữ

Trong Artwork Editor, click + Layer và chọn Color.

Trong bảng setting, tại mục Color options, chọn một trong các lựa chọn sau:
- Solid Color category: khách hàng chọn một màu từ Color Category.
- Color Sequence categories: chọn một Color Category cha. Mỗi category con sẽ trở thành một dãy màu để khách hàng chọn. Sau đó, từng ký tự của text sẽ lấy màu kế tiếp trong dãy màu đã chọn. Bạn có thể tìm hiểu thêm trong bài Feature Color Sequence cho Text.
- Color picker: khách hàng chọn bất kỳ màu nào bằng công cụ chọn màu.

Đặt màu mặc định

Nếu không đặt màu mặc định, Color layer sẽ bắt đầu với màu đen. Dùng Select default value để chọn màu khách hàng nhìn thấy đầu tiên khi mở trang sản phẩm. Mọi text layer lấy màu từ Color layer này cũng sẽ hiển thị màu mặc định, cho đến khi khách hàng chọn màu khác.

Giá trị mặc định bạn chọn phụ thuộc vào Color option:

Color option	Giá trị mặc định
`Solid Color category`	Một màu trong category
`Color Sequence categories`	Một dãy màu trong nhóm
`Color picker`	Một màu, chọn trực tiếp hoặc nhập mã hex

Ví dụ với Color Sequence categories:

Ví dụ với Color picker:

Để xóa màu mặc định, click Clear default value.

Lưu ý: ở bước này, bạn mới chỉ cấu hình các Form Element. Bạn chưa tạo text layer thật; việc này sẽ được thực hiện ở các bước tiếp theo.

Tạo Category cho nền chữ trong Artwork

Bạn nên dùng màu chữ hoặc nền chữ cho text, không nên dùng cả hai cùng lúc.

Vì nền chữ hoạt động như một Clipart category mà custom text sẽ populate giá trị ở bước sau, hãy bắt đầu bằng cách tạo một Clipart category mới.

Trong Artwork Editor, click + Layer và chọn Clipart Category > 1 Clipart Category.

Chọn Clipart Category bạn đã tạo ở bước trước.

Vì layer này chỉ là nguồn cho nền chữ, nó không cần hiển thị trên thiết kế sản phẩm. Bạn có thể kéo layer ra khỏi vùng Canvas, hoặc vào Extra và đặt Display this layer on: None.

Liên kết Custom Text layer với các Form Element

Sau khi đã tạo các layer Font Family, Font Color và Text Background, đã đến lúc kết nối chúng với custom text. Trong phần này, bạn sẽ học cách tạo một Custom Text layer và dùng tính năng Populate values để liên kết nó với ba layer độc lập này, giúp khách hàng tùy chỉnh text của mình một cách linh hoạt.

Để tạo Custom Text layer mới, trong Artwork Editor, click + Layer rồi chọn Single-line Text.

Tại mục Populate Values, bật Populate Font from another option để Custom Text lấy giá trị Font từ layer Font bạn đã tạo.

Nếu layer của bạn chỉ có một nguồn để populate, nguồn đó sẽ được chọn tự động. Trong ví dụ này, {{font}} đã được điền sẵn.

Làm tương tự với Color Option hoặc Background option.

Vậy là xong. Custom Text layer của bạn đã được liên kết với layer Font và Font Color.

💡 Bạn có thể liên kết nhiều text layer với cùng một layer Font hoặc Font Color. Nhờ vậy, khách hàng chỉ cần chọn một lần, và lựa chọn đó sẽ tự động áp dụng cho tất cả text layer được liên kết.

Trong ví dụ trên, khách hàng chỉ cần chọn Font một lần, và lựa chọn đó được áp dụng cho cả hai Custom Text layer.

Populate Font hoặc Color cho nhiều layer cùng lúc

Thay vì mở từng text layer, bạn có thể liên kết một layer Font hoặc Color với nhiều layer ngay tại một chỗ.

Chọn layer Font hoặc Color, rồi vào Personalization Settings của layer đó.
Tại Populate to other layers, chọn tất cả các layer cần lấy giá trị từ layer này. Bạn có thể tìm kiếm trong danh sách, và mỗi mục hiển thị Option title cùng Layer name.

Các layer đã chọn sẽ hiển thị dưới dạng tag bên dưới ô chọn. Để bỏ liên kết một layer, hãy xóa tag của layer đó.

Setting này luôn đồng bộ với Populate Values trên từng text layer. Khi bạn thêm một layer ở đây, setting Populate Font hoặc Populate Color của layer đó sẽ tự động bật, với layer hiện tại làm nguồn. Nếu bạn liên kết từ phía text layer, text layer đó cũng sẽ tự động được thêm vào đây. Xóa liên kết ở bất kỳ bên nào cũng sẽ xóa ở cả hai bên.

Cập nhật vào: 11/10/2026

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

Cảm ơn!