Giao diện Desktop
Giao diện Desktop là giao diện riêng cho khách truy cập bằng máy tính; bài này hướng dẫn tạo, dựng bố cục, chỉnh màu sắc và xuất bản giao diện.
1. Truy cập
Tại menu bên trái, chọn Kênh bán › Giao diện cửa hàng › Giao diện Desktop › Giao diện Desktop.
Mục tiêu Giao diện Desktop là giao diện riêng cho khách truy cập bằng máy tính; điện thoại và Zalo Mini App vẫn dùng giao diện ở tab Giao diện Mobile. Bài này hướng dẫn tạo, dựng bố cục, chỉnh màu sắc và xuất bản giao diện Desktop.
2. Dựng giao diện Desktop theo 5 bước
Bước 1. Nhấn Tạo giao diện Desktop, hoặc chọn Nhân bản trong menu ⋯ của một giao diện có sẵn (mục 3).
Bước 2. Nhấn Chỉnh sửa trên giao diện ở bảng Bản nháp để mở trình dựng; chọn trang cần chỉnh ở danh sách ở giữa đầu trang (mục 4).
Bước 3. Ở tab Bố cục: thêm, sắp xếp section và chỉnh nội dung (mục 5).
Bước 4. Ở tab Cài đặt: chỉnh màu sắc, phông chữ, bo góc, độ rộng trang và mạng xã hội dùng chung (mục 6).
Bước 5. Nhấn Lưu, dùng Xem trước để kiểm tra, sau đó nhấn Xuất bản. Nút Xuất bản có ở trình dựng và ở từng dòng của bảng Bản nháp.
3. Trang quản lý Giao diện Desktop
Trang có tiêu đề Cửa hàng Desktop kèm mô tả: Giao diện riêng cho khách truy cập bằng máy tính. Điện thoại và Zalo Mini App vẫn dùng giao diện ở tab Giao diện.
Tạo giao diện Desktop: nút ở góc phải để tạo giao diện mới.
Đang dùng: thẻ giao diện đang áp dụng, hiển thị tên, nhãn Đang dùng, thời điểm xuất bản, các nút Xem trước, Chỉnh sửa và menu ⋯ (Đổi tên, Nhân bản).
Bản nháp: bảng các giao diện chưa dùng với cột Tên giao diện, Cập nhật, Đã từng xuất bản (Chưa hoặc đã xuất bản) và Thao tác gồm Xem trước, Chỉnh sửa, Xuất bản và menu ⋯ (Đổi tên, Nhân bản, Xoá).
Mẹo Nên chỉnh trên một giao diện ở bảng Bản nháp và kiểm tra bằng Xem trước trước khi nhấn Xuất bản, thay vì chỉnh trực tiếp giao diện Đang dùng.
4. Trình dựng giao diện Desktop
Phần đầu: mũi tên quay lại, tên giao diện, nhãn trạng thái (Đang dùng) và nhãn Đã lưu.
Danh sách trang ở giữa: Trang chủ, Chi tiết sản phẩm, Danh mục sản phẩm, Tất cả sản phẩm, Kết quả tìm kiếm.
Nút hoàn tác, làm lại và ba biểu tượng chọn kích thước xem thử (máy tính, máy tính bảng, điện thoại).
Nút Xem trước, Lưu và Xuất bản ở góc phải.
Hai tab bên trái: Bố cục và Cài đặt; bảng bên phải hiển thị thuộc tính của section đang chọn (khi chưa chọn có dòng Chưa chọn thành phần). Có thể bấm vào section ở danh sách bên trái hoặc trực tiếp trên trang xem trước.
5. Tab Bố cục và Thêm section
Tab Bố cục chia trang thành ba khu: Đầu trang (Thanh thông báo, Đầu trang), Nội dung trang (các section, kèm số lượng) và Chân trang. Mỗi section trong Nội dung trang có các nút mũi tên lên/xuống, ẩn/hiện, nhân bản và xóa; nút Thêm section chèn section vào cuối trang đang chọn.
Cửa sổ Thêm section có ô Tìm section và 19 section chia theo nhóm:
Nhóm | Section |
|---|---|
Hình ảnh (5) | Trình chiếu ảnh; Ảnh lớn có chữ; Ảnh kèm chữ; Lưới ảnh; Danh sách logo |
Sản phẩm (7) | Sản phẩm nổi bật; Một sản phẩm; Sản phẩm cùng danh mục (chỉ dùng ở Chi tiết sản phẩm); Đầu trang danh mục (chỉ dùng ở Danh mục sản phẩm); Danh mục nổi bật; Sản phẩm theo tab; Flash sale |
Văn bản (4) | Cam kết / lợi ích; Văn bản; Tiêu đề; Cảm nhận khách hàng |
Video (1) | Video (YouTube hoặc link video) |
Khác (2) | Biểu mẫu (nhúng biểu mẫu thu thập thông tin khách hàng); Khoảng trống |
Ví dụ section Trình chiếu ảnh có các thiết lập: Chiều cao (ví dụ Vừa 560px), Tự chuyển ảnh (Chuyển sau số giây), Hiện mũi tên; nhóm Bố cục: Độ rộng (Theo khung trang hoặc Tràn màn hình), khoảng cách trên/dưới, màu nền; nhóm Kiểu hiển thị cho Tiêu đề, Dòng phụ, Nút và Khung section. Trình dựng nhắc bấm thẳng vào chữ, nút, ảnh trên trang xem trước để chỉnh nhanh.
Lưu ý Một số section chỉ dùng được ở trang cụ thể (ví dụ Sản phẩm cùng danh mục chỉ dùng ở Chi tiết sản phẩm). Hãy chọn đúng trang trước khi thêm section.
6. Tab Cài đặt
Màu sắc: Tiêu đề và liên kết, Nội dung, Giá bán, Nhãn khuyến mãi, Nền nút chính, Chữ nút chính, Nền nút phụ, Viền, Nền thẻ, Nền trang (mỗi màu có mã và độ trong suốt %).
Phông chữ, Bo góc, Độ rộng trang và Mạng xã hội.
Mẹo Đặt Nền nút chính và Giá bán trùng với màu thương hiệu (màu chính đã dùng ở giao diện Mobile) để các trang Desktop và giao diện điện thoại nhìn thống nhất (xem Thiết lập chung cho giao diện Mobile).
7. Giao diện Desktop hay Mobile?
Giao diện Desktop và Giao diện Mobile là hai giao diện độc lập, có trình chỉnh sửa riêng. Công tắc Ưu tiên giao diện mobile trên điện thoại ở trang Giao diện Mobile quyết định thiết bị nhỏ dùng giao diện nào. Xem so sánh chi tiết ở Tổng quan Giao diện cửa hàng.
8. Câu hỏi thường gặp
Muốn thử giao diện Desktop mới mà không ảnh hưởng khách? Chỉnh trên một giao diện ở bảng Bản nháp và dùng Xem trước; chỉ nhấn Xuất bản khi đã sẵn sàng (xem mục 2).
Điện thoại có thấy giao diện Desktop không? Theo mô tả trên trang, điện thoại và Zalo Mini App vẫn dùng giao diện ở tab Giao diện (Mobile). Công tắc Ưu tiên giao diện mobile trên điện thoại ở trang Mobile điều khiển việc này.
Làm trang landing riêng cho máy tính? Dùng mục Trang đơn Desktop (xem bài Trang đơn Desktop trong cùng nhóm).