Thiết kế hiệu năng cho nhịp sống thành thị.

Khám phá

F1GENZ GenZ · SAPO

Hướng dẫn sử dụng giao diện

Thiết lập cửa hàng từ lúc bắt đầu đến khi sẵn sàng bán hàng.

Làm nhanh trước khi mở bán

Màn hình thiết lập Sapo: Đường dẫn Website → Giao diện và nút Tùy chỉnh giao diện trong Sapo.

Chuẩn bị dữ liệu

  • Logo ngang, favicon vuông và ảnh chia sẻ 1200 × 630 px.
  • Ảnh banner trang chủ 1280 × 720 px, ảnh sản phẩm vuông và ảnh bài viết rõ nét.
  • Nhóm sản phẩm cho hàng mới, bán chạy và Flash Sale.
  • Menu chính, menu chân trang, blog và thông tin liên hệ.
  • Các trang Giới thiệu, Liên hệ, Câu hỏi thường gặp và Hệ thống cửa hàng.

Mở phần thiết lập giao diện

  • Trong quản trị Sapo, mở Website → Giao diện.
  • Tại giao diện F1GENZ GenZ, chọn Tùy chỉnh giao diện.
  • Chỉnh từng nhóm theo hướng dẫn bên dưới rồi nhấn Lưu.
  • Mở cửa hàng ở cửa sổ mới và kiểm tra cả máy tính lẫn điện thoại.

1. Thiết lập tổng quát

Màn hình thiết lập Sapo: Thiết lập tổng quát và kết quả màu sắc, popup, tiện ích trên cửa hàng.
Kết quả trên cửa hàng: Thiết lập tổng quát và kết quả màu sắc, popup, tiện ích trên cửa hàng.

Màu sắc thương hiệu

Dùng để đổi nền, chữ, màu nút và màu nhãn sale trên toàn cửa hàng.

  • Vào 1. Thiết lập tổng quát → Màu sắc F1GENZ GenZ.
  • Chọn màu nền, màu chữ/viền, hai màu chủ đạo và màu sale.
  • Bật hoặc tắt họa tiết tiêu đề section tùy phong cách thương hiệu.

Kết quả: màu mới được áp dụng đồng bộ cho nút, thẻ, tiêu đề và các khu vực nổi bật.

Ảnh chia sẻ, popup và mạng xã hội

  • Tải ảnh chia sẻ trang chủ đúng kích thước 1200 × 630 px.
  • Bật Popup đăng ký nhận tin nếu muốn thu thập email khách hàng.
  • Nhập thời gian chờ; ví dụ 8 nghĩa là popup mở sau 8 giây.
  • Điền tiêu đề, mô tả, link chính sách và URL form Mailchimp nếu đang dùng Mailchimp.
  • Điền link Facebook, Instagram, YouTube, TikTok/X và Pinterest. Để trống kênh nào thì biểu tượng kênh đó sẽ ẩn.

Kết quả: khách thấy đúng ảnh khi chia sẻ trang và có thể đăng ký nhận tin.

Tiện ích cố định và mobile

  • Bật form tư vấn qua điện thoại nếu shop cần nhận yêu cầu gọi lại.
  • Cấu hình tối đa 5 link trong nút thông báo góc trang.
  • Bật thanh điều hướng mobile và kiểm tra link Trang chủ, Sản phẩm, Blog, Tài khoản.
  • Tải logo thanh toán đúng kích thước 38 × 24 px; chỉ bật những logo shop thực sự hỗ trợ.

2. Đầu trang

Màn hình thiết lập Sapo: Thiết lập logo, menu, tìm kiếm, Wishlist và So sánh ở đầu trang.
Kết quả trên cửa hàng: Thiết lập logo, menu, tìm kiếm, Wishlist và So sánh ở đầu trang.

Logo, favicon và menu chính

  • Bật Dùng logo ảnh để hiển thị logo thương hiệu.
  • Tải logo 620 × 260 px và favicon 64 × 64 px.
  • Chọn menu dùng chung cho máy tính và điện thoại.
  • Bật Menu dính trên cùng nếu muốn thanh menu luôn hiện khi khách cuộn trang.

Kết quả: logo, menu, tìm kiếm và giỏ hàng xuất hiện đồng bộ trên desktop/mobile.

