Thiết Kế Trang Danh Sách Bộ Sưu Tập Trong Trình Chỉnh Sửa Giao Diện (Chủ Đề OS 3.0)

Trang danh sách Bộ sưu tập là nơi khách hàng duyệt qua mọi bộ sưu tập sản phẩm trong cửa hàng của bạn, giúp họ nhanh chóng khám phá danh mục theo từng loại. Trong Trình chỉnh sửa Chủ đề cho các chủ đề OS 3.0, bạn có thể tùy chỉnh tiêu đề trang này, chọn bộ sưu tập hiển thị, sắp xếp cách bố trí các thẻ bộ sưu tập và kiểm soát kiểu hình ảnh được sử dụng cho mỗi thẻ.

Hướng dẫn này giải thích cách cấu hình tiêu đề trang, chọn và sắp xếp các bộ sưu tập của bạn, cũng như tùy chỉnh hiển thị hình ảnh và tên bộ sưu tập.

Điều hướng đến Trang danh sách Bộ sưu tập trong Trình chỉnh sửa Chủ đề

Để mở Trang danh sách Bộ sưu tập trong Trình chỉnh sửa Chủ đề:

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ế, sau đó nhấp vào nút Thiết kế trên chủ đề OS 3.0 mà bạn muốn chỉnh sửa.
2. Ở đầu Trình chỉnh sửa Chủ đề, nhấp vào bộ chọn trang và chọn Danh sách Bộ sưu tập từ danh sách các loại trang.

Thanh bên trái được tổ chức thành ba nhóm: đầu trang và chân trang, được chia sẻ trên mọi trang trong cửa hàng của bạn, và Mẫu, chứa các thành phần đặc thù cho trang bạn đang chỉnh sửa. Đối với trang Danh sách Bộ sưu tập, Mẫu chứa thành phần Danh sách Bộ sưu tập được đề cập trong toàn bộ hướng dẫn này.

Cấu hình Tiêu đề Trang trên Trang Danh sách Bộ sưu tập

Để cấu hình tiêu đề trang:

1. Trong thanh bên trái, dưới Mẫu > Danh sách Bộ sưu tập, nhấp vào Tiêu đề.
2. Trong bảng cài đặt, cập nhật các mục sau:
   • Tiêu đề: Văn bản tiêu đề hiển thị ở đầu trang (mặc định là "Tất cả Bộ sưu tập").

   • Nhãn văn bản: Đặt thẻ tiêu đề SEO được sử dụng cho tiêu đề này (ví dụ: H2).

     Lưu ý: Cài đặt Nhãn văn bản chỉ dành cho mục đích SEO, nó không thay đổi cách tiêu đề hiển thị trên cửa hàng của bạn.

• Kiểu chữ: Đặt kiểu phông chữ hiển thị của tiêu đề (ví dụ: Tiêu đề 3).
• Căn chỉnh văn bản: Căn tiêu đề sang trái, giữa hoặc phải trên máy tính để bàn.
• Căn chỉnh văn bản (di động): Đặt căn chỉnh riêng cho thiết bị di động.
• Nền: Thêm màu nền phía sau tiêu đề (mặc định: không có màu).

3. Nhấp Lưu để áp dụng các thay đổi của bạn.

Cấu hình Thẻ Bộ sưu tập trên Trang Danh sách Bộ sưu tập

Khối Thẻ Bộ sưu tập nằm dưới Danh sách Bộ sưu tập trong Trình chỉnh sửa Chủ đề và kiểm soát bộ sưu tập nào xuất hiện, cách chúng được sắp xếp, và cách hiển thị hình ảnh cùng tên của mỗi thẻ. Phần này bao gồm việc chọn bộ sưu tập, sắp xếp bố cục thẻ, và tùy chỉnh hiển thị hình ảnh và tên bộ sưu tập.

Chọn Bộ sưu tập Hiển thị 

Để chọn bộ sưu tập hiển thị trong lưới: 

