Thiết kế Trang Bộ Sưu Tập

Trang Danh sách sản phẩm là trung tâm cho tất cả các bộ sưu tập sản phẩm của bạn. Khách hàng có thể nhấp vào một bộ sưu tập để xem các sản phẩm mà nó chứa. Bài viết này cung cấp hướng dẫn về cách tùy chỉnh Trang danh sách sản phẩm của bạn bằng cách sử dụng Shopper App's design editor.

Các kiểu của Trang Danh sách sản phẩm

Shopper App cung cấp ba kiểu hiển thị cho trang danh sách sản phẩm của bạn:

• Đồ họa và văn bản
• Văn bản đơn giản
• Đồ họa và văn bản 3 tầng

Trước khi thiết lập trang danh sách sản phẩm của bạn, hãy chọn kiểu phù hợp nhất với thiết kế cửa hàng và nhu cầu kinh doanh của bạn. Để biết thêm chi tiết, hãy tham khảo phần Cấu hình Trang Danh sách sản phẩm.

Cấu hình Trang Danh sách sản phẩm

Từ bảng điều khiển quản trị SHOPLINE của bạn, đi đến Ứng dụng > Shopper App > Thiết kế Ứng dụng và nhấp vào nút Thiết kế để truy cập trình chỉnh sửa thiết kế. Từ menu thả xuống ở trên cùng, chọn Trang danh sách sản phẩm.

Thiết lập Thanh điều hướng trên cùng

Mô-đun Thanh điều hướng trên cùng cho phép bạn tùy chỉnh các thành phần xuất hiện trong tiêu đề của trang danh sách sản phẩm của bạn. Mô-đun bao gồm ba phần có thể cấu hình: Biểu tượng bên trái trên cùng, Giữa, và Biểu tượng bên phải trên cùng. Mỗi phần được thiết kế để nâng cao điều hướng và cải thiện sự tương tác của người dùng.

Các thành phần có sẵn cho mỗi phần

Cấu hình các thành phần Thanh điều hướng trên cùng

Bạn có thể cấu hình mô-đun Thanh điều hướng trên cùng bằng cách làm theo các bước sau:

1. Đi đến Trang danh sách sản phẩm, sau đó nhấp vào Thanh điều hướng trên cùng để mở rộng menu.

2. Chọn phần bạn muốn cấu hình: Biểu tượng bên trái trên cùng, Giữa, hoặc Biểu tượng bên phải trên cùng.
   

3. Từ menu thả xuống Loại thành phần, chọn thành phần bạn muốn thêm:

• • Biểu tượng: Nhấp vào + Thêm biểu tượng để chèn tối đa 3 tùy chọn đã định nghĩa trước. 
  • Hình ảnh: Tải lên hình ảnh thương hiệu hoặc quảng cáo khi cần.
  • Thanh tìm kiếm: Thêm thanh tìm kiếm đã định nghĩa trước để cung cấp cho khách hàng một cách thuận tiện để duyệt trang của bạn.
  • Tiêu đề trang: Hiển thị tiêu đề của trang danh sách sản phẩm.

4. Nhấp vào Lưu hoặc Công bố để áp dụng cài đặt của bạn.

Thiết lập Thanh thông báo

Thanh Thông báo được đặt ở đầu trang và không thể bị xóa hoặc thay đổi thứ tự. Để cấu hình thanh thông báo của bạn, hãy chọn tùy chọn nguồn nội dung ưa thích của bạn trong phần Nguồn nội dung:

• Nếu bạn chọn Đồng bộ từ Thanh thông báo trên trang chính, văn bản, màu sắc và các cài đặt khác sẽ kế thừa từ những gì đã được thiết lập trên trang chính và không thể chỉnh sửa.
• Nếu bạn chọn Thiết lập độc lập, bạn có thể thêm tối đa ba thông báo, tùy chỉnh văn bản, màu sắc và các cài đặt khác, thiết lập thời gian công bố và ẩn các thông báo riêng lẻ.

Bật hoặc Tắt Thanh tìm kiếm

Trong phần Thanh tìm kiếm, bạn có thể chọn có hiển thị một thanh tìm kiếm bên dưới thanh thông báo hay không. Điều này cung cấp cho khách hàng một cách nhanh chóng và dễ dàng để tìm sản phẩm.

Thanh tìm kiếm không thể được di chuyển, nhưng bạn có thể ẩn nó bằng cách nhấp vào biểu tượng mắt.

Thiết lập Thành phần Phân trang

Thành phần Phân trang nằm dưới thanh thông báo và không thể bị xóa hoặc thay đổi thứ tự. Để cấu hình các tab khác nhau cho trang bộ sưu tập của trang web của bạn, hãy làm theo các bước sau:

1. Mặc định, thành phần phân trang bị vô hiệu hóa. Nhấp vào Thành phần Phân trang để kích hoạt nó.
2. Nhấp vào từng phần để chỉnh sửa tên tab. Để thêm tối đa 10 tab, nhấp vào Thêm Thành phần Phân trang.
3. Chọn trang bạn muốn thiết kế và cấu hình các cài đặt trang bộ sưu tập tương ứng theo nhu cầu. Bảng xem trước bên phải sẽ tự động chuyển đổi các tab và hiển thị các hiệu ứng đã áp dụng theo thời gian thực.

Cài Đặt Trang Bộ Sưu Tập

