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

Trang này được in vào May 10, 2024. Để 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/extend/add-css?utm_campaign=social_care&utm_medium=community&utm_source=social.

Bảng tính kiểu xếp tầng (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ể tùy chỉnh chủ đề vượt ngoài khuôn khổ cài đặt được tích hợp trong chủ đề bằng cách sử dụng tính năng CSS tùy chỉnh. 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.

Việc tùy chỉnh CSS đòi hỏi phải có sự am hiểu về CSS và HTML. Trước khi tùy chỉnh chủ đề, hãy đảm bảo rằng bạn hiểu đúng mức độ hỗ trợ hiện có.

Những 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 cân nhắc những điều sau:

Các hộp chọn 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ỉ cho phép 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 vào ID hoặc các lớp của phần tử Shopify Section bao quanh được kết xuất bởi chủ đề có lớp shopify-section
Nếu một quy tắc CSS tùy chỉnh được khai báo bằng thẻ bao quanh phần tử mục cha mẹ thì quy tắc này sẽ được coi là thẻ con cháu và quy tắc chọn kiểu sẽ áp dụng cho mục đó. Lưu ý rằng theo mặc định, mục cha mẹ được bao quanh trong thẻ <div> , nhưng nhà phát triển chủ đề có thể đặt thành bất kỳ giá trị được phép nào trong lược đồ mục.
Hiện tại, chỉ miền https://cdn.shopify.com mới được cho phép khi sử 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 được trình duyệt tải xuống trước khi kết xuất văn bản, đồng thời 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 cửa hàng của mình không bị ảnh hưởng xấu bởi phông chữ tùy chỉnh. 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ủ đề bị giới hạn trong 1500 ký tự.
Quy tắc CSS ảnh hưởng đến một mục cụ thể bị giới hạn trong 500 ký tự.
Tùy thuộc vào hộp chọn CSS hoặc lớp 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ợ tùy chỉnh chủ đề nâng cao. Nếu bạn gặp lỗi liên quan đến những giới hạn này trong CSS tùy chỉnh và không thể xác định nguyên nhân gây ra lỗi, hãy tham khảo danh sách tài liệu hỗ trợ có sẵn khác.