1. Trong thanh bên trái, mở rộng Danh sách Bộ sưu tập > Thẻ Bộ sưu tập.
2. Trong bảng cài đặt, nhấp vào + Chọn bộ sưu tập sản phẩm.
3. Trong trình chọn, chọn các bộ sưu tập bạn muốn hiển thị, sau đó nhấp Xong.

Dưới Thẻ Bộ sưu tập, bạn cũng có thể bật hoặc tắt Kế thừa bảng màu để kiểm soát việc các thẻ có sử dụng bảng màu áp dụng cho phần còn lại của trang hay không.

Sắp xếp Bố cục Thẻ Bộ sưu tập 

Bên cạnh việc chọn bộ sưu tập nào để hiển thị, bạn có thể kiểm soát cách các thẻ bộ sưu tập được sắp xếp trên trang — hướng, khoảng cách và căn chỉnh của chúng — bằng cách sử dụng tab Bố cục.

Để điều chỉnh cách các thẻ bộ sưu tập được sắp xếp:

1. Chọn Thẻ bộ sưu tập trong thanh bên, sau đó mở tab Bố cục trong bảng cài đặt.
2. Cấu hình các tùy chọn sau:

   • Hướng

     Tùy chọn	Hiệu ứng
     Cột	Các thẻ bộ sưu tập xếp chồng theo chiều dọc, lần lượt từ trên xuống dưới.
     Dòng	Các thẻ bộ sưu tập xếp hàng theo chiều ngang, cạnh nhau.

• Tự động xuống dòng

  Tùy chọn	Hiệu ứng
  Bật	Các thẻ không vừa trong một hàng sẽ tự động chuyển sang dòng tiếp theo.
  Tắt	Tất cả các thẻ giữ nguyên trong một hàng hoặc cột, ngay cả khi chúng tràn ra ngoài khu vực hiển thị.

• Căn chỉnh

  Tùy chọn	Hiệu ứng
  Bắt đầu	Các thẻ căn chỉnh về phía đầu hàng hoặc cột
  Giữa	Các thẻ căn giữa.
  Kết thúc	Các thẻ căn về phía cuối.
  Kéo giãn	Các thẻ kéo giãn để lấp đầy không gian có sẵn.

• Căn đều

  Tùy chọn	Hiệu ứng
  Bắt đầu	Các thẻ được nhóm về phía đầu của vùng chứa, với khoảng trống thêm sau thẻ cuối cùng.
  Giữa	Các thẻ được căn giữa, với khoảng cách đều hai bên.
  Kết thúc	Các thẻ được nhóm về phía cuối, với khoảng trống thêm trước thẻ đầu tiên.

• Khoảng cách

  Tùy chọn	Hiệu ứng
  Dòng	Đặt khoảng cách dọc (tính bằng pixel) giữa các hàng thẻ.
  Cột	Đặt khoảng cách ngang (tính bằng pixel) giữa các cột thẻ.

Cấu hình Hình ảnh Bộ sưu tập 

Để tùy chỉnh cách hiển thị hình ảnh bộ sưu tập:

1. Dưới Thẻ bộ sưu tập, nhấp vào Hình ảnh bộ sưu tập.
2. Trong bảng cài đặt, cấu hình:
   • Tỷ lệ hình ảnh bộ sưu tập: Chọn tỷ lệ khung hình cho mỗi hình ảnh bộ sưu tập — 1:1, 4:3, hoặc 2:3.
   • Phương pháp điền hình ảnh: Chọn Điền để cắt hình ảnh vừa với tỷ lệ, hoặc Vừa khung để hiển thị toàn bộ hình ảnh trong khung.
   • Hình dạng hình ảnh bộ sưu tập: Chọn Hình vuông hoặc Hình tròn.
   • Khu vực hiển thị hình ảnh: Chọn điểm neo của điểm trọng tâm hình ảnh — Giữa, Phía trên, Phía trên bên phải, Phía trên bên trái, Bên trái, Bên phải, Phía dưới bên trái, Phía dưới bên phải, hoặc Phía dưới.
