Thiết kế Trang Chủ Ứng Dụng Của Bạn

Shopper App giúp đơn giản hóa quy trình xây dựng ứng dụng của bạn với giao diện người dùng linh hoạt và một loạt các mẫu chung. Các bản cập nhật chủ đề được tích hợp liền mạch với ứng dụng thông qua việc đồng bộ hóa theo thời gian thực.

Bài viết này hướng dẫn bạn cách tận dụng các thành phần được xây dựng sẵn của Shopper App để thiết kế một trang chính hấp dẫn và thu hút cho khách hàng của bạn.

 

---

 

Truy cập vào Trình chỉnh sửa Trang chính

Để truy cập vào trang chính của ứng dụng để thiết kế và tùy chỉnh, hãy làm theo các bước sau:

1. Từ bảng điều khiển quản trị SHOPLINE của bạn, đi đến Channels > Shopper App > App Design, sau đó nhấp vào Design.

   

2. Từ menu thả xuống ở trên cùng, chọn Trang chính.

   

3. Sử dụng menu bên trái để cấu hình cài đặt cho từng phần của trang chính. Mỗi tính năng được giới thiệu trong các phần bên dưới.

   

 

---

 

Điều hướng trên cùng

Module Đ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 chính. Các cài đặt này áp dụng cho tất cả các trang trong ứng dụng của bạn.

Module 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 khả năng đ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 module Điều hướng trên cùng bằng cách làm theo các bước sau:

1. Đi đến Trang chính, sau đó nhấp vào Đ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 loại 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 được định nghĩa trước. 
  • Logo: Tải lên logo cửa hàng của bạn. Để có kết quả tốt nhất, hãy sử dụng hình ảnh có tỷ lệ 4:1 hoặc 384 × 96 px.
  • Thanh tìm kiếm: Thêm thanh tìm kiếm được đị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.

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

Ghi chú: Thanh điều hướng trên cùng hiện không hỗ trợ cài đặt đa ngôn ngữ. Hình ảnh giống nhau sẽ được hiển thị trên tất cả các ngôn ngữ.

 

---

 

Thanh Thông báo

Thanh Thông báo nằm ngay bên dưới thanh điều hướng trên cùng. Chỉ có một thanh thông báo có thể được hiển thị trên trang chính, và nó không thể bị xóa hoặc thay đổi thứ tự. Bốn kiểu hiển thị có sẵn: Trượt ngang, Trượt dọc, Chuyển động nhấp nháy, và Căn giữa và cách đều. Bạn cũng có thể tùy chỉnh màu nền và màu chữ của thanh và lên lịch thông báo.

Bạn có thể hiển thị tối đa ba thông báo cùng một lúc. Đối với mỗi thông báo, bạn có thể chỉnh sửa tiêu đề, thêm liên kết chuyển hướng và kích hoạt bộ đếm ngược. Vị trí và màu sắc của bộ đếm ngược cũng có thể được tùy chỉnh. Khi bộ đếm ngược đạt đến thời gian kết thúc đã chỉ định, nó sẽ hiển thị dưới dạng 00:00:00:00.

 

---

 

Thanh Tìm kiếm

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

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

 

---

 

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ể bị xóa hoặc thay đổi thứ tự. Để cấu hình các tab khác nhau cho trang chính 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 của 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ế, thêm các thành phần mong muốn vào từng tab và cấu hình các cài đặt theo nhu cầu. Bảng xem trước bên phải sẽ tự động chuyển đổi giữa các tab và hiển thị các hiệu ứng đã áp dụng theo thời gian thực.

 

---

 

Phần Nội Dung

Có hai loại thành phần có sẵn cho phần nội dung:

• Mặc định: Hỗ trợ bốn loại thành phần, bao gồm Thành phần Cơ bản, Thành phần Sản phẩm, Thành phần Bộ sưu tập và Thành phần Ứng dụng.

• Tùy chỉnh: Hỗ trợ phát triển các thành phần tùy chỉnh, có thể được nhúng vào trang chính để nâng cao thiết kế hoặc chức năng của ứng dụng cửa hàng của bạn.

 

Thành Phần Cơ Bản

• Carousel: Bạn có thể đặt khoảng thời gian tự động chuyển đổi, kích thước và lên lịch thời gian phát hành theo sở thích của mình. Bạn có thể chọn thêm hình ảnh hoặc video ở đây. 
  • Hình ảnh: Các loại tệp được hỗ trợ là png, jpg, jpeg và gif. Bạn có thể tùy chọn chèn các liên kết dẫn khách hàng đến trang bộ sưu tập, trang chi tiết sản phẩm, một trang tùy chỉnh, và bất kỳ trang web nào.
  • Video: Các liên kết YouTube và Vimeo được hỗ trợ.
    
• Biểu ngữ Hình ảnh Tùy chỉnh: Các loại tệp được hỗ trợ là png, jpg, jpeg và gif. Chiều rộng của hình ảnh nên ít nhất là 1123px. Lên lịch thời gian phát hành dựa trên nhu cầu của bạn.
  
• Biểu ngữ Video Tùy chỉnh: Tải lên video từ máy tính. Kích thước video không được vượt quá 10 MB. Một hình ảnh bìa cho video sẽ được tự động tạo ra nếu bạn không tải lên. Bạn có thể chọn tỷ lệ khung hình mong muốn, chèn các liên kết chuyển hướng và lên lịch thời gian phát hành dựa trên nhu cầu của bạn.
  
• Đếm ngược: Một đếm ngược tạo ra cảm giác khẩn cấp nếu bạn đang chạy một chương trình khuyến mãi có thời gian. Bạn có thể đặt tiêu đề, lên lịch thời gian kết thúc và chọn màu chữ. Nếu cần, bật công tắc Hình ảnh sau đếm ngược và tải lên một hình ảnh sẽ được hiển thị khi đếm ngược kết thúc.
  
• Hình ảnh tùy chỉnh với các vùng nóng có thể tùy chỉnh: Bạn có thể xác định nhiều khu vực tương tác (vùng nóng) trên một hình ảnh duy nhất, với mỗi vùng liên kết đến các điểm đến khác nhau như trang chi tiết sản phẩm hoặc trang bộ sưu tập.
  • Hình ảnh Tùy chỉnh: Hỗ trợ tải lên hình ảnh ở định dạng PNG, JPG, JPEG hoặc GIF. Bạn cũng có thể tùy chỉnh khoảng cách hình ảnh.
    
  • Cài đặt Vùng Nóng: Nhấp vào Thêm một vùng nóng để mở cửa sổ pop-up. Thêm các vùng nóng riêng lẻ và điều chỉnh kích thước và trang đích cho từng vùng theo nhu cầu. Nếu các vùng nóng chồng chéo, vùng có chỉ số cao nhất sẽ được ưu tiên.
    

 

Thành Phần Sản Phẩm

Bạn có thể hiển thị sản phẩm của mình bằng các tùy chọn thành phần sau:

• Danh sách sản phẩm A và Danh sách sản phẩm B: Các thành phần này hiển thị sản phẩm theo bố cục lưới. Danh sách sản phẩm A hiển thị hai mục mỗi hàng, trong khi Danh sách sản phẩm B hiển thị ba. Chọn mẫu phù hợp nhất với yêu cầu hiển thị của bạn. Đối với cả hai loại danh sách, bạn có thể cấu hình tiêu đề, chọn danh mục sản phẩm, chọn phương pháp sắp xếp, đặt số lượng sản phẩm tối đa để hiển thị và kích hoạt huy hiệu xếp hạng sản phẩm. Bạn cũng có thể hiển thị một nút với văn bản có thể tùy chỉnh và một liên kết chuyển hướng, cũng như lên lịch thời gian kích hoạt của thành phần.
  