Ứng dụng Shopper lấy bộ sưu tập của bạn từ bảng điều khiển quản trị. Để đảm bảo các bộ sưu tập được đồng bộ hóa với ứng dụng Shopper, bạn phải kích hoạt kênh Ứng dụng Shopper - Trình tạo Ứng dụng Di động cho mỗi bộ sưu tập mong muốn trong bảng điều khiển quản trị của bạn.

1. Trong menu bên trái, nhấp vào Trang bộ sưu tập để bắt đầu cấu hình bố cục bộ sưu tập của bạn.
   
2. Chọn một kiểu bố cục cho trang bộ sưu tập của bạn: Hình ảnh-văn bản, Chỉ văn bản, Hình ảnh-văn bản ba cấp. Nếu bạn chọn Hình ảnh-văn bản hoặc Hình ảnh-văn bản ba cấp, bạn sẽ cần chọn Tỷ lệ khung hình hình ảnh mong muốn.
   
3. Cấu hình các cài đặt bộ sưu tập theo nhu cầu:
   
   • Thêm bộ sưu tập: Nhấp vào Bộ sưu tập đã thêm, chọn các bộ sưu tập bạn muốn hiển thị trong ứng dụng và nhấp vào Áp dụng.
     
   • Chỉnh sửa bộ sưu tập: Nhấp vào biểu tượng hình tam giác chỉ xuống bên cạnh một bộ sưu tập để mở rộng cài đặt của nó. Ứng dụng Shopper tự động đồng bộ hóa tên và hình ảnh bìa của bộ sưu tập từ bảng điều khiển quản trị, nhưng bạn có thể tải lên một hình ảnh bìa tùy chỉnh, chỉnh sửa tên bộ sưu tập và lên lịch thời gian kích hoạt bộ sưu tập. Ngoài ra, bạn có thể thêm các bộ sưu tập con dưới bộ sưu tập chính này và tùy chỉnh chi tiết của chúng.
     
   • Sắp xếp bộ sưu tập: Kéo và thả một bộ sưu tập theo chiều dọc để sắp xếp lại thứ tự của các bộ sưu tập. Để di chuyển một bộ sưu tập lên hoặc xuống trong hệ thống phân cấp, hãy kéo và thả nó theo chiều ngang.
     
   • Xóa một bộ sưu tập: Di chuột qua bộ sưu tập và nhấp vào biểu tượng thùng rác để xóa nó.

Cài Đặt Biểu Tượng Nổi

Tính năng Biểu tượng nổi cho phép bạn thêm một phím tắt cố định luôn hiển thị khi người dùng cuộn trang. Bạn có thể liên kết biểu tượng với một cuộc trò chuyện trực tiếp hoặc một trang sự kiện được chỉ định để nâng cao hiệu quả hỗ trợ khách hàng và thúc đẩy sự tham gia của chiến dịch. Để thiết lập, hãy làm theo các bước sau:

1. Trong menu bên trái, nhấp vào Biểu tượng Nổi. Sau đó, chọn cách cấu hình biểu tượng trên trang bộ sưu tập:

• • Đồng bộ từ biểu tượng nổi trên trang chính: Tất cả các cài đặt sẽ theo các cài đặt trên trang chính và không thể thay đổi.
  • Cài đặt độc lập: Cấu hình một biểu tượng nổi trên trang bộ sưu tập khác với biểu tượng trên trang chính. Để biết hướng dẫn cài đặt, hãy tiếp tục với Bước 2.

2. Nếu bạn chọn Cài đặt độc lập, nhấp vào Thêm Biểu tượng Nổi và cấu hình các tùy chọn sau cho biểu tượng của bạn:

• • Cài đặt cơ bản: Đặt tên cho biểu tượng, chọn vị trí của nó và tải lên một hình ảnh biểu tượng để hiển thị trong ứng dụng của bạn.
  • Loại tính năng: Chọn xem biểu tượng liên kết đến một Trang sự kiện hoặc một tính năng Trò chuyện trực tiếp:
    • Nếu bạn chọn Trang sự kiện: Đặt trang đích để chuyển hướng.
    • Nếu bạn chọn Trò chuyện trực tiếp: 
      • Chọn dịch vụ trò chuyện để sử dụng. Ứng dụng Shopper hiện hỗ trợ tích hợp với Shulex, một giải pháp hỗ trợ khách hàng theo thời gian thực được hỗ trợ bởi AI. Để biết thêm thông tin, hãy tham khảo hướng dẫn này.
      • Quyết định xem có nên kích hoạt Thông báo tin nhắn chưa đọc hay không. Khi được kích hoạt, một chấm đỏ sẽ xuất hiện để thông báo cho người dùng về bất kỳ tin nhắn chưa đọc nào.
  • Thời gian kích hoạt: Tùy chọn, đặt lịch cho thời điểm biểu tượng nổi nên được xuất bản.

3. Nhấp vào Lưu để lưu các cài đặt cho các sửa đổi sau này hoặc Áp dụng để áp dụng các cài đặt của bạn ngay lập tức.
   

Xuất Bản Thiết Kế

Sau khi hoàn tất chỉnh sửa và xác nhận rằng mọi thứ trông đúng trong bảng xem trước, nhấp vào nút Áp dụng ở góc trên bên phải để xuất bản thiết kế của bạn lên ứng dụng. Nếu bạn muốn giữ lại việc xuất bản, bạn có thể nhấp vào Lưu để giữ lại các chỉnh sửa của mình.