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

Trang Bộ sưu tập đóng vai trò là trung tâm chính 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 Bộ sưu tập của bạn bằng trình chỉnh sửa thiết kế của Shopper App.

Các kiểu của Trang Bộ sưu tập

Shopper App cung cấp ba kiểu hiển thị cho trang bộ sưu tập của bạn:

• Đồ họa và văn bản
• Văn bản thuần túy
• Đồ họa và văn bản 3 cấp

Trước khi thiết lập trang bộ sưu tập, 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 Bộ sưu tập.

Truy cập và Cấu hình Trang Bộ sưu tập

Từ bảng quản trị SHOPLINE của bạn, đi tới Ứ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 phía trên, chọn Trang Bộ sưu tập.

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 phần đầu của trang bộ sưu tập sản phẩm. 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, Phần 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 điều hướng trên cùng

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

1. Đi đến Trang bộ sưu tập, sau đó nhấp vào Điều hướng trên cùng để mở rộng menu.

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

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 + Thêm biểu tượng để chèn tối đa 3 tùy chọn được định sẵn.
  • Hình ảnh: Tải lên hình ảnh thương hiệu hoặc quảng cáo khi cần thiết.
  • Thanh tìm kiếm: Thêm thanh tìm kiếm được định sẵn để cung cấp cho khách hàng cách thuận tiện để duyệt trang của bạn.
  • Tiêu đề trang: Hiển thị tiêu đề của trang bộ sưu tập sản phẩm.

4. Nhấp Lưu hoặc Xuất bản để á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ể xóa hoặc thay đổi vị trí. Để cấu hình thanh thông báo của bạn, chọn tùy chọn nguồn nội dung ưa thích 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ủ, văn bản, màu sắc và các cài đặt khác sẽ kế thừa từ trang chủ 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, đặt thời gian xuất bản và ẩn từng 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 hiển thị thanh tìm kiếm bên dưới thanh thông báo hay không. Điều này giúp khách hàng có cách nhanh chóng và dễ dàng để tìm sản phẩm.

Thanh tìm kiếm không thể thay đổi vị trí, 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 bên dưới thanh thông báo và không thể xóa hoặc thay đổi vị trí. Để cấu hình các tab khác nhau cho trang bộ sưu tập của website bạn, làm theo các bước sau:

1. Theo mặc định, thành phần phân trang bị tắt. Nhấp vào Thành phần Phân trang để bậ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 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 tab và hiển thị hiệu ứng đã áp dụng theo thời gian thực.

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

Ứng dụng Shopper cung cấp hai phiên bản của thành phần Danh sách Bộ sưu tập để thiết kế trang Bộ sưu tập của bạn. Để có trải nghiệm quản lý bộ sưu tập toàn diện và linh hoạt hơn, chúng tôi khuyến nghị sử dụng thành phần Mới.

• Danh sách bộ sưu tập (Cũ): Hỗ trợ Phiên bản 2.3.0 trở về trước của Ứng dụng Shopper. Thành phần này dự kiến sẽ bị ngừng sử dụng.
• Danh sách bộ sưu tập (Mới): Bảng cấu hình được thiết kế lại cung cấp cách quản lý nhóm bộ sưu tập và cấu trúc phân cấp một cách có tổ chức hơn.

Thiết Lập Trang Bộ Sưu Tập (Danh sách bộ sưu tập – Cũ)

Để cấu hình trang Bộ sưu tập của bạn bằng thành phần Danh sách bộ sưu tập (Cũ), hãy làm theo các bước dưới đây.

Cấu hình Kiểu Hiển thị  

1. Trong menu bên trái của trình chỉnh sửa thiết kế, nhấp vào Danh sách bộ sưu tập (Cũ).

2. Chọn một Kiểu hiển thị cho trang bộ sưu tập:

   • Hình ảnh-văn bản: Hiển thị các bộ sưu tập từ trên xuống dưới với cả tên và hình ảnh.
   • Chỉ văn bản: Hiển thị các bộ sưu tập dưới dạng danh sách chỉ có văn bản.
   • Hình ảnh-văn bản ba cấp: Mở rộng các bộ sưu tập lên đến ba cấp, cho phép khách hàng duyệt các bộ sưu tập cấp hai và cấp ba.

   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, hãy chọn Tỷ lệ khung hình hình ảnh (2:3, 3:4 hoặc 1:1)

