E Evotech

B3: Thiết kế giao diện

Kéo thả các khối để dựng giao diện Mini App/Web App từ dữ liệu đã chuẩn bị ở B1 và B2.

Cập nhật 20/09/2026

Khi đã có hàng hoá (B1) và nội dung, voucher (B2), bạn bắt đầu vào Thiết kế giao diện để kéo thả các khối hiển thị lên Mini App/Web App. Các khối chỉ lấy lại dữ liệu đã nhập ở những module khác, vì vậy nên hoàn tất các bước trước rồi mới thiết kế. Xem Tổng quan các bước thiết lập cửa hàng và Tổng quan Thiết kế giao diện.

1. Các tab trong Thiết kế giao diện

  • Giao diện: xem và chỉnh sửa giao diện chính của cửa hàng. Tại đây có tên phiên bản đang dùng, nút Xem trước, nút Chỉnh sửa, nhóm Tính năng nhanh (Cài đặt màu sắc, Thanh điều hướng), Link webapp, Link mini app, QR Code để tải về, và Thư viện giao diện để thêm, sao chép hoặc xoá các phiên bản giao diện.

  • Trang đơn: tạo landing page riêng cho chiến dịch quảng cáo. Xem Tab Trang đơn.

  • Biểu mẫu: tạo biểu mẫu thu thập thông tin khách hàng (đăng ký tư vấn, khảo sát...). Xem Tab Biểu mẫu.

2. Dựng giao diện bằng kéo thả

Ở tab Giao diện, bấm Chỉnh sửa để vào trình thiết kế: bên trái là Danh sách thẻ (ví dụ Đầu trang, Banner slide, Thanh tìm kiếm, Voucher, Hình ảnh với văn bản, Danh sách sản phẩm...), ở giữa là màn hình điện thoại hiển thị trực tiếp kết quả.

  • Bấm Thêm nội dung mới để chọn khối từ thư viện phần tử: Sản phẩm, Flash Sale, Danh mục, Hình ảnh, Văn bản, Video, Thẻ, Voucher, Hộp, Chân trang.

  • Kéo biểu tượng tay cầm để sắp xếp thứ tự; dùng biểu tượng bút chì để chỉnh nội dung khối, sao chép khối, ẩn/hiện khối hoặc xoá khối. Có nút hoàn tác/làm lại và thu phóng màn hình xem.

  • Khối lấy dữ liệu từ đâu: khối Sản phẩm, Danh mục lấy từ Hàng hoá (B1); khối Voucher dùng các voucher đã tạo (B2); khối Hình ảnh, Văn bản, Video, Banner nhập trực tiếp trong khối.

Chi tiết từng khối và thao tác xem tại Tab Giao diện.

3. Xem thử rồi mới cập nhật

  • Bấm Xem demo để kiểm tra giao diện; nên xem trên điện thoại vì phần lớn khách truy cập qua Zalo Mini App.

  • Chỉ bấm Cập nhật khi đã chắc chắn, vì thay đổi sẽ áp dụng lên giao diện thực tế của cửa hàng.

  • Muốn thử phương án khác mà không ảnh hưởng bản đang chạy, dùng Thêm giao diện hoặc Sao chép trong Thư viện giao diện.

4. Hoàn tất và mở bán

Dùng Link mini app, Link webapp hoặc QR Code tại tab Giao diện để kiểm tra và chia sẻ cửa hàng. Khi khách bắt đầu đặt hàng, xem cách xử lý đơn tại Vận hành đơn qua hệ thống Evo.

Xem tại đây https://helps.evotech.vn/danh-muc/cua-hang