> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/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).

# Tạo lập các layers màu da (skin color) và body sử dụng điều kiện

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn thiết lập các tùy chọn về màu da ở trên store như ví dụ sau đây:

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_18b7pxp.png)

Chọn 1 loại màu da ("Skin color") sẽ làm thay đổi màu da của cô gái ở gallery bên cạnh, và hiển thị các lựa chọn khác tương ứng với màu da vừa chọn.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_4t8kp3.png)

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_qd28np.png)

## Bước 1: Tạo thư mục cho "Skin color"

* Vào trang **Assets** → đi tới **"Additonal Options"** ➡ tạo 1 thư mục mới dưới tên "Skin color"
* Tạo các lựa chọn mới → đăng tải ảnh thumbnails cho từng lựa chọn

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/additional-skin_1xkj9l1.png)

| Clipart mẫu: Light (Da sáng): [Download](https://drive.google.com/file/d/1p57_f2wcRPkavGBsf34G3LSFNzxBE7a8/view?usp=sharing) - Dark (Da tối): [Download](https://drive.google.com/file/d/1YjzR9dYFyFc61knjBoOj9IrgwH3cJACj/view?usp=sharing)

* (không bắt buộc) Nếu bạn không muốn sử dụng ảnh thumbnail, bạn có thể **cài đặt màu** cho mỗi clipart để hiển thị thumbnail trên store dưới dạng bảng màu.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/skin-color_755mkb.png)

| Color HEX mẫu: Light (Da sáng): #FFD6C1  -  Dark (Da tối): #A45431

## Bước 2: Tạo các thư mục clipart theo 2 màu da

* Vào trang **Cliparts ➡ tạo 1 thư mục mới cho body theo màu da**, _ví dụ: Màu da sáng (Light body)_
* Tải lên các cliparts có màu da sáng

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/upload-clipart-for-skin-color_ztjvfn.png)

* Tạo thêm 1 thư mục mới cho body theo màu da còn lại (Dark body), và tải các cliparts lên.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/dark-body-1_1inc42v.png)

## Bước 3: Đặt Điều kiện trong artwork

Sau khi đã chuẩn bị xong các thư mục clipart, hãy vào trang Artworks và tạo artwork mới.

##### 3.1: Thêm một lựa chọn bổ sung cho "Skin color"

* Trong artwork editor, ấn chọn nút "+" ➡ chọn "Additional option" để tạo một layer ảo.

Đặt tên là "Skin layer".

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/skin-additional_vgmts6.png)

* Chỉnh sửa "Skin layer" ➡ Chọn thư mục "Skin color" 
Sau đó chỉnh sửa tên của lựa chọn là Girl Skin

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/skin-addtional-2_midbo4.png)

Hãy nhớ chọn "Default Value" (giá trị hiển thị mặc định trên store). Trong ví dụ này, chúng ta sẽ chọn "Light" 

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/default-additional_qyeqqt.png)

##### 3.2: Cài đặt hiển thị các tùy chọn cá nhân hóa dựa vào màu da được chọn

|| Để có thể thực hiện được điều này, chúng ta sẽ sử dụng tính năng [Thêm điều kiện cho layer](/vi/article/them-dieu-kien-cho-layer-1y9bm04/).

* Tải lên 1 layer body với 1 màu da. _Ví dụ_: Body với màu da sáng ("Light color body").

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/upload-light-body_1onwq3o.png)

* Chỉnh lại kích thước và di chuyển body đến vị trí phù hợp. Hãy chắc chắn rằng layer body sẽ đè lên "Skin layer" để ẩn nó đi.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/light-body_1qu1h84.png)

* Sau đó, **cài đặt cá nhân hóa theo "1 Clipart category"** cho layer body da sáng. Và chọn thư mục clipart "Light body" (đã chuẩn bị ở Bước 2).

Nếu bạn có nhiều thư mục clipart cho body da sáng, bạn có thể chọn cá nhân hóa theo "1 Group of clipart categories".

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/light-body-2_ro33oh.png)

