Bảng màu

Bạn có thể định rõ nhiều bảng màu trong cài đặt chủ đề và áp dụng các bảng màu đó cho các mục khác nhau trên khắp cửa hàng trực tuyến với hộp chọn bảng màu. Bảng màu là một tập hợp các màu sắc. Chủ đề của bạn được áp dụng một bảng màu mặc định mà bạn có thể thay đổi bất kỳ lúc nào trong trình biên tập chủ đề. Bạn có thể thêm màu sắc thương hiệu để đảm bảo áp dụng chặt chẽ bảng màu trong cửa hàng trực tuyến.

Cài đặt chủ đề bảng màu

Bảng màu là cài đặt chủ đề sẽ phân nhóm các phần tử và màu tương ứng theo một cách thể hiện trực quan. Bạn có thể chỉ định nhiều màu sắc cho nhiều phần tử trong một bảng màu có tính gắn kết áp dụng được trong chủ đề có hộp chọn bảng màu. Bạn có thể có tối đa 21 bảng màu. Bạn cũng có thể xem trước cách màu sắc hiển thị trong bản xem trước của bảng màu.

Cài đặt	Mô tả
Nền	Màu được áp dụng cho nền của một số mục và nền của nút viền ngoài.
Nền chuyển màu	Hiệu ứng chuyển màu được áp dụng cho nền của một số mục. Nền chuyển màu sẽ thay thế nền nếu có thể.
Văn bản	Màu được áp dụng cho chữ trong mục hoặc khối.
Nền nút đặc	Màu được áp dụng cho nền nút chính.
Nhãn nút đặc	Màu được áp dụng cho chữ trên nút chính.
Nút viền ngoài	Màu được áp dụng cho chữ và đường viền của nút phụ.
Đổ bóng	Màu được áp dụng cho bóng đổ.

Quản lý bảng màu

Bảng màu và các tùy chọn màu của cửa hàng được thiết lập trong phần cài đặt chủ đề. Đối với màu đồng nhất, sử dụng hộp chọn màu để chọn màu mới hoặc nhập giá trị của màu vào trường văn bản. Trường màu chấp nhận những tên và giá trị màu sau:

• tên màu ví dụ như red, black, hoặc blue
• Mã màu RGB
• giá trị màu thập lục phân

Các bước thực hiện:

1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
2. Nhấp vào Tùy chỉnh bên cạnh chủ đề bạn muốn tùy chỉnh.
3. Nhấp vào biểu tượng bánh răng, sau đó nhấp vào Màu.
4. Trong mục Bảng màu, nhấp vào bảng màu hiện có hoặc nhấp vào Thêm bảng màu để thêm bảng màu mới.
5. Nhấp vào mẫu màu của màu loại nội dung bạn muốn thay đổi.
6. Để cài đặt màu, hãy nhập mã màu hệ thập lục phân hoặc chọn màu trong hộp chọn màu. Để đặt màu trong suốt, xóa mã thập lục phân khỏi trường văn bản.
7. Nhấp vào Save (Lưu).

Áp dụng bảng màu

Sau khi xác định bảng màu trong cài đặt chủ đề, bạn có thể chỉ định bảng màu bằng hộp chọn bảng màu trong các mục và khối của chủ đề. Hộp chọn bảng màu chỉ có trong một số mục, khối nhất định và phần cài đặt chủ đề chung.

Hiệu ứng chuyển màu

Bạn có thể thiết lập hiệu ứng chuyển màu trong một số chủ đề cho các tùy chọn nền vui mắt. Cài đặt color_background được sử dụng để tùy chỉnh thuộc tính nền CSS.

Mẹo

Để tìm hiểu thêm về hiệu ứng chuyển màu và nền CSS, tham khảo tài liệu hiệu ứng chuyển màu tuyến tính và nền CSS của Mozilla.

