Thiết Kế Trang Chi Tiết Sản Phẩm

Trang chi tiết sản phẩm đóng vai trò quan trọng trong trải nghiệm mua sắm trên ứng dụng. Một trang sản phẩm được thiết kế tốt có thể tăng tỷ lệ chuyển đổi bằng cách cung cấp thông tin sản phẩm rõ ràng và hấp dẫn. Trong trình chỉnh sửa thiết kế, bạn có thể tùy chỉnh các yếu tố như thanh thông báo, đề xuất sản phẩm, các mục đã xem gần đây và nhiều hơn nữa để tối ưu hóa trang chi tiết sản phẩm của bạn. Hướng dẫn này sẽ giúp bạn từng bước thiết lập và các tùy chọn tùy chỉnh có sẵn.

Các bước cấu hình trang sản phẩm

Để thiết kế trang chi tiết sản phẩm cho ứng dụng của bạn:

1. Trong 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ế để mở trình chỉnh sửa thiết kế.

   

2. Từ menu thả xuống ở trên cùng, chọn Trang chi tiết sản phẩm và bắt đầu cấu hình các cài đặt cần thiết.

   

3. Sau khi hoàn tất thiết kế, nhấp vào Lưu để lưu bản nháp hoặc Áp dụng để xuất bản các thay đổi ngay lập tức.

   

Các tùy chọn cài đặt có sẵn

Phần này trình bày các cài đặt bạn có thể cấu hình cho trang chi tiết sản phẩm của mình.

Chọn sản phẩm xem trước

Khi bạn mở trình chỉnh sửa trang chi tiết sản phẩm, khu vực xem trước sẽ tự động hiển thị sản phẩm đầu tiên được gán cho kênh bán hàng Ứng dụng Shopper. Nhấp vào mũi tên thả xuống để chuyển sang sản phẩm khác cho mục đích xem trước.

Cấu hình 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 chi tiết 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 chi tiết sản phẩm, 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 loại 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.

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 Điều hướng Neo

Thành phần Điều hướng Neo cho phép điều hướng nhanh trên trang chi tiết sản phẩm, giúp khách hàng nhảy đến các mục cụ thể (chẳng hạn như thông tin sản phẩm, đề xuất hoặc các mục đã xem gần đây) chỉ với một cú nhấp chuột. Điều này giúp cải thiện hiệu quả duyệt trang và khuyến khích hành động thêm vào giỏ hàng.

Cấu hình Thành phần Điều hướng Mỏ neo

Thực hiện các bước sau để thiết lập phần Điều hướng Mỏ neo:

1. Đi tới trình chỉnh sửa Trang chi tiết sản phẩm, sau đó nhấp vào + Thêm thành phần > Điều hướng Mỏ neo.

   

2. Trong bảng cài đặt bên phải, bạn sẽ thấy phần Cài đặt Mỏ neo.

3. Nhấp vào + Thêm mỏ neo và chọn phần bạn muốn liên kết đến (chẳng hạn như Mô tả sản phẩm, Đề xuất sản phẩm, hoặc Đánh giá sản phẩm).

   Lưu ý: Bên cạnh mỏ neo Sản phẩm mặc định, bạn có thể thêm tối đa 3 mỏ neo nữa.

   

4. Nhập tên tùy chỉnh cho mỗi mỏ neo (ví dụ: Sản phẩm, Mô tả sản phẩm, Đã xem gần đây).

   

5. Sau khi thêm mỏ neo, bạn có thể quản lý chúng như sau:

   • Nhấp vào biểu tượng Đa ngôn ngữ để cấu hình bản dịch cho tên mỏ neo.
   • Nhấp vào biểu tượng Chuyển đổi để thay đổi phần được liên kết.
   • Nhấp vào biểu tượng Xóa để loại bỏ mỏ neo.

   

6. Sau khi hoàn tất thiết lập, nhấp Lưu hoặc Xuất bản ở góc trên bên phải để áp dụng các thay đổi.

Cấu hình Album Sản phẩm