• Danh sách sản phẩm đa bộ sưu tập A và Danh sách sản phẩm đa bộ sưu tập B: Tương tự như các Danh sách Sản phẩm tiêu chuẩn, các tùy chọn này hiển thị sản phẩm theo bố cục lưới, nhưng cho phép bạn giới thiệu các mục từ nhiều bộ sưu tập. Danh sách sản phẩm đa bộ sưu tập A hiển thị hai mục mỗi hàng, và Danh sách sản phẩm đa bộ sưu tập B hiển thị ba. Chọn mẫu phù hợp nhất với yêu cầu hiển thị của bạn.
  
  •  Phong cách hiển thị: Đối với cả hai loại danh sách đa bộ sưu tập, bạn có thể cấu hình tiêu đề, đặt số lượng sản phẩm tối đa để hiển thị và kích hoạt huy hiệu xếp hạng sản phẩm. Bạn cũng có thể hiển thị một nút với văn bản có thể tùy chỉnh và một liên kết chuyển hướng, cũng như lên lịch thời gian kích hoạt của thành phần.
  • Cài đặt đa bộ sưu tập: Bạn có thể thêm tối đa năm bộ sưu tập làm thành phần con cho các danh sách đa bộ sưu tập này. Sắp xếp lại các bộ sưu tập bằng cách kéo và thả chúng. Nhấp vào từng thành phần con để chọn bộ sưu tập mong muốn, chỉnh sửa tiêu đề của nó và chỉ định thứ tự sắp xếp sản phẩm trong bộ sưu tập đó.

• Carousel sản phẩm: Chọn một bộ sưu tập chứa các sản phẩm bạn muốn hiển thị trong một carousel. Bạn có thể thêm tiêu đề, chọn phương pháp sắp xếp sản phẩm, kích hoạt huy hiệu xếp hạng sản phẩm và tùy chỉnh kiểu thẻ sản phẩm (Tiêu chuẩn hoặc Khung) và căn chỉnh. Bạn cũng có thể lên lịch thời gian kích hoạt và hiển thị một nút với văn bản tùy chỉnh và liên kết chuyển hướng.
  
  
  
• Trình diễn sản phẩm: Chọn bộ sưu tập chứa các sản phẩm bạn muốn hiển thị. Các sản phẩm sẽ được hiển thị trong một bức tranh ghép. Bạn có thể đặt tiêu đề cho thành phần, quyết định cách bạn muốn sắp xếp các sản phẩm và lên lịch thời gian phát hành. Bạn cũng có thể hiển thị một nút nếu cần. Văn bản và liên kết chuyển hướng của nút có thể được tùy chỉnh.
  
  

  Ghi chú: 6 sản phẩm đầu tiên trong bộ sưu tập, không bao gồm các sản phẩm không hợp lệ, sẽ được hiển thị trong thành phần theo phương pháp sắp xếp bạn đã chọn. Các thẻ số trong bản xem trước chỉ hiển thị cho bạn và sẽ không được hiển thị trên trang chính của ứng dụng của bạn.

• Hiển thị bộ sưu tập sản phẩm: Chọn một bộ sưu tập chứa các sản phẩm bạn muốn giới thiệu. Các sản phẩm sẽ xuất hiện trước một phông nền, làm cho thành phần này lý tưởng để làm nổi bật một bộ sưu tập. Bạn có thể chọn phương pháp sắp xếp sản phẩm, kích hoạt huy hiệu xếp hạng sản phẩm và lên lịch thời gian phát hành nếu cần. Đối với phông nền, bạn có thể tải lên một hình ảnh, tùy chọn thêm tiêu đề và phụ đề, tùy chỉnh màu văn bản và đặt một liên kết chuyển hướng.
  

Các thành phần bộ sưu tập

Bạn có thể hiển thị các bộ sưu tập của mình theo các cách sau.

• Bộ sưu tập: Bạn có thể chọn kiểu hình ảnh mong muốn (Tròn hoặc Vuông), số cột, tiêu đề và căn chỉnh của nó, và lịch phát hành cho toàn bộ thành phần. Đối với từng bộ sưu tập, nhấp vào từng thành phần con để chỉ định bộ sưu tập, tải lên một hình ảnh và lên lịch thời gian phát hành.
  
• Trình diễn bộ sưu tập A và Trình diễn bộ sưu tập B: Các bộ sưu tập sẽ được hiển thị trong một bức tranh ghép. Trình diễn bộ sưu tập A hỗ trợ tối đa 4 bộ sưu tập, trong khi Trình diễn bộ sưu tập B hỗ trợ tối đa 7 bộ sưu tập. Bạn phải sử dụng hết tất cả các vị trí hoặc sẽ có các chỗ trống. Đối với toàn bộ thành phần, bạn có thể đặt tiêu đề, chọn căn chỉnh mong muốn và lên lịch thời gian phát hành. Đối với từng bộ sưu tập, nhấp vào từng thành phần con để chỉ định bộ sưu tập và tải lên một hình ảnh. Kéo và thả để điều chỉnh thứ tự hiển thị của chúng.
  
  
  
• Carousel bộ sưu tập: Các bộ sưu tập sẽ được hiển thị trong một carousel. Chỉ định ít nhất 4 bộ sưu tập. Bạn có thể thêm tối đa 12 bộ sưu tập trong thành phần. Đối với toàn bộ thành phần, bạn có thể đặt tiêu đề, chọn căn chỉnh và màu sắc mong muốn của nền và văn bản, và lên lịch thời gian phát hành. Đối với từng bộ sưu tập, nhấp vào từng thành phần con để chỉ định bộ sưu tập, tải lên một hình ảnh và lên lịch thời gian phát hành. Kéo và thả để điều chỉnh thứ tự hiển thị của chúng.
  
• Lưới bộ sưu tập: Các bộ sưu tập sẽ được hiển thị trong một lưới. Chỉ định ít nhất 1 bộ sưu tập. Bạn có thể thêm tối đa 4 bộ sưu tập trong thành phần. Đối với toàn bộ thành phần, bạn có thể đặt tiêu đề, chọn căn chỉnh và tỷ lệ hình ảnh mong muốn, và lên lịch thời gian phát hành. Đối với từng bộ sưu tập, nhấp vào từng thành phần con để chỉ định bộ sưu tập và tải lên một hình ảnh. Kéo và thả để điều chỉnh thứ tự hiển thị của chúng.
  

Các thành phần ứng dụng

Giảm giá chớp nhoáng: Các chiến dịch bạn cấu hình trong ứng dụng Giảm giá chớp nhoáng sẽ được giới thiệu trên ứng dụng của bạn. Tìm hiểu thêm.

Các thành phần tùy chỉnh

Bạn có thể tạo một thành phần tùy chỉnh trong bảng điều khiển quản trị viên Ứng dụng Người mua và nhúng nó vào trang chính của ứng dụng cửa hàng của bạn để nâng cao thiết kế hoặc chức năng của nó. Nhấp vào + Thêm thành phần, chuyển sang tab Tùy chỉnh, và chọn một thành phần hiện có để nhúng. Ngoài ra, nhấp vào + Tạo một khối tùy chỉnh để mở trình chỉnh sửa thành phần và tạo một cái mới. Để biết thêm chi tiết về việc tạo các thành phần tùy chỉnh, vui lòng tham khảo bài viết Trung tâm trợ giúp.

Các thành phần được đánh dấu là Đang phát triển. chưa được công bố và không thể được áp dụng trực tiếp vào phiên bản trực tiếp của ứng dụng của bạn. Tuy nhiên, bạn có thể xem trước các thành phần này bằng cách sử dụng Snaplook. Khi bạn đã xác nhận nội dung là chính xác, bạn có thể xuất bản thành phần qua trình chỉnh sửa mã và áp dụng nó vào ứng dụng trực tiếp của bạn. Để biết chi tiết, xem phần Lưu và Xuất bản Thiết kế của Bạn.

---

Biểu tượng nổi

