Trợ giúp
Đăng nhập

Thêm CSS tùy chỉnh vào chủ đề

Cascading style sheet (CSS) thay đổi cách hiển thị các phần tử trong chủ đề và có thể kiểm soát giao diện của nhiều trang cùng một lúc. Bạn có thể dùng tính năng CSS tùy chỉnh để điều chỉnh chủ đề vượt ngoài phạm vi của các cài đặt tích hợp sẵn. Ví dụ: bạn có thể dùng CSS để thiết lập dải màu trong cài đặt màu sắc của chủ đề. Bạn có thể thêm CSS tùy chỉnh vào toàn bộ chủ đề hoặc vào một mục cụ thể của mẫu trong chủ đề. CSS tùy chỉnh không được hỗ trợ trên trang Thanh toán.

Tùy chỉnh CSS yêu cầu bạn phải có kiến thức nhất định về CSS và HTML. Trước khi tùy chỉnh chủ đề, hãy đảm bảo bạn hiểu rõ mức độ hỗ trợ hiện có.

Trên trang này

Lưu ý khi sử dụng CSS tùy chỉnh

Trước khi thêm CSS tùy chỉnh vào chủ đề, hãy xem lại các lưu ý sau:

  • Các bộ chọn và thuộc tính CSS sau đây không được hỗ trợ trong CSS tùy chỉnh:
    • Không thể sử dụng at-rule @import, @charset và @namespace
    • Đối với CSS cấp độ mục, chỉ được phép sử dụng at-rule @media, @container, @layer và @supports
    • Đối với CSS cấp độ mục, bạn không thể nhắm mục tiêu ID hoặc class của phần tử bao bọc Shopify Section do chủ đề kết xuất bằng class shopify-section
    • Thuộc tính content không dùng được trong CSS tùy chỉnh
  • Nếu một quy tắc CSS tùy chỉnh được khai báo với thẻ bao bọc phần tử mục cha, thẻ đó được coi là thẻ con và quy tắc tạo kiểu sẽ được áp dụng cho mục đó. Lưu ý rằng theo mặc định, mục cha được bao bọc trong thẻ <div>, nhưng nhà phát triển chủ đề có thể thay đổi thẻ này thành bất kỳ giá trị được phép nào trong lược đồ của mục.
  • Hiện tại, chỉ có miền https://cdn.shopify.com được phép sử dụng khi dùng URL trong CSS tùy chỉnh.
  • Phông chữ tùy chỉnh không bị hạn chế. Tuy nhiên, phông chữ tùy chỉnh là tài nguyên riêng biệt mà trình duyệt tải về trước khi kết xuất văn bản, điều này có thể ảnh hưởng đến hiệu suất tổng thể của cửa hàng. Bạn có trách nhiệm đảm bảo phông chữ tùy chỉnh không gây ảnh hưởng tiêu cực đến cửa hàng trực tuyến. Tìm hiểu cách sử dụng phông chữ tùy chỉnh trong chủ đề.
  • Quy tắc CSS ảnh hưởng đến toàn bộ chủ đề được giới hạn ở mức 1.500 ký tự.
  • Quy tắc CSS ảnh hưởng đến một mục cụ thể được giới hạn ở mức 500 ký tự.
  • Tùy thuộc vào bộ chọn hoặc class CSS bạn sử dụng, việc cập nhật chủ đề có thể khiến CSS tùy chỉnh ngừng hoạt động.

Shopify không hỗ trợ các tùy chỉnh chủ đề nâng cao. Nếu gặp lỗi liên quan đến các giới hạn này trong CSS tùy chỉnh và không thể xác định nguyên nhân, hãy tham khảo danh sách các tài nguyên hỗ trợ khác hiện có.

Thêm CSS tùy chỉnh

Bạn có thể thêm CSS tùy chỉnh vào toàn bộ chủ đề để tác động đến tất cả các trang trong cửa hàng trực tuyến, ngoại trừ trang Thanh toán. Ví dụ: bạn có thể thay đổi cách hiển thị nút trên toàn cửa hàng.

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

  1. Trong trang quản trị Shopify, vào Cửa hàng trực tuyến > Chủ đề.

  2. Nhấp vào Chỉnh sửa chủ đề.

  3. Nhấp vào Cài đặt chủ đề.

  4. Nhấp vào CSS tùy chỉnh.

  5. Thêm mã.

  6. Nhấp vào Lưu.

Vị trí hộp CSS tùy chỉnh trong cài đặt chủ đề

Bạn cũng có thể thêm CSS tùy chỉnh vào một mục cụ thể trong chủ đề. Nếu thêm CSS tùy chỉnh vào một mục trong chủ đề, CSS đó sẽ chỉ áp dụng trong phạm vi mục đó. Ví dụ: bạn có thể áp dụng kích thước phông chữ tùy chỉnh hoặc màu nền cho một mục duy nhất.

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

  1. Trong trang quản trị Shopify, vào Cửa hàng trực tuyến > Chủ đề.

  2. Nhấp vào Chỉnh sửa chủ đề.

  3. Nhấp vào mục bạn muốn thêm CSS.

  4. Ở cuối bảng điều khiển thuộc tính mục, nhấp vào CSS tùy chỉnh.

  5. Thêm mã.

  6. Nhấp vào Lưu.

Vị trí hộp CSS tùy chỉnh trong cài đặt mục

Tài nguyên bổ sung về CSS

Tùy chỉnh CSS yêu cầu bạn phải có kiến thức nhất định về CSS và HTML. Trước khi tùy chỉnh chủ đề, hãy đảm bảo bạn hiểu rõ mức độ hỗ trợ hiện có.

Nếu muốn tìm hiểu thêm về CSS, bạn có thể tham khảo một số tài nguyên sau: