Tùy Chỉnh Cửa Hàng của Bạn với CSS Tùy Chỉnh và Trợ Lý Mã AI

CSS Tùy chỉnh cho phép các thương nhân có kỹ năng lập trình tinh chỉnh giao diện cửa hàng của họ vượt ra ngoài các cài đặt chủ đề tích hợp sẵn, cả ở cấp độ chủ đề toàn cục và cấp độ thành phần riêng lẻ. Bạn có thể tự viết CSS hoặc sử dụng Trợ lý Mã AI để tạo mã dựa trên mô tả bằng ngôn ngữ đơn giản về thay đổi bạn muốn.

Hướng dẫn này giải thích các giới hạn áp dụng cho CSS Tùy chỉnh, cách thêm CSS thủ công, cách tạo CSS với Trợ lý Mã AI, và cách xóa CSS bạn đã thêm.

Hiểu về các Giới hạn của CSS Tùy chỉnh

Trước khi thêm CSS Tùy chỉnh, hãy lưu ý các hạn chế sau — chúng áp dụng cho dù bạn tự viết CSS hay tạo nó bằng Trợ lý Mã AI:

• Các quy tắc @: 
  • CSS cấp thành phần hoàn toàn cấm các quy tắc @.
  • CSS toàn chủ đề chỉ cho phép: @color-profile, @font-face, @counter-style, @font-feature-values, @font-palette-values, @keyframes, @page, @property.
• Hạn chế URL: Chỉ cho phép URL từ miền https://*.myshopline.com.
• Giới hạn ký tự: 
  • CSS toàn chủ đề giới hạn tối đa 1.500 ký tự.
  • CSS cấp thành phần giới hạn tối đa 500 ký tự.

Thêm CSS Tùy chỉnh Thủ công

Để thêm CSS Tùy chỉnh ở cấp độ toàn chủ đề hoặc thành phần:

1. Đi tới Cửa hàng trực tuyến > Thiết kế và nhấp vào Thiết kế trong module Giao diện hiện tại.
2. Chọn nơi để thêm CSS của bạn:
   • Toàn bộ giao diện: Nhấp vào biểu tượng Cài đặt giao diện, sau đó mở module CSS tùy chỉnh.
     
   • Cấp độ thành phần: Chọn thành phần bạn muốn tạo kiểu, sau đó mở module CSS tùy chỉnh.
     
3. Nhập mã CSS của bạn và nhấp Lưu để áp dụng các thay đổi.

Tạo CSS tùy chỉnh với Trợ lý mã AI

Trợ lý mã AI chỉ có sẵn trong các giao diện OS 3.0. Nếu cửa hàng của bạn đang sử dụng giao diện OS 2.1, biểu tượng này sẽ không xuất hiện trong trình chỉnh sửa giao diện của bạn — bạn vẫn có thể thêm CSS tùy chỉnh thủ công như mô tả ở trên.

Thay vì tự viết CSS, bạn có thể mô tả thay đổi kiểu dáng bạn muốn bằng ngôn ngữ đơn giản và để Trợ lý mã AI tạo mã cho bạn.

Nơi tìm Trợ lý mã AI

Trong trình chỉnh sửa giao diện (Cửa hàng trực tuyến > Thiết kế > Giao diện của tôi), biểu tượng Trợ lý mã AI xuất hiện ở ba vị trí:

• Bên cạnh tiêu đề trang: Nằm cạnh tên trang bạn đang xem (ví dụ: Trang chủ), ở đầu thanh bên trái.
  
• Bên cạnh tiêu đề thành phần: Tìm thấy bên cạnh tiêu đề của các phần hoặc thành phần cụ thể trong thanh bên trái (ví dụ: bên cạnh Trình chiếu hoặc Biểu ngữ hình ảnh).
• Bên cạnh cài đặt CSS tùy chỉnh: Hiển thị bên cạnh tiêu đề CSS tùy chỉnh trong bảng cài đặt cho một trang hoặc thành phần.
  

Sử dụng Trợ lý Mã AI để Tạo CSS

Để tạo CSS với Trợ lý Mã AI:

1. Chọn trang hoặc thành phần bạn muốn điều chỉnh trong thanh bên trình chỉnh sửa chủ đề.
2. Nhấp vào biểu tượng Trợ lý Mã AI bên cạnh tiêu đề của trang hoặc thành phần đã chọn.
3. Mô tả thay đổi phong cách cửa hàng bạn muốn thực hiện theo cách hội thoại (ví dụ: "Làm cho văn bản tiêu đề sản phẩm màu xanh").
4. Trợ lý sẽ xuất ra mã CSS tương ứng.
5. Nhấp Áp dụng. Mã sẽ tự động được điền vào trường CSS Tùy chỉnh và hiển thị bản xem trước.
6. Nhấp Lưu trong trình chỉnh sửa chủ đề để xuất bản các thay đổi lên chủ đề của bạn.

Ví dụ về Trường hợp Sử dụng

Dưới đây là ví dụ về cách bạn có thể sử dụng Trợ lý Mã AI để điều chỉnh kiểu dáng của một thành phần cửa hàng. Trong trường hợp này, chúng ta sẽ làm cho tiêu đề thành phần Sản phẩm được đề xuất (ví dụ: "Bạn cũng có thể thích") lớn hơn, căn trái và màu hồng trên trang chi tiết sản phẩm:

1. Từ bảng quản trị SHOPLINE của bạn, đi tới Cửa hàng trực tuyến > Thiết kế > tab Chủ đề của tôi, sau đó nhấp Thiết kế để vào trình chỉnh sửa chủ đề.
2. Đi tới trang Sản phẩm và chọn thành phần Sản phẩm được đề xuất.
3. Mở Trợ lý Mã AI bằng cách nhấp vào biểu tượng tính năng, nhập: "Tăng kích thước phông chữ tiêu đề thành phần, căn trái và đổi màu thành màu hồng," sau đó nhấp Tạo.
   
4. Trợ lý Mã AI tự động tạo mã CSS. Xem lại mã, sau đó nhấp Áp dụng để áp dụng vào trường CSS Tùy chỉnh.
   
5. Mã CSS được tạo sẽ tự động được áp dụng vào trường CSS Tùy chỉnh. Xem trước thay đổi, sau đó nhấp Lưu để xuất bản cập nhật nếu mọi thứ trông ổn.
   

Xóa CSS Tùy chỉnh

Để xóa CSS Tùy chỉnh mà bạn đã thêm — dù bạn viết thủ công hay tạo ra bằng Trợ lý Mã AI:

1. Đi tới Cửa hàng trực tuyến > Thiết kế > Chủ đề của tôi.
2. Mở phần CSS Tùy chỉnh nơi mã đã được áp dụng.
3. Xóa khối mã bạn muốn loại bỏ.
4. Nhấp vào Lưu.