Quản lý Cài đặt Bộ sưu tập

1. Nhấp vào Collections added để chọn các bộ sưu tập bạn muốn hiển thị trong ứng dụng, sau đó nhấp vào Apply.

   

2. Dưới Settings, nhấp vào biểu tượng mở rộng bên cạnh một bộ sưu tập để cấu hình cài đặt của nó:

   • Hình ảnh bộ sưu tập: Tải lên hình ảnh tùy chỉnh (tùy chọn). Nếu không tải lên, hình ảnh từ bảng quản trị sẽ được sử dụng.
   • Tên bộ sưu tập: Chỉnh sửa tên hiển thị trong ứng dụng.
   • Thời gian kích hoạt (tùy chọn): Đặt thời gian bắt đầu và kết thúc, hoặc bật Never expires (Không bao giờ hết hạn).
   • Thêm bộ sưu tập cấp hai: Thêm các bộ sưu tập con dưới một bộ sưu tập chính.

   

3. Sắp xếp lại các bộ sưu tập bằng cách kéo chúng theo chiều dọc để thay đổi thứ tự hiển thị, hoặc theo chiều ngang để điều chỉnh cấp bậc. Để xóa một bộ sưu tập, di chuột qua nó và nhấp vào biểu tượng Delete.

   

Sau khi hoàn tất cấu hình, nhấp vào Save để lưu các thay đổi cho lần sau, hoặc nhấp vào Publish để áp dụng cài đặt ngay lập tức cho ứng dụng của bạn.

Thiết Lập Trang Bộ Sưu Tập (Danh sách bộ sưu tập – Mới)

Thành phần Collection list (New) sử dụng cấu hình dựa trên nhóm bộ sưu tập có cấu trúc, cho phép thiết kế trang bộ sưu tập của bạn tinh chỉnh và linh hoạt hơn. Để cấu hình trang Collections với thành phần Collection list (New), hãy làm theo các bước sau.

Cấu hình kiểu hiển thị  

1. Trong menu bên trái, nhấp vào + Thêm thành phần và chọn Danh sách bộ sưu tập (Mới).
2. Nhấp vào Danh sách bộ sưu tập (Mới) để mở bảng quản lý Bộ sưu tập.

3. Trong bảng cài đặt, chọn tab Cài đặt kiểu dáng.

   

4. Dưới mục Kiểu hiển thị, chọn cách trình bày các bộ sưu tập:

   • Kiểu lưới với các tab: Hiển thị các danh mục chính dưới dạng tab và hiển thị các mục danh mục con trong lưới bên dưới.
   • Danh mục hình ảnh: Hiển thị các mục danh mục bằng bố cục hình ảnh và văn bản.

   

5. Cấu hình các tùy chọn hiển thị bổ sung dựa trên kiểu đã chọn:
   • Nếu chọn Kiểu lưới với các tab, bạn có các tùy chọn sau:
     • Kiểu hiển thị cho mục lá: Chọn cách hiển thị các mục cấp lá trong lưới (ví dụ: số lượng mục trên mỗi hàng).
     • Tỷ lệ hình ảnh cho mục lá: Chọn tỷ lệ hình ảnh cho các mục cấp lá (1:1, 2:3, 3:4 hoặc tỷ lệ gốc).
     • Căn chỉnh tiêu đề lưới: Chọn căn chỉnh tiêu đề mục là Trái hoặc Giữa.
   • Nếu chọn Danh mục hình ảnh, bạn có các tùy chọn sau:
     • Nguồn hình ảnh mặc định cho nhóm bộ sưu tập: Chọn sử dụng hình ảnh tùy chỉnh hoặc nguồn hình ảnh khác có sẵn cho nhóm bộ sưu tập.
     • Tỷ lệ hình ảnh cho nhóm bộ sưu tập: Chọn tỷ lệ hình ảnh cho các mục nhóm bộ sưu tập (1:1, 2:3, 3:4 hoặc tỷ lệ gốc).
     • Kiểu hiển thị cho mục lá: Chọn cách hiển thị các mục cấp lá (ví dụ: hình thu nhỏ kèm văn bản).
     • Tỷ lệ hình ảnh cho mục lá: Chọn tỷ lệ hình ảnh cho các mục cấp lá.

Quản lý Cài đặt Bộ sưu tập

1. Trong bảng cài đặt Danh sách bộ sưu tập (Mới), chuyển sang tab Quản lý bộ sưu tập.

   