Nhãn HOT/NEW và thanh thông báo

  • Với mỗi nhãn, nhập vị trí theo số thứ tự menu cấp 1, nhập chữ HOT/NEW/DROP và chọn màu.
  • Vị trí 0 hoặc chữ trống sẽ ẩn nhãn.
  • Điền nội dung, chữ nút và URL cho thanh thông báo trên cùng.

Tìm kiếm, Wishlist và So sánh

  • Viết tiêu đề, mô tả, placeholder và tối đa ba gợi ý nhanh cho panel tìm kiếm.
  • Bật Wishlist nếu muốn khách lưu sản phẩm yêu thích trên trình duyệt.
  • Bật So sánh, đặt giới hạn sản phẩm và chọn chỉ so sánh cùng loại nếu cần.
  • Kiểm tra nội dung trạng thái trống để khách luôn biết bước tiếp theo.

4. Trang chủ F1GENZ GenZ

Màn hình thiết lập Sapo: Thiết lập các khối trang chủ F1GENZ GenZ và kết quả hero slider ngoài cửa hàng.
Kết quả trên cửa hàng: Toàn trang chủ F1GENZ GenZ gồm hero slider và các khối nội dung xuyên suốt trang.

Hero slider

  • Chọn thời gian tự chạy.
  • Bật từng slide cần dùng.
  • Với mỗi slide, chọn màu nền/chữ/nút, nhập nhãn, tiêu đề, mô tả và link nút.
  • Tải ảnh 1280 × 720 px và điền mô tả ảnh.
  • Tắt các slide chưa có nội dung hoàn chỉnh.

Kết quả: khu vực đầu trang giới thiệu đúng chiến dịch và dẫn khách tới nhóm sản phẩm chính.

Chữ chạy, Flash Sale và danh mục bento

  • Sửa nội dung chữ chạy; giữ câu ngắn để đọc tốt trên điện thoại.
  • Tại Flash Sale, chọn nhóm sản phẩm, nhập hạn kết thúc theo định dạng hiển thị và kiểm tra bộ đếm.
  • Tại Gear up, chọn 5 nhóm sản phẩm, ảnh và link tương ứng.
  • Không để ô bật nhưng thiếu ảnh, nhóm sản phẩm hoặc link.

Hàng mới, video và Journal

  • Chọn nhóm sản phẩm cho New Drop và số lượng sản phẩm cần hiện.
  • Với video, dùng đúng nguồn/link được trường cấu hình yêu cầu và tải ảnh đại diện rõ nét.
  • Chọn blog cho Journal, đặt số bài phù hợp và kiểm tra bài viết có ảnh đại diện.

5. Trang About

Màn hình thiết lập Sapo: Thiết lập trang About và kết quả trang giới thiệu thương hiệu.
Kết quả trên cửa hàng: Toàn trang Giới thiệu gồm hero, ba trụ cột, câu chuyện thương hiệu, khối chất liệu và Full kit.

Tạo trang và chọn giao diện

  • Trong Website → Trang nội dung, tạo trang Giới thiệu.
  • Đặt đường dẫn dễ nhớ như gioi-thieu hoặc about-us.
  • Chọn giao diện trang Giới thiệu nếu Sapo hiển thị lựa chọn giao diện riêng.
  • Quay lại Theme settings để chỉnh Hero, Stats, Story, Craft, Full kit và CTA cuối trang.

Kết quả: trang giới thiệu có câu chuyện thương hiệu, số liệu và lời kêu gọi mua hàng.

Nội dung nên chuẩn bị

  • Một ảnh hero ngang và tiêu đề ngắn.
  • Ba số liệu thật về thương hiệu.
  • Câu chuyện, giá trị cốt lõi, chất liệu/quy trình.
  • Ảnh full kit và link đến nhóm sản phẩm hoặc trang liên hệ.

6. Trang nhóm sản phẩm

Màn hình thiết lập Sapo: Thiết lập banner, lưới sản phẩm, bộ lọc và kết quả trang nhóm sản phẩm.
Kết quả trên cửa hàng: Toàn trang nhóm sản phẩm gồm banner, bộ lọc, thanh sắp xếp, lưới sản phẩm và phân trang.

Banner và số sản phẩm

  • Chọn bật/tắt banner nhóm sản phẩm.
  • Tải ảnh đủ rộng và viết mô tả ngắn cho nhóm.
  • Đặt số sản phẩm mỗi trang phù hợp với lưới desktop/mobile.

