Giao diện
Giao diện Mini App
Trang này để làm gì
Hướng dẫn cấu hình giao diện (theme) của Zalo Mini App: đổi mẫu, sắp xếp bố cục các thành phần trên từng trang, và định nghĩa hệ màu sắc + kiểu chữ dùng chung cho toàn app. Đây là trình kéo-thả, không cần biết lập trình.
Đường dẫn: → chọn Mini App → → (chọn phiên bản) Cấu hình
Đừng nhầm với Vibe Code Studio
Trang này nói về trình Giao diện của một Mini App có sẵn (kéo-thả khối, chỉnh màu/chữ). Còn Vibe Code Studio là công cụ khác — dựng Mini App mới bằng cách mô tả cho AI. Hai công cụ, hai mục đích.
Mở trình cấu hình giao diện
Vào Mini App cần sửa, chọn tab Giao diện. Màn hình chia hai phần: giao diện Live (đang chạy cho khách) và Bản nháp (bạn sửa thoải mái, chưa ảnh hưởng khách).
- Tab Giao diện — trong menu chi tiết Mini App, cạnh Thông tin, Quản lý phiên bản, Báo cáo, Secret Key, Cấu hình hiển thị.
- Đổi giao diện — chọn một template khác từ kho giao diện theo ngành.
- Live — phiên bản đang áp dụng cho khách, kèm ID và ngày cập nhật.
- Go Live — đưa bản nháp lên thay cho bản Live hiện tại. Khách chỉ thấy thay đổi sau bước này.
- Cấu hình — mở trình dựng để chỉnh bố cục, màu sắc và kiểu chữ của phiên bản đó.
Live và Bản nháp là hai bản khác nhau
Bạn chỉnh sửa trên Bản nháp; khách vẫn thấy bản Live cũ cho tới khi bạn bấm Go Live. Đây là điểm tốt (sửa không sợ ảnh hưởng khách) nhưng cũng là lý do phổ biến khiến người dùng báo "sửa rồi mà app không đổi".
Ba tab trong trình dựng
Sau khi bấm Cấu hình, trình dựng mở ra với ba tab ở thanh trên cùng:
| Tab | Dùng để |
|---|---|
| Layout | Dựng bố cục từng trang — thêm/sắp xếp các thành phần |
| Cài đặt | Định nghĩa hệ Style dùng chung — màu sắc và kiểu chữ |
| Xem trước | Xem trang như khách thấy, trên khung điện thoại |
Tab Layout — dựng bố cục trang
- Trang — các màn hình của Mini App. Chọn trang để dựng bố cục cho trang đó.
- Thành phần — cây các khối tạo nên trang: Header, các Block lồng nhau, Nội dung, Hình ảnh, Navigation Bar. Bấm dấu + để thêm thành phần.
- Khung xem trước — cập nhật theo thời gian thực khi bạn chỉnh.
- Trạng thái trang — Hoạt động hoặc ẩn. Trang ẩn không hiển thị trong app.
- Vị trí body — nội dung nằm Trên cùng (đè lên header) hay Kế tiếp header (bắt đầu ngay dưới header).
- Style mặc định — nền của trang: chọn Màu hoặc Hình ảnh.
Bốn thao tác để thiết kế
Toàn bộ việc thiết kế xoay quanh bốn thao tác. Nắm bốn cái này là dựng được trang.
1. Chọn một khối để sửa
Bấm vào khối ngay trên khung xem trước, hoặc bấm node của nó trong cây Thành phần. Khối được chọn sẽ có viền trên preview và sáng trong cây, đồng thời panel bên phải đổi thành trình sửa của đúng khối đó.
- Node đang chọn — trong cây, kèm hai icon nhân bản và xoá hiện ngay trên node.
- Khối tương ứng trên preview — được tô viền để bạn biết đang sửa đúng chỗ. Bấm thẳng vào đây cũng chọn được khối.
- Dữ liệu — nội dung của khối. Với khối Văn bản là ô Nội dung (gõ chữ trực tiếp).
- Liên kết — bấm vào khối sẽ mở đi đâu (trang khác, sản phẩm, ưu đãi…).
- Style — Màu sắc, Kiểu chữ, Căn lề (trái / giữa / phải) cho khối.
2. Kéo một thành phần vào để thêm mới
Bấm dấu + cạnh chữ Thành phần để mở thư viện thành phần, rồi kéo thành phần bạn muốn và thả vào vị trí mong muốn trên khung xem trước.
- Nút + — mở/đóng thư viện thành phần.
- Thư viện thành phần — các thành phần chia theo nhóm (bảng bên dưới). Kéo một cái thả vào preview để thêm.
Thêm thành phần là kéo-thả, không phải bấm
Bấm một thành phần trong thư viện chỉ mở phần cấu hình của nó — chưa thêm vào trang. Để thêm thật, phải kéo nó thả vào vị trí trên khung xem trước.
Các thành phần trong thư viện:
| Nhóm | Thành phần |
|---|---|
| Cố định | Navigation bar (thanh điều hướng dưới) |
| Dàn trang | Block — khối chứa để tạo bố cục |
| Văn bản và Phương tiện | Tiêu đề, Nội dung, Icon, Hình ảnh, Banner Slider, Đếm ngược |
| Dữ liệu | Collection, Hiển thị dữ liệu |
| Tương tác | Button, Quan tâm OA, Tìm kiếm |
| Dữ liệu hệ thống | Card tin tức, Card ưu đãi, Card sản phẩm, Danh mục sản phẩm |
| Nâng cao | Card Hạng thành viên, Membership, Top Ranking, Đếm, Thông tin user |
3. Kéo trong cây để sắp xếp lại
Muốn đổi thứ tự trên/dưới hoặc chuyển một khối vào trong một Block khác, kéo node đó trong cây Thành phần tới vị trí mới. Đây là cách sắp xếp chính xác nhất khi các khối lồng nhau nhiều lớp.
4. Nhân bản hoặc xoá
Chọn một node, hai icon hiện ngay trên nó: nhân bản (tạo bản sao giống hệt để sửa nhanh) và xoá (thùng rác).
Thuộc tính theo từng loại khối
Panel bên phải đổi theo loại khối đang chọn. Các loại hay dùng:
| Loại khối | Sửa được gì ở panel phải |
|---|---|
| Block (khối chứa) | Kích thước, Chiều cao, Padding / Margin, Bố cục bên trong (1–4 cột), Nền (Màu / Hình ảnh), Bo góc (Radius), Viền, Điều kiện hiển thị, Liên kết |
| Nội dung / Tiêu đề (chữ) | Nội dung chữ, Liên kết, Màu sắc, Kiểu chữ, Căn lề |
| Hình ảnh | Ảnh, kích thước, bo góc, liên kết khi bấm |
| Đếm ngược | Kiểu, mốc đếm đến (ngày giờ), dạng hiển thị, màu, kiểu chữ |
| Card sản phẩm / tin tức / ưu đãi | Nguồn dữ liệu hiển thị và cách trình bày |
Bố cục = Block lồng nhau + số cột
Giao diện được ghép từ các Block lồng vào nhau. Một hàng hai thẻ = một Block đặt Bố cục bên trong = 2 cột, mỗi cột là một Block con chứa Hình ảnh và Nội dung. Muốn thêm một cột nữa, đổi số cột của Block cha rồi kéo thành phần vào cột mới.
Ví dụ: dựng một hàng 2 thẻ ưu đãi
- Chọn trang ở cột Trang, rồi bấm + mở thư viện.
- Kéo một Block thả vào vị trí muốn đặt hàng thẻ. Chọn Block đó, đặt Bố cục bên trong = 2 cột.
- Kéo nội dung vào từng cột — mỗi cột thả một Hình ảnh và một Nội dung.
- Sửa từng khối — bấm vào khối, đổi chữ ở ô Nội dung, chọn Màu sắc/Kiểu chữ, và gắn Liên kết để bấm vào mở đúng trang.
- Làm đẹp Block — chỉnh Padding, Bo góc, Nền cho thẻ.
- Xem trước rồi Go Live — kiểm ở tab Xem trước hoặc quét QR, ưng thì bấm Go Live.
Tab Cài đặt — hệ Style dùng chung
Thay vì đặt màu và cỡ chữ cho từng khối, bạn định nghĩa một lần ở tab Cài đặt rồi mọi thành phần dùng lại. Đổi màu chủ đạo ở đây là cả app đổi theo.
- Style — nơi định nghĩa sẵn hệ thống màu sắc và font chữ để dùng lại trong các thành phần và cài đặt trang.
- Màu hệ thống — các vai trò màu cố định: Màu chủ đạo, Màu text trên màu chủ đạo, Màu nền, Màu text trên nền, Màu nền của AppBar, Màu text của AppBar.
- Màu thư viện — bảng màu đặt tên sẵn: Primary, Secondary-1/2/3, Gray-100 → Gray-900, White, Danger.
- Kiểu chữ — các cấp chữ theo độ đậm và cỡ (ví dụ Bold, font-size 11/12/13…).
| Nhóm | Ý nghĩa |
|---|---|
| Màu hệ thống | Gán vai trò cho màu (chủ đạo, nền, chữ, AppBar). Thành phần tham chiếu theo vai trò, không hard-code mã màu. |
| Màu thư viện | Bảng màu chuẩn để chọn nhanh khi cấu hình từng khối. |
| Kiểu chữ | Cỡ và độ đậm chữ dùng lại, giữ toàn app đồng nhất. |
Sửa hệ Style thay vì sửa từng khối
Muốn đổi tông màu thương hiệu cho cả Mini App, đổi Màu chủ đạo ở tab Cài đặt là nhanh và nhất quán nhất. Sửa màu trực tiếp trên từng Block chỉ nên dùng cho ngoại lệ.
Xem trước và đưa lên (Go Live)
- Xem trước trong trình dựng Khung điện thoại ở giữa cập nhật theo mỗi thay đổi. Dùng tab Xem trước để xem toàn trang.
- Thử trên điện thoại thật Ở tab Giao diện, mỗi phiên bản có mã QR Quét QR để xem — mở bằng Zalo để trải nghiệm như khách.
- Go Live Khi bản nháp đã ưng, bấm Go Live để thay bản Live. Từ lúc này khách mới thấy giao diện mới.
Lỗi thường gặp
| Hiện tượng | Nguyên nhân | Cách xử lý |
|---|---|---|
| Sửa xong khách không thấy đổi | Mới sửa trên Bản nháp, chưa Go Live | Bấm Go Live để đưa bản nháp lên |
| Đổi màu một khối nhưng chỗ khác không theo | Khối đó hard-code màu riêng | Sửa ở tab Cài đặt → Màu hệ thống để áp cho cả app |
| Một khối hiển thị trống | Khối dữ liệu chưa chọn nguồn (Bạn chưa chọn nguồn dữ liệu) | Gắn nguồn dữ liệu cho khối đó |
| Bố cục khó chỉnh trên preview | Kéo trực tiếp không trúng khối cần sửa | Dùng cây Thành phần bên trái để chọn đúng Block |