Biểu tượng nổi hoạt động như một phím tắt liên tục luôn hiển thị khi người dùng cuộn trang, nâng cao khả năng sử dụng bằng cách cung cấp quyền truy cập ngay lập tức vào các tính năng chính mà không cần điều hướng đi nơi khác.

Hiện tại, Ứng dụng Người mua hỗ trợ liên kết biểu tượng nổi với tính năng trò chuyện trực tiếp hoặc trang sự kiện được chỉ định, giúp đơn giản hóa các tương tác hỗ trợ hoặc quảng bá các chiến dịch đang diễn ra.

Trong bảng cài đặt, bạn có thể cấu hình các tùy chọn sau cho biểu tượng nổi của mình:

• 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 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 Trang sự kiện hay 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 công bố.

 

---

 

Thanh Đăng Nhập

Thành phần Thanh đăng nhập được cố định ở trên thanh điều hướng dưới cùng, cung cấp cho khách hàng quyền truy cập nhanh, chỉ với một cú nhấp chuột để đăng nhập vào cửa hàng của bạn. Nó được hiển thị theo mặc định nhưng có thể bị ẩn nếu cần. Bạn cũng có thể tùy chỉnh thông điệp đăng nhập và văn bản nút.

 

---

 

Điều Hướng Dưới

Điều hướng Dưới xuất hiện trên tất cả các trang của ứng dụng của bạn, cung cấp quyền truy cập nhanh đến các phần và tính năng chính. Thông qua điều hướng này, bạn có thể đảm bảo rằng các trang quan trọng như Cửa hàng, Bộ sưu tập, Tìm kiếm và Hộp thư luôn trong tầm tay. Bạn có thể hiển thị tối đa sáu thành phần mặc định hoặc tùy chỉnh, mang lại cho bạn sự linh hoạt để làm nổi bật các tính năng phù hợp nhất cho khách hàng của bạn.

 

Các Thành Phần Mặc Định

Trong trình chỉnh sửa, nhấp vào biểu tượng dropdown bên cạnh Điều hướng Dưới để xem các thành phần có sẵn. Bạn có thể thực hiện các thay đổi sau đối với chúng:

 

Các Thành Phần Tùy Chỉnh

Để tạo các thành phần tùy chỉnh cho điều hướng dưới của trang chính, nhấp vào biểu tượng bảng màu trong thanh bên trái để đi đến Bộ thương hiệu > Biểu tượng, sau đó nhấp vào + Thêm biểu tượng tùy chỉnh để tạo và cấu hình thành phần của bạn. Sau đó, quay lại phần Điều hướng Dưới của trang chính để thêm nó vào thanh.

Để biết hướng dẫn chi tiết về cách tạo và tùy chỉnh một biểu tượng tùy chỉnh, hãy xem phần Tùy Chỉnh Cài Đặt Biểu Tượng trong bài viết này.

 

---

 

Lưu và Xuất Bản Thiết Kế của Bạn 

Sau khi hoàn tất chỉnh sửa và xác nhận rằng bản xem trước xuất hiện như mong đợi, bạn có thể sử dụng các tùy chọn ở góc trên bên phải để tiếp tục:

• Lưu: Lưu tạm thời các chỉnh sửa hiện tại của bạn để cập nhật trong tương lai. Điều này sẽ không ảnh hưởng đến phiên bản trực tiếp của ứng dụng cửa hàng của bạn.
• Công bố > Công bố lên Snaplook: Công bố thành phần lên Snaplook để xem trước và thử nghiệm. Sử dụng tùy chọn này để xác minh chức năng và diện mạo trước khi đưa vào hoạt động. Để biết thêm thông tin, hãy tham khảo bài viết liên quan trong Trung tâm trợ giúp. 
• Công bố > Công bố lên ứng dụng trực tiếp: Công bố các thay đổi của bạn lên phiên bản trực tiếp của ứng dụng cửa hàng, làm cho chúng có thể nhìn thấy đối với người dùng cuối.