Cấu Hình Mẫu Màu Sử Dụng Màu Được Đặt Tên (Giao Diện OS 3.0)

Mẫu màu cho phép khách hàng chọn biến thể màu của sản phẩm từ một bảng màu trực quan thay vì danh sách văn bản. Chủ đề OS 3.0 tạo ra các mẫu màu này bằng cách sử dụng các màu được đặt tên — các từ khóa màu CSS chuẩn hóa, như đỏ, xanh hải quân hoặc san hô, mỗi màu được ánh xạ tới một mã thập lục phân cụ thể — để các giá trị biến thể màu của sản phẩm tự động hiển thị dưới dạng màu mẫu chính xác.

Hướng dẫn này giải thích cách các màu được đặt tên hoạt động, cách các mẫu màu hiển thị trên trang Bộ sưu tập và Sản phẩm, cách cấu hình chúng bằng cách sử dụng thành phần Bộ chọn biến thể, và cung cấp bảng tham khảo đầy đủ các tên màu được hỗ trợ cùng với mã hex tương ứng.

Ảnh hưởng của Mẫu màu trên Giao diện Cửa hàng trong Chủ đề OS 3.0

Chủ đề OS 3.0 sử dụng các màu được đặt tên để cung cấp năng lượng cho thành phần Bộ chọn biến thể, thành phần này hiển thị các biến thể màu của sản phẩm dưới dạng bảng màu mẫu. Khách hàng sẽ thấy các mẫu màu này trên cả trang Bộ sưu tập và trang Sản phẩm, và chúng cũng có thể được thêm vào các thành phần liên quan đến sản phẩm khác (ví dụ, Sản phẩm nổi bật).

Phần này tập trung vào trang Bộ sưu tập và trang Sản phẩm, nơi khách hàng thường gặp các mẫu màu nhất. Các phần tiếp theo mô tả hiệu ứng hiển thị với khách hàng trên từng trang.

Trên trang Bộ sưu tập

• Di chuột qua một mẫu màu sẽ cập nhật hình ảnh sản phẩm để xem trước màu đó.

  

• Nhấp vào một mẫu màu trên thẻ sản phẩm ở trang Bộ sưu tập sẽ đưa khách hàng đến trang Sản phẩm cho biến thể màu đó.

  

Trên trang Sản phẩm

• Khi khách hàng đến từ trang Bộ sưu tập, màu họ đã nhấp sẽ được chọn sẵn.

• Nhấp vào một mẫu màu khác trên trang Sản phẩm sẽ cập nhật trang tương tự — URL thay đổi để phản ánh SKU của màu đó, và mẫu màu được chọn.

  

• Khách hàng chọn kích thước, sau đó nhấp Thêm vào giỏ hàng để thêm sản phẩm vào giỏ — chỉ chọn màu và kích thước không tự động thêm sản phẩm.

  

Cấu hình Mẫu màu trên trang Bộ sưu tập

Bộ chọn biến thể là một thành phần thẻ sản phẩm hiển thị các biến thể màu của sản phẩm dưới dạng bảng màu mẫu và cho phép khách hàng chọn màu và, nếu có, một thuộc tính biến thể khác như kích thước, trước khi thêm sản phẩm vào giỏ hàng. Để thêm và cấu hình Bộ chọn biến thể trên trang Bộ sưu tập:

1. Trong trình chỉnh sửa chủ đề, chọn trang Bộ sưu tập từ bộ chọn trang. Trong menu lớp bên trái, đi đến Danh sách sản phẩm > Thẻ sản phẩm > Khu vực thông tin sản phẩm, sau đó thêm thành phần Bộ chọn biến thể.

2. Khi thành phần này được thêm vào, các biến thể màu sắc sẽ hiển thị dưới dạng bảng màu trên thẻ sản phẩm, và thuộc tính biến thể khác (chẳng hạn như kích thước) sẽ xuất hiện khi khách hàng di chuột qua hình ảnh sản phẩm.

   