3. Nhấp Lưu để áp dụng thay đổi của bạn.

Hiển thị Tên Bộ sưu tập 

Tên bộ sưu tập có thể xuất hiện ở hai vị trí trên mỗi thẻ: như một lớp phủ trên hình ảnh bộ sưu tập, hoặc như một chú thích bên dưới. Cả hai vị trí đều sử dụng cùng một cài đặt.

Để thêm hoặc chỉnh sửa tên bộ sưu tập: 

1. Dưới Hình ảnh bộ sưu tập, nhấp vào + Thêm tên bộ sưu tập để thêm tên làm lớp phủ trên hình ảnh, hoặc chọn khối Tên bộ sưu tập hiện có bên dưới Hình ảnh bộ sưu tập để chỉnh sửa phiên bản chú thích.
2. Trong bảng cài đặt, cấu hình:
   • Tiêu đề bộ sưu tập: Nhập văn bản để hiển thị cho tên bộ sưu tập.

   • Nhãn văn bản: Đặt thẻ tiêu đề SEO cho văn bản này (ví dụ: H2).

     Lưu ý: Cài đặt Nhãn văn bản chỉ dành cho mục đích SEO, nó không thay đổi cách tên bộ sưu tập hiển thị trên cửa hàng của bạn.

• Kiểu chữ: Đặt kiểu phông chữ hiển thị (ví dụ: Body 3).
• Căn chỉnh văn bản: Căn văn bản sang trái, giữa hoặc phải.

3. Nhấp Lưu để áp dụng các thay đổi của bạn.

Cài đặt Bảng màu 

Để thay đổi bảng màu áp dụng cho các thẻ bộ sưu tập:

1. Chọn Danh sách bộ sưu tập trong thanh bên.
2. Dưới Màu sắc, nhấp Thay đổi để chọn bảng màu khác, hoặc Chỉnh sửa để sửa đổi bảng màu hiện tại.
3. Nhấp Lưu để áp dụng các thay đổi của bạn.

Thêm Bộ Lọc Đa Cấp vào Trang Danh Sách Bộ Sưu Tập

Bạn có thể tùy chọn thêm một thành phần Bộ lọc đa cấp để giúp khách hàng thu hẹp bộ sưu tập theo sản phẩm, thương hiệu hoặc loại dịch vụ, hữu ích nếu cửa hàng của bạn có số lượng bộ sưu tập lớn.

Phần Bộ lọc đa cấp hiển thị tiêu đề và tiêu đề phụ, lên đến vài menu thả xuống bộ lọc, một nút Tìm kiếm, và một hàng các liên kết danh mục truy cập nhanh (ví dụ, "Mua theo Sản phẩm," "Mua theo Thương hiệu," hoặc "Mua theo Loại Dịch vụ") bên dưới.

Để thêm một Bộ lọc đa cấp:

1. Trong thanh bên trái, dưới mục Mẫu, nhấp vào Thêm thành phần và chọn Bộ lọc đa cấp.
2. Trong bảng cài đặt, cấu hình:
   • Màu sắc: Chọn một bảng màu, hoặc nhấp vào Chỉnh sửa để thay đổi bảng màu hiện tại.
   • Hình nền: Nhấp vào + Thêm hình ảnh để đặt hình nền cho phần bộ lọc.
   • Độ mờ mặt nạ lớp: Điều chỉnh thanh trượt hoặc nhập phần trăm để kiểm soát mức độ hiển thị của hình nền phía sau lớp phủ (ví dụ: 30%). 
   • Chiều cao trên máy tính để bàn: Đặt chiều cao cố định cho phần này trên máy tính để bàn (ví dụ: 650px).
   • Chiều cao trên thiết bị di động: Đặt chiều cao trên thiết bị di động, chọn Phù hợp với kích thước nội dung để cho phép tự động điều chỉnh.
3. Nhấp vào Lưu để áp dụng các thay đổi của bạn.