* **Đặt điều kiện** cho layer body da sáng này:
- Nhấn vào **Conditional Settings** để mở ra các tùy chỉnh nâng cao
- Ở mục **Other option**, chọn **"Skin layer"** (đã được thêm cá nhân hóa với thư mục "Skin color" ở bước 3.1)
- Chọn **option "Light"** (Màu sáng) trong số các lựa chọn của "Skin color".

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/light-3-conditional-setting_1jxzj5i.png)

Điều này sẽ giúp cho layer body da sáng **chỉ hiển thị trên storefront khi khách hàng lựa chọn giá trị "Light" clipart** ở tùy chọn "Skin layer".

* Sau đó, hãy bật công tắc **"Show option as default"**, để hiện layer body da sáng trên artwork kể cả khi khách hàng chưa chọn gì ở trên store.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/light-body-4-default_ls08q.png)

||| Bạn có thể chọn bật công tắc này với các body có màu da khác, ví dụ như body da tối, để hiển thị layer body da tối từ đầu, thay vì màu da sáng. Nếu bạn không bật công tắc này với bất kì layer nào, sẽ không có phần body hiển thị trên artwork, vì khi đó lựa chọn màu da đang bị để trống.

* (không bắt buộc) Cuộn xuống lên mục của tính năng **Clipart category’s default value**.
- Nhấn chọn **Show option to select default value**
- Chọn 1 clipart mà bạn muốn được chọn trước khi khách hàng chọn giá trị "Light" ở "Skin layer".

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/light-body-5-default-value_idsyni.png)

* Lặp lại các bước trên đối với các màu da khác, ví dụ như màu da tối (Dark color).
- Tải lên 1 body da tối ("Dark color body").
- Điều chỉnh kích thước và di chuyển layer tới vị trí trùng khớp với layer body da sáng.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/dark-body-default_1jtmrrw.png)

| Gợi ý: Bạn có thể kiểm tra kích thước của layer "Dark color body" để chắc chắn rằng nó có kích thước trùng khớp với màu da ban đầu.
![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1uus0zx.png)

- Sau đó, thêm cài đặt cá nhân hóa

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/dark-body-personalization-opti_36ie7s.png)

- **Đặt điều kiện** để layer body da tối phụ thuộc vào giá trị "Dark" ở "Skin layer". Và sau đó, chọn 1 giá trị mặc định (**Default value**) nếu cần.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/dark-add-condition_v7rp7a.png)

||| **Chỉ bật "Show option as default" cho 1 layer duy nhất** ( Light hoặc Dark body). Nếu bật tính năng trên cho cả 2 layers, cả 2 layers đều sẽ hiển thị trên artwork ngoài storefront.

* Giờ hãy **Lưu lại** artwork.

** Bonus: Hãy check lại vị trí của các tùy chọn ở trong cả Campaign sao cho phù hợp nhé.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_fdsqa7.png)

# Các cases khác

##### 1. Có nhiều hơn 1 layer phụ thuộc và màu da:

Bạn có thể làm theo các bước ở trên như bình thường, và **đặt điều kiện** cho tất cả các layers cần phụ thuộc vào "Skin layer".

_Ví dụ_: 1 body có 3 phần: cổ, tay và chân. Bạn sẽ cần đặt điều kiện giống nhau cho tất cả 3 layers để phụ thuộc vào "Skin layer".

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/pants-hand-neck_nonaap.png)

##### 2. Có nhiều hơn 1 người trong artwork:

Trong trường hợp này, bạn sẽ cần thêm nhiều hơn 1 Skin layers để tạo các tùy chọn về Skin khác nhau.

_Ví dụ_: Bạn có 2 người ➡ Tải lên 2 "Skin layers" ➡ Thêm cài đặt cá nhân hóa "1 Clipart category" và chọn thư mục clipart "Skin color" cho mỗi "Skin layer".

Sau đó, đặt điều kiện cho mỗi skin layer của mỗi người.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/two-bodies_iwsd3t.png)

Ở ngoài storefront, khách hàng sẽ nhìn thấy 2 lựa chọn về Skin cho mỗi người:

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1ey847x.png)

Chọn 1 giá trị của Skin sẽ hiển thị ra các tùy chọn khác cho body của mỗi người:

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_g2o764.png)

${youtube}[Hướng dẫn sử dung Additional Option để set up skin color](yP96_iINd_c)