Thành phần Album sản phẩm hiển thị hình ảnh sản phẩm và là một trong những yếu tố hình ảnh quan trọng nhất trên trang chi tiết sản phẩm. Bạn có thể tùy chỉnh cách trình bày và duyệt hình ảnh để cải thiện trải nghiệm mua sắm và thúc đẩy chuyển đổi.

• Kiểu thanh ứng dụng trên cùng: Điều khiển cách Thanh thông báo và hình ảnh sản phẩm được hiển thị:
  • Chồng lên: Thanh thông báo xuất hiện bên dưới bộ sưu tập, và hình ảnh sản phẩm mở rộng vào khu vực đầu trang để tạo cảm giác sống động hơn.
  • Cố định: Thanh thông báo xuất hiện phía trên bộ sưu tập, tách biệt đầu trang và hình ảnh sản phẩm thành các phần riêng biệt để cấu trúc rõ ràng hơn.
• Bố cục album: Chọn cách hiển thị hình ảnh sản phẩm:
  • Bố cục toàn chiều rộng: Hình ảnh trải dài toàn bộ chiều rộng màn hình, tạo trải nghiệm hình ảnh sống động hơn.
  • Bố cục chia tách: Hình ảnh giữ lại lề bên, làm cho bố cục rõ ràng hơn và phù hợp hơn với các sản phẩm có nhiều biến thể.

• Hiệu ứng cuộn parallax: Khi bật, hình ảnh sản phẩm di chuyển với tốc độ khác với cuộn trang, tạo chiều sâu và trải nghiệm hấp dẫn hơn:

  • Cố định trên cùng: Hình ảnh giữ cố định ở trên cùng trong khi nội dung trang cuộn.
  • Chế độ dịch chuyển trung tâm: Hình ảnh vẫn giữ ở giữa và dịch chuyển vị trí khi cuộn mà không thay đổi kích thước.

  Lưu ý: Hiệu ứng cuộn parallax chỉ có khi Kiểu thanh ứng dụng trên cùng được đặt là Chồng lên.

• Điều hướng hình thu nhỏ: Khi bật, một hàng hình thu nhỏ xuất hiện giúp khách hàng duyệt nhanh và chuyển đổi giữa các hình ảnh:
  • Hình thu nhỏ chồng lên: Hình thu nhỏ được hiển thị trên khu vực hình ảnh sản phẩm.
  • Hình thu nhỏ bên dưới: Hình thu nhỏ được hiển thị bên dưới hình ảnh sản phẩm.
  • Kích thước hình thu nhỏ: Chọn kích thước có sẵn hoặc tùy chỉnh kích thước hình thu nhỏ theo sở thích của bạn.

• Hiệu ứng nhập sản phẩm sống động: Khi bật, khách hàng sẽ thấy hiệu ứng chuyển động mượt mà hơn khi vào trang chi tiết sản phẩm từ danh sách sản phẩm (như trang bộ sưu tập, kết quả tìm kiếm, danh sách yêu thích hoặc giỏ hàng), nâng cao trải nghiệm duyệt.

  Lưu ý: Hiệu ứng nhập sản phẩm sống động chỉ có khi Bố cục album được đặt là Bố cục toàn chiều rộng.

Bạn có thể bật hoặc tắt các tính năng này dựa trên nhu cầu để tối ưu trải nghiệm duyệt hình ảnh sản phẩm.

Cấu hình Thanh Thông Báo

Thanh thông báo xuất hiện ở đầu trang chi tiết sản phẩm và có thể đồng bộ với thanh thông báo trang chủ hoặc được cấu hình riêng biệt:

• Đồng bộ với Thanh Thông Báo Trang Chủ: Kế thừa văn bản, màu sắc và các cài đặt khác từ trang chủ và không thể chỉnh sửa.
• Thiết lập độc lập: Cho phép tùy chỉnh văn bản thông báo, màu sắc và thời gian xuất bản. Bạn cũng có thể chọn hiển thị hoặc ẩn các thông báo cụ thể.

Cấu hình Thông Tin Sản Phẩm