Bộ lọc

  • Bật bộ lọc tổng quát.
  • Cấu hình các nhóm lọc theo dữ liệu sản phẩm đang có.
  • Khai báo tên màu và mã màu tại các dòng Bộ lọc mã màu.
  • Mở một nhóm sản phẩm và thử lọc, sắp xếp, chuyển trang.

Kết quả: khách có thể thu hẹp danh sách theo giá, màu hoặc thuộc tính.

7. Trang chi tiết sản phẩm

Màn hình thiết lập Sapo: Thiết lập chức năng mua hàng, tab thông tin, sản phẩm liên quan và miễn phí ship.
Kết quả trên cửa hàng: Toàn trang chi tiết sản phẩm gồm gallery, khu mua hàng, tab thông tin, sản phẩm liên quan và sản phẩm đã xem.

Chức năng mua hàng

  • Bật các chức năng cần thiết cho gallery, chọn biến thể và mua hàng.
  • Cấu hình nội dung liên hệ khi sản phẩm có giá 0 đồng.
  • Viết nội dung nút CTA rõ hành động: thêm giỏ, mua ngay hoặc liên hệ.

Tab, sản phẩm liên quan và đã xem

  • Cấu hình các tab thông tin sản phẩm; chỉ bật tab có nội dung.
  • Chọn cách lấy sản phẩm liên quan và giới hạn số lượng.
  • Bật sản phẩm đã xem nếu muốn khách quay lại các mẫu vừa mở.
  • Cấu hình form tư vấn/pre-order và kiểm tra gửi thành công.

Miễn phí vận chuyển

  • Nhập ngưỡng miễn phí ship thống nhất giữa trang sản phẩm và giỏ hàng.
  • Kiểm tra số tiền còn thiếu thay đổi đúng khi đổi số lượng.

8. Trang Journal / Tin tức

Màn hình thiết lập Sapo: Thiết lập danh sách, mục lục và bài viết liên quan của Journal.
Kết quả trên cửa hàng: Toàn trang Journal gồm banner, bài viết nổi bật, lưới bài viết và phân trang.

Danh sách bài viết

  • Chọn số bài trên mỗi trang và kiểm tra bài nổi bật.
  • Mỗi bài nên có ảnh đại diện, tiêu đề ngắn và nội dung mở đầu rõ ràng.

Chi tiết bài viết

  • Bật mục lục nếu bài có các tiêu đề cấp 2/cấp 3.
  • Bật bài viết liên quan và kiểm tra slider, ngày đăng, ảnh và mô tả.
  • Đăng thử bình luận để kiểm tra form và thông báo thành công.

9. Trang Giỏ hàng

Màn hình thiết lập Sapo: Thiết lập nội dung giỏ hàng, chính sách và trạng thái giỏ trống.
Kết quả trên cửa hàng: Toàn trang Giỏ hàng gồm trạng thái giỏ trống, khung gợi ý nhanh và khu sản phẩm đã xem.

Nội dung và chính sách

  • Sửa tiêu đề, mô tả và trạng thái giỏ trống.
  • Bật xuất hóa đơn nếu shop có xử lý yêu cầu hóa đơn.
  • Điền chính sách đặt hàng/đổi trả ngắn gọn.
  • Bật sản phẩm đã xem nếu cần.

Kiểm tra trước khi bán

  • Thêm sản phẩm có biến thể vào giỏ.
  • Tăng/giảm số lượng và xóa sản phẩm.
  • Nhập ghi chú đơn hàng.
  • Kiểm tra thanh miễn phí ship và nút thanh toán.

10. Trang liên hệ

Màn hình thiết lập Sapo: Thiết lập Hero, kênh liên hệ, form, ảnh, bản đồ và FAQ.
Kết quả trên cửa hàng: Toàn trang Liên hệ gồm hero, bốn kênh liên hệ, form gửi yêu cầu, ảnh showroom, bản đồ nhúng và FAQ.

Tạo trang Liên hệ

  • Tạo trang với đường dẫn lien-he hoặc contact.
  • Chọn giao diện Liên hệ.
  • Trong Theme settings, chỉnh Hero, các kênh liên hệ, form, ảnh và bản đồ.
  • Gửi thử form bằng email/số điện thoại thử nghiệm.

Câu hỏi thường gặp

  • Nhập từng câu hỏi và câu trả lời.
  • Chỉ bật các mục đã có nội dung hoàn chỉnh.
  • Tạo trang FAQ với đường dẫn cau-hoi-thuong-gap và chọn giao diện FAQ.
  • Kiểm tra tìm kiếm/lọc câu hỏi trên desktop và mobile.

