Bảng màu

Trang này được in vào Mar 22, 2023. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/online-store/themes/theme-structure/color-scheme.

Các mục khác nhau trong chủ đề, ví dụ như Văn bản đa dạng thức, Biểu ngữ hình ảnh và Danh sách bộ sưu tập, cho phép bạn chọn bảng màu để sử dụng cho mục đó từ những màu bạn đã đặt trong mục cài đặt chủ đề. Chủ đề của bạn sẽ áp dụng bảng màu mặc định, có thể thay đổi bất kỳ lúc nào trong trình biên tập chủ đề. Thêm màu sắc của 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 màu

Bạn có thể cài đặt nền hình ảnh và vùng đệm ảnh trong trình biên tập chủ đề. Sử dụng menu thả xuống để chọn giữa Điểm nhấn 1, Hiệu ứng chuyển màu của Điểm nhấn 1, Điểm nhấn 2, Hiệu ứng chuyển màu của Điểm nhấn 2, Nền 1, Hiệu ứng chuyển màu của Nền 1, Nền 2, Hiệu ứng chuyển màu của Nền 2, hoặc Nghịch đảo. Bạn có thể xem trước bảng màu đã chọn trong bảng xem trước của trình biên tập chủ đề.

Cài đặt Mô tả
Văn bản Có thể áp dụng màu cho mục hoặc văn bản khối.
Điểm nhấn 1 Có thể dùng màu cho các nút tạo ảnh hưởng và nền của một số mục.
Hiệu ứng chuyển màu của Điểm nhấn 1 Chọn một hiệu ứng chuyển màu đặt sẵn hoặc sử dụng hộp chọn hiệu ứng chuyển màu để tùy chỉnh hiệu ứng chuyển màu nhấn.
Điểm nhấn 2 Có thể dùng màu cho các nút tạo ảnh hưởng và nền của một số mục.
Hiệu ứng chuyển màu của Điểm nhấn 2 Chọn một hiệu ứng chuyển màu đặt sẵn hoặc sử dụng hộp chọn hiệu ứng chuyển màu để tùy chỉnh hiệu ứng chuyển màu nhấn.
Nền 1 Có thể dùng màu cho các nút tạo ảnh hưởng và nền của một số mục.
Hiệu ứng chuyển màu của Nền 1 Chọn một hiệu ứng chuyển màu đặt sẵn hoặc sử dụng hộp chọn hiệu ứng chuyển màu để tùy chỉnh hiệu ứng chuyển màu nền của bạn.
Nền 2 Có thể dùng màu cho các nút tạo ảnh hưởng và nền của một số mục.
Hiệu ứng chuyển màu của Nền 2 Chọn một hiệu ứng chuyển màu đặt sẵn hoặc sử dụng hộp chọn hiệu ứng chuyển màu để tùy chỉnh hiệu ứng chuyển màu nền của bạn.
Nghịch đảo Có thể dùng màu cho các nút tạo ảnh hưởng và nền của một số mục. Sử dụng Nền 1 làm màu chữ và dùng màu chữ làm màu nền

Một số cài đặt cho phép bạn chọn bảng màu cũng cho phép bạn sử dụng hiệu ứng chuyển màu. Ví dụ: Trong chủ đề Dawn, bạn có thể thiết lập hiệu ứng chuyển màu của màu sắc thương hiệu và sử dụng thay cho tùy chọn màu nhấn và màu nền tiêu chuẩn.

Quản lý bảng màu

Bảng màu của cửa hàng được cài đặt trong cài đặt chủ đề.

  1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa và nhấp vào Customize (Tùy chỉnh).
  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn vào Manage themes (Quản lý chủ đề).
  4. Tìm chủ đề bạn muốn chỉnh sửa và chạm vào Customize (Tùy chỉnh).
  5. Chạm vào Edit (Chỉnh sửa).
  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn vào Manage themes (Quản lý chủ đề).
  4. Tìm chủ đề bạn muốn chỉnh sửa và chạm vào Customize (Tùy chỉnh).
  5. Chạm vào Edit (Chỉnh sửa).
  1. Nhấp vào Cài đặt chủ đề.
  2. Nhấp vào Colors (Màu sắc).
  3. Để thay đổi màu trong chủ đề, nhấp vào màu và sử dụng hộp chọn màu hoặc nhập giá trị của màu mới vào trường văn bản.
  4. Nhấp vào Save (Lưu).