Hộp chọn hiệu ứng chuyển màu cho phép bạn chọn màu, kiểu chuyển màu, góc, vị trí và độ chắn sáng của hiệu ứng chuyển màu. Các tùy chọn đã chọn trong hộp chọn hiệu ứng chuyển màu được xem trước theo thời gian thực trong trình biên tập chủ đề. Bạn cũng có thể tạo nền chuyển màu bằng mã CSS, bao gồm trình kiểm tra xác thực.

Thiết lập chuyển màu

1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
2. Nhấp vào Tùy chỉnh bên cạnh chủ đề bạn muốn tùy chỉnh.
3. Nhấp vào biểu tượng bánh răng, sau đó nhấp vào Màu.
4. Trong mục Bảng màu, nhấp vào bảng màu hiện có mà bạn muốn chỉnh sửa.
5. Nhấp vào tùy chọn mẫu màu chuyển sắc, ví dụ như Nền chuyển màu.
6. Nếu chưa thiết lập hiệu ứng chuyển màu, bạn có thể lựa chọn từ một số tùy chọn đặt sẵn được hiển thị. Chọn hiệu ứng chuyển màu đặt sẵn bất kỳ để mở bảng tùy chọn.
7. Chọn tùy chọn chuyển màu:

• Chọn giữa hiệu ứng chuyển màu tuyến tính hoặc tỏa tròn. Sử dụng các nút để chọn kiểu chuyển màu ưa thích.
• Đặt góc chuyển màu bằng mũi tên lên xuống. Nhấp vào mũi tên lên hoặc xuống sẽ làm tăng hoặc giảm 5 phần trăm góc.
• Sử dụng thanh trượt để chọn vị trí chuyển màu hoặc nhập giá trị số vào trường.
• Nhập mã thập lục phân màu cụ thể hoặc sử dụng thanh trượt màu để chọn một màu. Các màu được chọn gần đây hiển thị ở cuối bảng tùy chọn chuyển màu.
• Để làm mờ hiệu ứng chuyển màu, sử dụng thanh trượt ở bên phải để chọn độ trong suốt của hiệu ứng chuyển màu. Bạn cũng có thể nhập tỷ lệ phần trăm vào trường bên cạnh mã màu thập lục phân.

1. Nhấp vào Save (Lưu).

Sử dụng CSS để cài đặt hiệu ứng chuyển màu

Bạn có thể sử dụng hầu hết các giá trị thuộc tính background CSS để đặt màu nền. Bạn có thể dùng trường này cho màu đồng nhất (ví dụ như #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) và hsla(0, 0%, 0%, 1) đều sẽ tạo ra nền đen đồng nhất) hoặc cho chuyển màu (ví dụ như linear-gradient(red, green), radial-gradient(red, green), hoặc conic-gradient(red, green)). Hiệu ứng chuyển màu cũng có thể lặp lại.

Các bước thực hiện:

1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
2. Nhấp vào Tùy chỉnh bên cạnh chủ đề bạn muốn tùy chỉnh.
3. Nhấp vào biểu tượng bánh răng, sau đó nhấp vào Màu.
4. Trong mục Bảng màu, nhấp vào bảng màu hiện có mà bạn muốn chỉnh sửa.
5. Nhấp vào hiệu ứng chuyển màu bạn muốn chỉnh sửa.
6. Nhấp vào mũi tên bên cạnh Hiệu ứng chuyển màu, sau đó chọn CSS.
7. Trong trường mã CSS, nhập hoặc dán mã chuyển màu. Bản xem trước của trình biên tập chủ đề hiển thị hiệu ứng chuyển màu ở vị trí phù hợp.
8. Nhấp vào Save (Lưu).

Xóa hiệu ứng chuyển màu

1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
2. Nhấp vào Tùy chỉnh bên cạnh chủ đề bạn muốn tùy chỉnh.
3. Nhấp vào biểu tượng bánh răng, sau đó nhấp vào Màu.
4. Trong mục Bảng màu, nhấp vào bảng màu hiện có mà bạn muốn chỉnh sửa.
5. Nhấp vào hiệu ứng chuyển màu bạn muốn xóa.
6. Nhấp vào Xóa hiệu ứng chuyển màu.
7. Nhấp vào Save (Lưu).