Phần Thông tin sản phẩm được đặt ngay bên dưới thanh thông báo, vị trí này không thể thay đổi.

• Tóm tắt sản phẩm: Mô tả ngắn gọn về sản phẩm hiển thị dưới tên sản phẩm.
• Đánh giá: Nằm dưới phần tóm tắt sản phẩm. Để kích hoạt đánh giá sản phẩm, bạn cần cài đặt ứng dụng Đánh Giá Sản Phẩm. Tham khảo hướng dẫn này để biết thêm chi tiết về đánh giá sản phẩm.
• Lựa chọn kiểu dáng: Cho phép bạn liên kết nhiều sản phẩm vào một trang sản phẩm duy nhất bằng cách cấu hình nhóm sản phẩm với nguồn động. Với thiết lập này, các sản phẩm khác nhau có thể được hiển thị trong cùng một trang sản phẩm. 
  • Nhóm sản phẩm – Tùy chọn sản phẩm: Hỗ trợ liên kết đến nguồn động với loại dữ liệu "Sản phẩm". 
  • Nhóm sản phẩm – Tên tùy chọn: Hỗ trợ liên kết đến nguồn động với loại dữ liệu "Văn bản một dòng".

Để biết thêm thông tin về nguồn động, vui lòng tham khảo Hướng Dẫn Sử Dụng Tính Năng Metafields.

Cấu hình Mô Tả Sản Phẩm

• Chỉnh sửa tiêu đề và chọn sản phẩm để hiển thị: Bạn có thể tùy chỉnh tiêu đề trực tiếp hoặc thiết lập bằng nguồn động liên kết với loại dữ liệu "Văn bản một dòng". Để hiển thị mô tả sản phẩm cho các sản phẩm cụ thể, sử dụng Thẻ điều kiện để chọn nhóm sản phẩm liên quan. Để biết thêm thông tin, vui lòng xem hướng dẫn Cài Đặt Thẻ Sản Phẩm.
• Cấu hình kiểu hiển thị: Chọn có hiển thị biểu tượng hay không và chọn kiểu hiển thị bạn ưa thích. Nếu chọn Accordion, bạn có thể thiết lập trạng thái mặc định là Mở rộng tất cả, Mở rộng một số hoặc Thu gọn tất cả.

Cấu hình Chi Tiết Tùy Chỉnh

Bạn có thể thêm tối đa 10 thành phần Chi tiết tùy chỉnh.

• Chỉnh sửa tiêu đề và chọn sản phẩm để hiển thị: Bạn có thể tùy chỉnh tiêu đề trực tiếp hoặc thiết lập nó bằng cách sử dụng nguồn động liên kết với loại dữ liệu "Văn bản một dòng". Để hiển thị mô tả sản phẩm cho các sản phẩm cụ thể, hãy sử dụng Thẻ điều kiện để chọn nhóm sản phẩm liên quan. (Để biết thêm thông tin, vui lòng xem hướng dẫn Thiết lập Thẻ Sản phẩm.) Tiếp theo, chọn Loại nội dung. Bạn có thể chọn tùy chỉnh nội dung văn bản hoặc nhập trực tiếp liên kết đến trang đích.
• Cấu hình kiểu hiển thị: Chọn có hiển thị biểu tượng hay không.

Cấu hình Bộ sưu tập Liên kết

Thành phần Bộ sưu tập Liên kết cho phép bạn liên kết một nguồn động với loại dữ liệu "Bộ sưu tập Sản phẩm". Để biết thêm thông tin về nguồn động, vui lòng xem Hướng dẫn Sử dụng Tính năng Metafields.

Cấu hình Hình ảnh Tùy chỉnh

Bạn có thể thêm nhiều thành phần Hình ảnh Tùy chỉnh, tải lên hình ảnh, thiết lập trang đích và sử dụng thẻ điều kiện để hiển thị hình ảnh cho các nhóm sản phẩm cụ thể.

Hiển thị Video Sản phẩm