11. Trang hệ thống cửa hàng

Màn hình thiết lập Sapo: Thiết lập danh sách showroom, số liệu, bản đồ và CTA cuối trang.
Kết quả trên cửa hàng: Toàn trang hệ thống cửa hàng gồm hero, ba thẻ dịch vụ, bộ lọc tỉnh thành – cửa hàng kèm bản đồ và CTA cuối trang.

Tạo trang cửa hàng

  • Tạo trang có đường dẫn he-thong-cua-hang hoặc cua-hang.
  • Chọn giao diện Hệ thống cửa hàng.
  • Chỉnh Hero và ba số liệu tổng quan.
  • Nhập từng cửa hàng: tên, địa chỉ, giờ mở cửa, dịch vụ, link bản đồ và thông tin liên hệ.
  • Chỉnh CTA cuối trang.

Kết quả: khách tìm được showroom và mở chỉ đường nhanh.

12. Thiết lập thẻ sản phẩm

Màn hình thiết lập Sapo: Thiết lập tỉ lệ ảnh, thương hiệu, ảnh hover và nhãn trên thẻ sản phẩm.
Kết quả trên cửa hàng: Thiết lập tỉ lệ ảnh, thương hiệu, ảnh hover và nhãn trên thẻ sản phẩm.
  • Chọn tỉ lệ ảnh phù hợp với bộ ảnh sản phẩm.
  • Bật ảnh thứ hai khi hover chỉ khi phần lớn sản phẩm có ít nhất hai ảnh.
  • Bật/tắt thương hiệu trên thẻ theo nhu cầu.
  • Cấu hình nhãn bằng tag và thống nhất quy ước tag cho đội nhập liệu.
  • Viết nội dung liên hệ khi giá 0 đồng.

Kết quả: thẻ sản phẩm đồng nhất trên trang chủ, collection, tìm kiếm và sản phẩm liên quan.

13. Sale Popup (social proof)

Màn hình thiết lập Sapo: Thiết lập Sale Popup và vị trí hiển thị tiện ích social proof.
Kết quả trên cửa hàng: Thiết lập Sale Popup và vị trí hiển thị tiện ích social proof.
  • Bật popup nếu muốn tạo tín hiệu “vừa mua”.
  • Chọn sản phẩm hoặc nguồn dữ liệu theo trường cấu hình.
  • Đặt thời gian xuất hiện hợp lý để không che nội dung.
  • Kiểm tra popup trên mobile và đảm bảo nút đóng dễ bấm.

14. Thiết lập Megamenu

Màn hình thiết lập Sapo: Thiết lập từng Megamenu 1–10 và kết quả menu nhiều cột ngoài cửa hàng.
Kết quả trên cửa hàng: Thiết lập từng Megamenu 1–10 và kết quả menu nhiều cột ngoài cửa hàng.

Liên kết với menu chính

  • Tạo menu chính nhiều cấp trong quản trị Sapo.
  • Tại từng Megamenu 1–10, bật mục cần dùng.
  • Nhập tên mục menu cấp 1 cần khớp, sau đó chọn ảnh, vị trí ảnh, tiêu đề và link.
  • Kiểm tra hover trên desktop và menu mở trên mobile.

Kết quả: mục menu lớn hiển thị nhiều cột và banner chiến dịch.

15. Icon mạng xã hội góc phải

Màn hình thiết lập Sapo: Thiết lập panel hỗ trợ và các kênh liên hệ nhanh ở góc phải.
Kết quả trên cửa hàng: Panel hỗ trợ mở ra ở góc phải với bốn kênh liên hệ nhanh: Tư vấn nhanh, Đặt lịch hẹn, Showroom và New drop.

Nội dung panel và kênh hỗ trợ

  • Bật tiện ích, nhập tiêu đề và mô tả panel.
  • Cấu hình tối đa bốn kênh: tên, link và nội dung ngắn.
  • Ưu tiên Zalo, hotline, cửa hàng và đặt lịch; chỉ giữ kênh có người trực.
  • Kiểm tra link mở đúng và panel không che nút mua hàng trên mobile.
Cần support gear?

Drop size, chất liệu hay lịch thử fit — để lại nhu cầu, team F1GENZ phản hồi nhanh.