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:
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.
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
Clipart mẫu: Light (Da sáng): Download - Dark (Da tối): Download
(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.
Color HEX mẫu: Light (Da sáng): #FFD6C1 - Dark (Da tối): #A45431
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
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.
Sau khi đã chuẩn bị xong các thư mục clipart, hãy vào trang Artworks và tạo artwork mới.
Trong artwork editor, ấn chọn nút "+" ➡ chọn "Additional option" để tạo một layer ảo.
Đặt tên là "Skin layer".
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
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"
Để 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.
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").
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.
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".
Đặ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".
Đ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.
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".
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.
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.
- Sau đó, thêm cài đặt cá nhân hóa
- Đặ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.
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é.
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".
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.
Ở ngoài storefront, khách hàng sẽ nhìn thấy 2 lựa chọn về Skin cho mỗi người:
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:
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.
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
Clipart mẫu: Light (Da sáng): Download - Dark (Da tối): Download
(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.
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
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.
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".
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
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"
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.
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").
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.
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".
Đặ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".
Đ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.
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".
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.
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.
- Sau đó, thêm cài đặt cá nhân hóa
- Đặ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.
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é.
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".
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.
Ở ngoài storefront, khách hàng sẽ nhìn thấy 2 lựa chọn về Skin cho mỗi người:
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:
Cập nhật vào: 26/08/2022
Cảm ơn!