Thành phần Hiển thị Video Sản phẩm có thể được thiết lập bằng cách sử dụng nguồn động liên kết với loại dữ liệu "URL" với kiểu giá trị là "Nhiều giá trị". Để biết thêm thông tin về nguồn động, vui lòng xem Hướng dẫn Sử dụng Tính năng Metafields.

Cấu hình Sản phẩm Đã xem Gần đây

Thành phần Đã xem Gần đây có thể được ẩn hoặc xóa. Bạn cũng có thể tùy chỉnh tiêu đề và kiểu hiển thị.

Cấu hình Đánh giá Sản phẩm

Để kích hoạt thành phần Đánh giá Sản phẩm, hãy cài đặt ứng dụng Đánh giá Sản phẩm. Nếu ứng dụng chưa được cài đặt, thành phần sẽ bị mờ đi và có thông báo nhắc cài đặt trên màn hình. (Xem bài viết này để biết thêm thông tin về đánh giá sản phẩm.)

Đối với cả thành phần Đánh giá Sản phẩm và Câu hỏi & Trả lời, bạn có thể cấu hình tiêu đề thành phần, văn bản nút kêu gọi hành động, văn bản "Xem tất cả" và số lượng đánh giá hoặc câu hỏi hiển thị mặc định.

Cấu hình Đề xuất Sản phẩm

Để kích hoạt thành phần Đề xuất Sản phẩm, hãy cài đặt ứng dụng Đề xuất Sản phẩm. Nếu ứng dụng chưa được cài đặt, thành phần sẽ bị mờ đi kèm với lời nhắc cài đặt trên màn hình. (Xem bài viết này để biết thêm thông tin về đề xuất sản phẩm.)

Thiết lập 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 Người mua và nhúng nó vào trang chi tiết sản phẩm của ứng dụng cửa hàng để nâng cao thiết kế hoặc chức năng. Nhấp vào + Thêm thành phần, sau đó vào phần Khối tùy chỉnh để chọn thành phần mong muốn. 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ớ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.

Những 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. Tuy nhiên, bạn có thể xem trước các thành phần này bằng Snaplook. Khi đã 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 cho ứng dụng trực tiếp. Chi tiết xem phần Lưu và Xuất bản Thiết kế của Bạn.

Cấu hình Biểu tượng Nổi

Bạn có thể thêm một Biểu tượng nổi vào trang chi tiết sản phẩm, biểu tượng này sẽ luôn hiển thị khi người dùng cuộn trang. Biểu tượng này có thể được liên kết với dịch vụ trò chuyện trực tiếp hoặc trang sự kiện để nâng cao hiệu quả hỗ trợ khách hàng hoặc thúc đẩy tương tác chiến dịch.

Có hai tùy chọn cấu hình: Nếu bạn chọn Đồng bộ từ biểu tượng nổi trên trang chủ, biểu tượng sẽ kế thừa cài đặt trên trang chủ và không thể thay đổi. Nếu bạn chọn Thiết lập độc lập, bạn có thể cấu hình một biểu tượng nổi riêng biệt dành cho trang chi tiết, bao gồm các cài đặt sau:

• 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, 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.

Thiết Lập Thanh Công Cụ Nổi

Thanh công cụ nổi cho phép các thanh công cụ cụ thể được cố định trên màn hình, giúp người dùng có thể thực hiện hành động bất cứ lúc nào khi duyệt web. Điều này giúp cải thiện trải nghiệm người dùng và tăng tỷ lệ chuyển đổi mua hàng. Theo mặc định, hệ thống cung cấp một nút Thêm vào giỏ hàng, nhưng bạn cũng có thể nhấp + Thêm nội dung để chèn một thành phần tùy chỉnh làm thanh công cụ nổi. Để biết hướng dẫn chi tiết, xem phần Thiết Lập Thành Phần Tùy Chỉnh.

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 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à thử nghiệm. Sử dụng tùy chọn này để kiểm tra chức năng và giao diện trước khi đưa vào hoạt động. Để biết thêm thông tin, tham khảo bài viết Trung tâm trợ giúp liên quan. 
• 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.