Đố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 này chấp nhận tên màu (ví dụ: red, black, blue), RGB hoặc giá trị màu thập lục phân.

Hiệu ứng chuyển màu

Bạn có thể thiết lập hiệu ứng chuyển màu trong Dawn 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.

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. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa và nhấp vào Customize (Tùy chỉnh).
  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn vào Manage themes (Quản lý chủ đề).
  4. Tìm chủ đề bạn muốn chỉnh sửa và chạm vào Customize (Tùy chỉnh).
  5. Chạm vào Edit (Chỉnh sửa).
  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn vào Manage themes (Quản lý chủ đề).
  4. Tìm chủ đề bạn muốn chỉnh sửa và chạm vào Customize (Tùy chỉnh).
  5. Chạm vào Edit (Chỉnh sửa).
  1. Nhấp vào Theme settings (Cài đặt chủ đề).
  2. Nhấp vào Colors (Màu sắc).

  3. Chọn một tùy chọn hiệu ứng chuyển màu.

  4. Chọn tùy chọn chuyển màu:

  • Bạn có thể 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.
  • Có thể đặt góc chuyển màu bằng mũi tên lên xuống. Nhấp vào biểu tượng 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.
  • Bạn có thể 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.
  • Nếu bạn muốn hiệu ứng chuyển màu mờ, 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).

Hộp chọn hiệu ứng chuyển màu trong trình biên tập chủ đề

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. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa và nhấp vào Customize (Tùy chỉnh).
  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn vào Manage themes (Quản lý chủ đề).
  4. Tìm chủ đề bạn muốn chỉnh sửa và chạm vào Customize (Tùy chỉnh).
  5. Chạm vào Edit (Chỉnh sửa).
  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn vào Manage themes (Quản lý chủ đề).
  4. Tìm chủ đề bạn muốn chỉnh sửa và chạm vào Customize (Tùy chỉnh).
  5. Chạm vào Edit (Chỉnh sửa).
  1. Nhấp vào Theme settings (Cài đặt chủ đề).
  2. Nhấp vào Colors (Màu sắc).
  3. Nhấp vào hiệu ứng chuyển màu bạn muốn chỉnh sửa.
  4. Nhấp vào mũi tên bên cạnh Hiệu ứng chuyển màu và chọn CSS.
  5. 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.
  6. Nhấp vào Save (Lưu).
    Gradient CSS Code field in the theme editor

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

Để đặt lại hoặc xóa hiệu ứng chuyển màu:

  1. Trong phần Shopify admin (Quản trị viên Shopify), vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa và nhấp vào Customize (Tùy chỉnh).
  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn vào Manage themes (Quản lý chủ đề).
  4. Tìm chủ đề bạn muốn chỉnh sửa và chạm vào Customize (Tùy chỉnh).
  5. Chạm vào Edit (Chỉnh sửa).
  1. Trong ứng dụng Shopify, chạm vào Cửa hàng.
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn vào Manage themes (Quản lý chủ đề).
  4. Tìm chủ đề bạn muốn chỉnh sửa và chạm vào Customize (Tùy chỉnh).
  5. Chạm vào Edit (Chỉnh sửa).
  1. Nhấp vào Theme settings (Cài đặt chủ đề).
  2. Nhấp vào Colors (Màu sắc).
  3. Nhấp vào hiệu ứng chuyển màu bạn muốn chỉnh sửa.
  4. Nhấp vào Xóa hiệu ứng chuyển màu
  5. Nhấp vào Save (Lưu).

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí