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

Ứng dụng Shopper 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à lựa chọn các mẫu chung. Các cập nhật chủ đề được tích hợp liền mạch với ứng dụng thông qua đồng bộ hóa 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ó sẵn của Ứng dụng Shopper để thiết kế trang chủ hấp dẫn và bắt mắt cho khách hàng của bạn.

 

---

 

Truy cập Trình chỉnh sửa Trang chủ

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

1. Từ bảng quản trị SHOPLINE của bạn, đi tới Kênh > Ứng dụng Shopper > Thiết kế Ứng dụng, sau đó nhấp vào Thiết kế.

   

2. Từ menu thả xuống phía trên, chọn Trang chủ.

   

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

   

 

---

 

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 trang của trang chủ. 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.

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 chủ, 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 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 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 sẵn.
  • Logo: Tải lên logo cửa hàng của bạn. Để có kết quả tốt nhất, sử dụng hình ảnh có tỷ lệ khung hình 4:1 hoặc kích thước 384 × 96 px.
  • 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 web của bạn.

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

Lưu ý: Thanh điều hướng trên cùng hiện tại không hỗ trợ cài đặt đa ngôn ngữ. Cùng một hình ảnh 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ó thể hiển thị một thanh thông báo trên trang chủ, và nó không thể bị xóa hoặc thay đổi thứ tự. Có bốn kiểu hiển thị: Trượt ngang, Trượt dọc, Chuyển đổi nhấp nháy, và Căn giữa có khoảng cách. 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 lúc. 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à bật bộ đếm thời gian đếm ngược. Vị trí và màu sắc của bộ đếm cũng có thể được tùy chỉnh. Khi bộ đếm đạ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ị thanh tìm kiếm bên dưới thanh thông báo hay không, giúp khách hàng có cách nhanh chóng và dễ dàng để tìm sản phẩm họ đang tìm kiếm.

Thanh tìm kiếm không thể thay đổi vị trí, nhưng 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ủ của trang web của bạn, hãy 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 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ài đặt theo nhu cầu. Bảng xem trước bên phải sẽ chuyển đổi tab một cách động và hiển thị các hiệu ứng đã áp dụng theo thời gian thực.

 

---

 

Phần thân

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

• 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ủ để 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 chuyển đổi tự động, 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 tại đâ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 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: Hỗ trợ liên kết YouTube và Vimeo.
    
• Banner 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 theo nhu cầu của bạn.
  
• Banner 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ạo tự động 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 liên kết chuyển hướng và lên lịch thời gian phát hành theo nhu cầu.
  
• Đếm ngược: Đếm ngược tạo cảm giác cấp bách nếu bạn đang chạy chương trình khuyến mãi có thời gian giới hạn. 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 khi đếm ngược và tải lên hình ảnh sẽ 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ể định nghĩa nhiều khu vực tương tác (vùng nóng) trên một hình ảnh, 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 viền hình ảnh.
    
  • Cài đặt Vùng Nóng: Nhấp vào Thêm vùng nóng để mở cửa sổ bật lên. Thêm từng vùng nóng và điều chỉnh kích thước cũng như trang đích cho mỗi vùng theo nhu cầu. Nếu các vùng nóng chồng lên nhau, vùng có chỉ số cao nhất sẽ được ưu tiên.
    

 

Các 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 mục. 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à bật huy hiệu xếp hạng sản phẩm. Bạn cũng có thể hiển thị nút với văn bản tùy chỉnh và liên kết chuyển hướng, cũng như lên lịch thời gian kích hoạt 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ư 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 trình bày 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 mục. Chọn mẫu phù hợp nhất với yêu cầu hiển thị của bạn.
  
  • Kiểu 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à bật huy hiệu xếp hạng sản phẩm. Bạn cũng có thể hiển thị nút với văn bản tùy chỉnh và liên kết chuyển hướng, cũng như lên lịch thời gian kích hoạt 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 phụ 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ả. Nhấp vào từng thành phần phụ để chọn bộ sưu tập mong muốn, chỉnh sửa tiêu đề và chỉ định thứ tự sắp xếp sản phẩm trong bộ sưu tập đó.