2. Nhấp vào Thêm nhóm bộ sưu tập để tạo một nhóm bộ sưu tập mới.

   

3. Trong một nhóm bộ sưu tập, cấu hình các mục sau:

   

   • Tên nhóm: Nhấp vào tên nhóm bộ sưu tập để cấu hình các tùy chọn sau:
     • Tên nhóm tùy chỉnh: Đặt tên hiển thị cho nhóm bộ sưu tập này trong ứng dụng (áp dụng cho cả kiểu Lưới có tab và kiểu Danh mục hình ảnh).
     • Hình ảnh nhóm bộ sưu tập: Chỉ có khi chọn kiểu hiển thị Danh mục hình ảnh. Chọn nguồn hình ảnh cho nhóm bộ sưu tập:
       • Nếu chọn Tự động lấy hình ảnh bộ sưu tập/sản phẩm, bạn phải chỉ định Bộ sưu tập sản phẩm tương ứng.
       • Nếu chọn Hình ảnh tùy chỉnh, tải lên hình ảnh tùy chỉnh.
     • Thời gian kích hoạt (tùy chọn): Đặt thời điểm nhóm bộ sưu tập được hiển thị (áp dụng cho cả kiểu Lưới có tab và kiểu Danh mục hình ảnh).
   • Hình ảnh nhóm: Nhấp vào + Thêm hình ảnh để tải lên tối đa 3 hình ảnh cho nhóm. Sau khi tải lên, nhấp vào một hình ảnh để mở bảng Chỉnh sửa hình ảnh và cấu hình:
     • Hình ảnh tùy chỉnh: Tải lên, thay thế hoặc xóa hình ảnh (định dạng hỗ trợ: .png, .jpg, .jpeg, .gif; kích thước tối đa: 1 MB).
     • Chuyển hướng đến: Đặt điểm đến người dùng được dẫn đến khi chạm vào hình ảnh (bộ sưu tập, trang tùy chỉnh hoặc trang web).
     • Sắp xếp theo: Chọn cách sắp xếp sản phẩm trong bộ sưu tập (ví dụ, Đề xuất).
     • Thời gian kích hoạt (tùy chọn): Lên lịch khi hình ảnh và mục liên kết của nó được hiển thị.

4. Thêm và quản lý cấu trúc bộ sưu tập theo nhu cầu:

   • Nhấp vào + Tên nhóm phụ để tạo nhóm cấp hai. Các cài đặt được hỗ trợ giống như nhóm chính.
   • Nhấp vào + Mục lá để tạo mục lá. Mục lá có thể được thêm trực tiếp dưới một nhóm hoặc trong một nhóm phụ. Đối với mỗi mục lá, bạn có thể cấu hình tên hiển thị, đích chuyển hướng, hình ảnh mục và kiểm soát thời gian kích hoạt của nó.

   

5. Lặp lại các bước trên để thêm các nhóm bộ sưu tập bổ sung nếu cần.

Sau khi hoàn tất cấu hình, nhấp vào Lưu để giữ các thay đổi cho lần sau, hoặc nhấp vào Xuất bản để áp dụng cài đặt cho ứng dụng của bạn ngay lập tức.

Thiết Lập 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 này với 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 tương tác chiến dịch. Để thiết lập, 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ủ: Tất cả cài đặt sẽ theo trang chủ và không thể thay đổi.
  • Thiết lập độc lập: Cấu hình biểu tượng nổi trên trang bộ sưu tập khác với trang chủ. Để biết hướng dẫn thiết lập, tiếp tục đến Bước 2.

2. Nếu bạn chọn Thiết lập độ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í và tải lên 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 biểu tượng liên kết đến Trang sự kiện hoặc 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 AI hỗ trợ khách hàng thời gian thực. Để biết thêm thông tin, tham khảo hướng dẫn này.
      • Quyết định có bật Thông báo tin nhắn chưa đọc hay không. Khi bật, một chấm đỏ sẽ xuất hiện để thông báo cho người dùng về các tin nhắn chưa đọc.
  • Thời gian kích hoạt: Tùy chọn đặt lịch trình để biểu tượng nổi được xuất bản.

3. Nhấp vào Lưu để lưu cài đặt cho các chỉnh sửa sau này hoặc Áp dụng để áp dụng cài đặt 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 mọi thứ hiển thị đúng trong bản 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 tạm hoãn 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.