3. Cấu hình các cài đặt sau cho thành phần Bộ chọn biến thể:

   

   • Kiểu bảng màu: Vuông, Tròn, hoặc Hình chữ nhật bo góc
   • Số lượng hiển thị tối đa của bảng màu: Kéo thanh trượt hoặc nhập số trực tiếp để đặt số lượng bảng màu hiển thị, từ 1 đến 6.
   • Phương thức hiển thị bảng màu: Chỉ hiển thị 1 dòng, Cuộn trái và phải, hoặc Hiển thị dạng lưới
   • Kích thước hiển thị bảng màu: Nhỏ, Trung bình, hoặc Lớn
   • Thông số hiển thị trên máy tính để bàn / Thông số hiển thị trên thiết bị di động: Bật các tùy chọn này để hiển thị thuộc tính biến thể khác (chẳng hạn như kích thước) dưới dạng văn bản bên cạnh bảng màu. Mỗi công tắc áp dụng độc lập cho máy tính để bàn và thiết bị di động.
   • Kích thước thông số: Nhỏ, Trung bình, hoặc Lớn — đặt kích thước văn bản thông số hiển thị khi bật hiển thị thông số.
4. Nhấp Lưu để áp dụng các thay đổi của bạn.

Cấu hình Bảng màu trên trang Sản phẩm

Trên trang Sản phẩm, Bộ chọn biến thể là một thành phần tích hợp sẵn trong phần Thông tin sản phẩm — không giống như trên trang Bộ sưu tập, nó không cần được thêm thủ công.

Để cấu hình nó:

1. Trong trình chỉnh sửa chủ đề, chọn trang Sản phẩm từ bộ chọn trang. Trong menu lớp bên trái, đi đến Sản phẩm > Phần sản phẩm > Thông tin sản phẩm, sau đó chọn Bộ chọn biến thể.

   

2. Bật Bật bảng màu. Khi được bật, bảng màu sẽ hiển thị dưới dạng chế độ xem ô theo mặc định. Cấu hình các cài đặt sau cho thành phần Bộ chọn biến thể:

   

• Kiểu bảng màu: Đặt hình dạng của các mẫu màu (ví dụ: Hình vuông).
• Kiểu chữ tiêu đề: Đặt kiểu phông chữ được sử dụng cho tiêu đề tùy chọn biến thể (ví dụ: Body 3).
• Kiểu biến thể hết hàng: Đặt cách biểu thị các biến thể hết hàng (ví dụ: Gạch chéo nửa chiều rộng (màu xám)). Cài đặt này chỉ áp dụng cho nút văn bản và hình ảnh — nút mẫu màu không hỗ trợ.
• Kiểu biến thể được chọn: Đặt cách làm nổi bật biến thể được chọn (ví dụ: Viền nổi bật).
• Kích thước hiển thị: Đặt kích thước của các mẫu màu (ví dụ: Trung bình).
• Bố cục trên máy tính để bàn: Đặt hướng bố cục trên máy tính để bàn (ví dụ: Bố cục ngang).
• Bố cục trên thiết bị di động: Đặt hướng bố cục trên thiết bị di động (ví dụ: Bố cục dọc).

3. Nhấp Lưu để áp dụng các thay đổi của bạn.

Bảng Tham Khảo Màu Được Đặt Tên cho Chủ Đề OS 3.0

Bảng dưới đây liệt kê mọi màu được đặt tên được hỗ trợ bởi các chủ đề OS 3.0, cùng với mã màu hex tương ứng. Những tên này tuân theo danh sách từ khóa tiêu chuẩn của Mô-đun Màu CSS, vì vậy cùng tên và giá trị sẽ được áp dụng nhất quán trên toàn bộ cửa hàng của bạn.

Màu Được Đặt Tên Tiêu Chuẩn

Màu Được Đặt Tên Mở Rộng