• Vòng xoay 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 vòng xoay. Bạn có thể thêm tiêu đề, chọn phương pháp sắp xếp sản phẩm, bậ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 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ị 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ị theo kiểu ghép ảnh. 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 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ị 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.
  
  

  Lưu ý: 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ị với bạn và sẽ không được hiển thị trên trang chủ Ứ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 trưng bày. 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, bậ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 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ó, cũng như lịch phát hành cho toàn bộ thành phần. Đối với từng bộ sưu tập riêng lẻ, nhấp vào từng thành phần con để chỉ định bộ sưu tập, tải lên hình ảnh và lên lịch thời gian phát hành.
  
• Trưng bày Bộ sưu tập A và Trưng bày Bộ sưu tập B: Các bộ sưu tập sẽ được hiển thị dưới dạng một bức tranh ghép. Trưng bày Bộ sưu tập A hỗ trợ tối đa 4 bộ sưu tập, trong khi Trưng bày 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 riêng lẻ, nhấp vào từng thành phần con để chỉ định bộ sưu tập và tải lên hình ảnh. Kéo thả để điều chỉnh thứ tự hiển thị của chúng.
  
  
  
• Băng chuyền Bộ sưu tập: Các bộ sưu tập sẽ được hiển thị dưới dạng băng chuyền. 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 mong muốn và màu nền cùng màu 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 riêng lẻ, nhấp vào từng thành phần con để chỉ định bộ sưu tập, tải lên hình ảnh và lên lịch thời gian phát hành. Kéo 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ị dưới dạng 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 mong muốn và tỷ lệ hình ảnh, và lên lịch thời gian phát hành. Đối với từng bộ sưu tập riêng lẻ, nhấp vào từng thành phần con để chỉ định bộ sưu tập và tải lên hình ảnh. Kéo thả để điều chỉnh thứ tự hiển thị của chúng.
  

Các Thành phần Ứng dụng

Flash sales: Các chiến dịch bạn cấu hình trong ứng dụng Flash Sales sẽ được trình bày trên Ứng dụng của bạn. Tìm hiểu thêm.

 

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 quản trị Ứng dụng Shopper và nhúng nó vào trang chủ ứng dụng cửa hàng của bạn để nâng cao thiết kế hoặc chức năng. 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 khối tùy chỉnh để mở trình chỉnh sửa thành phần và tạo một thành phần mới. Để biết thêm chi tiết về cách tạo thành phần tùy chỉnh, vui lòng tham khảo bài viết Trung tâm Trợ giúp này.

Các thành phần được đánh dấu là Đang phát triển chưa được xuất bản và không thể áp dụng trực tiếp cho 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 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ó cho ứ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 đóng vai trò như một phím tắt cố định 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 truy cập ngay lập tức đến 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 Shopper 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 một 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 thời gian thực được trang bị AI. Để biết thêm thông tin, vui lòng 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ề 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 trình cho thời điểm biểu tượng nổi được xuất bản.

 

---

 

Thanh Đăng Nhập

Thành phần Thanh đăng nhập được cố định phía 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 lần nhấp để đăng nhập vào cửa hàng của bạn. Nó được hiển thị mặc định nhưng có thể ẩn nếu cần thiết. Bạn cũng có thể tùy chỉnh thông điệp đăng nhập và văn bản nút.

 

---

 

Thanh Điều Hướng Dưới Cùng

Thanh Điều hướng dưới cùng 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 thanh điều hướng này, bạn có thể đảm bảo 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 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 mũi tên thả xuống bên cạnh Thanh điều hướng dưới cùng để 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:

 

Thành phần tùy chỉnh

Để tạo các thành phần tùy chỉnh cho thanh điều hướng dưới cùng của trang chủ, nhấp vào biểu tượng bảng màu ở thanh bên trái để vào Bộ nhận diện 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 Thanh điều hướng dưới cùng của trang chủ để 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 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 hiển thị như mong muốn, 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ập nhật sau. Đ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.
• Xuất bản > Xuất bản lên Snaplook: Xuất bản thành phần lên Snaplook để xem trước và kiểm tra. Sử dụng tùy chọn này để xác minh chức năng và giao diện 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.
• Xuất bản > Xuất bản lên ứng dụng trực tiếp: Xuất bản 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 hiển thị với người dùng cuối.