Giao diện thương mại điện tử

EGA Bed - Giao diện bán hàng cho ngành chăn ga gối đệm & nội thất

Giao diện được xây dựng cho các cửa hàng chăn ga gối đệm và nội thất phòng ngủ tại Việt Nam. Tích hợp sẵn các tính năng bán hàng thường dùng: dựng trang chủ theo module, flash sale, bán trọn bộ, bảng size, hoá đơn VAT và hẹn giờ giao hàng.

18khối nội dung cho trang chủ
24tổ hợp bố cục trang sản phẩm
15trang dựng sẵn
2khổ màn hình được tối ưu
01

Trang chủ

Trang chủ ghép từ các khối nội dung rời, cửa hàng tự chọn khối nào hiện và hiện theo thứ tự nào.

Bộ dựng trang chủ theo module Chủ động thay đổi bố cục

  • 18 loại khối nội dung: Slideshow, Flash Sale, nhóm sản phẩm dạng tab và slider, Lookbook, Bundle, Video, Thương hiệu, Tin tức, mã khuyến mãi, chính sách và các dạng banner.
  • Tự sắp thứ tự: Trang chủ có 20 vị trí, mỗi vị trí chọn một loại khối bằng danh sách sổ xuống, không cần chỉnh sửa mã nguồn.
  • Thay đổi theo chiến dịch: Vào mùa khuyến mãi, cửa hàng đưa khối Flash Sale lên đầu trang bằng cách đổi một ô chọn.
  • Khoảng cách riêng theo thiết bị: Mỗi khối thiết lập khoảng cách trên và dưới riêng cho máy tính và điện thoại.
ega-bed.mysapo.net
Trang chủ demo đang bật 13 khối nội dung.
Trang chủ demo đang bật 13 khối nội dung.

Flash Sale Thúc đẩy quyết định mua

  • Đếm ngược thời gian: Hiển thị đồng hồ đếm ngược tới thời điểm kết thúc đợt giảm giá.
  • Thanh đã bán: Hiển thị số lượng đã bán trên tổng số, cho khách hàng thấy mức độ quan tâm của sản phẩm.
  • Hai kiểu hẹn giờ: Lặp lại theo khung giờ trong ngày kèm tích chọn thứ trong tuần, hoặc đặt ngày giờ bắt đầu và kết thúc cho một đợt cụ thể.
  • Trạng thái ngoài giờ sale: Cửa hàng chọn hiện hay ẩn khối này trước khi sale mở và sau khi sale đóng.
Khối Flash Sale kèm đồng hồ đếm ngược và thanh đã bán.
Khối Flash Sale kèm đồng hồ đếm ngược và thanh đã bán.

Lookbook và Bundle Bán theo bộ

  • Điểm chạm trên ảnh: Đặt các điểm tương tác lên ảnh không gian thật, khách hàng bấm vào là xem được sản phẩm trong ảnh.
  • Mua trọn bộ: Khối Bundle gợi ý mua cả bộ và tính sẵn tổng tiền, khách hàng không phải tìm lại từng món.
  • Phù hợp cách khách hàng chọn mua: Với chăn ga gối, khách hàng thường chọn theo tổng thể không gian thay vì theo từng mã sản phẩm.

Ảnh động: bấm một nút là cả bộ vào giỏ, không phải thêm từng món.

ega-bed.mysapo.net
Thêm tất cả sản phẩm trong bộ vào giỏ bằng một thao tác.
Thêm tất cả sản phẩm trong bộ vào giỏ bằng một thao tác.
Khối bán trọn bộ, tổng tiền được tính sẵn.
Khối bán trọn bộ, tổng tiền được tính sẵn.
02

Điều hướng và Tìm kiếm

Menu và ô tìm kiếm giúp khách hàng đi tới đúng nhóm hàng cần xem.

Mega-menu Hiển thị hàng hoá ngay trên menu

  • Kiểu Sản phẩm: Menu hiển thị các sản phẩm do cửa hàng chỉ định kèm giá, khách hàng thêm vào giỏ ngay từ menu.
  • Kiểu Ảnh banner: Menu hiển thị ảnh quảng bá dẫn tới một danh mục hoặc một chương trình khuyến mãi.
  • Menu nhiều cấp: Dạng danh sách liên kết thông thường cho các mục không cần hình ảnh.
  • Tối đa 4 mega-menu: Mỗi menu chọn kiểu hiển thị riêng, dùng đồng thời trên cùng một thanh menu.
ega-bed.mysapo.net
Kiểu Sản phẩm
Kiểu Sản phẩm
ega-bed.mysapo.net
Kiểu Ảnh banner
Kiểu Ảnh banner
ega-bed.mysapo.net
Menu nhiều cấp
Menu nhiều cấp

Điều hướng trên điện thoại Thao tác bằng một tay

  • Menu dạng trượt: Menu nhiều cấp thu gọn, mở ra từ cạnh màn hình, kèm lối tắt tới hệ thống cửa hàng và hotline.
  • Thanh 5 nút cố định: Thanh điều hướng bám đáy màn hình, cửa hàng tự đặt icon, nhãn, đường dẫn và thứ tự cho từng nút.
  • Tự đổi thành nút mua: Khi khách hàng vào trang sản phẩm, thanh này chuyển thành nút thêm vào giỏ và mua ngay.
Menu dạng trượt
Menu dạng trượt
Thanh 5 nút cố định
Thanh 5 nút cố định
Thanh mua hàng ở trang sản phẩm
Thanh mua hàng ở trang sản phẩm
03

Trang sản phẩm

Bố cục trang sản phẩm thay đổi được theo đặc thù hàng hoá của từng cửa hàng.

Bố trí ảnh sản phẩm Đổi cách khách xem hàng

  • 4 kiểu bố trí: ảnh nhỏ bên trái, ảnh nhỏ ở dưới, 1 cột, 2 cột.
  • Ảnh nhỏ bên trái: dải thumbnail dọc cạnh ảnh lớn - xem được nhiều mẫu mà không cần cuộn.
  • Ảnh nhỏ ở dưới: dải thumbnail nằm ngang - dành chỗ ngang tối đa cho ảnh lớn.
  • 1 cột / 2 cột: bỏ thumbnail, xếp toàn bộ ảnh thành cột dọc để khách cuộn xem lần lượt.
  • Phóng to ảnh: bật chế độ xem ảnh lớn để khách quan sát đường may và bề mặt vải.

Vùng khoanh đỏ trong ba ảnh dưới là phần thay đổi khi đổi tuỳ chọn.

ega-bed.mysapo.net
Ảnh nhỏ bên TRÁI - dải thumbnail dọc.
Ảnh nhỏ bên TRÁI - dải thumbnail dọc.
ega-bed.mysapo.net
Ảnh nhỏ ở DƯỚI - dải thumbnail ngang.
Ảnh nhỏ ở DƯỚI - dải thumbnail ngang.
ega-bed.mysapo.net
1 CỘT - bỏ thumbnail, ảnh xếp dọc.
1 CỘT - bỏ thumbnail, ảnh xếp dọc.

Hiển thị mô tả sản phẩm 3 kiểu

  • Tab ngang bên dưới: khối mô tả tràn ngang phía dưới, hợp với sản phẩm cần nhiều hình và nội dung dài.
  • Tab ngang nhóm thông tin: gom mô tả và các chính sách thành tab ngay trong cột thông tin, cạnh nút mua.
  • Gập mở (accordion): từng mục thu gọn lại, khách bấm mục nào mở mục đó - trang ngắn, đỡ rối.
  • 3 khối thông tin bổ sung: nội dung lấy từ trang tĩnh hoặc từ trường riêng của sản phẩm, hiển thị chung với mô tả.

Vùng khoanh đỏ là khối mô tả - để ý vị trí và cách gom nhóm thay đổi theo từng kiểu.

ega-bed.mysapo.net
Tab ngang BÊN DƯỚI - khối mô tả tràn ngang cuối trang.
Tab ngang BÊN DƯỚI - khối mô tả tràn ngang cuối trang.
ega-bed.mysapo.net
Tab ngang NHÓM - nằm trong cột thông tin, cạnh nút mua.
Tab ngang NHÓM - nằm trong cột thông tin, cạnh nút mua.
ega-bed.mysapo.net
GẬP MỞ (accordion) - từng mục thu gọn.
GẬP MỞ (accordion) - từng mục thu gọn.

Bảng size và công cụ tính size Giảm tỉ lệ đổi trả

  • Gợi ý theo số đo: Khách hàng nhập kích thước giường, công cụ đề xuất size phù hợp.
  • Bảng thông số dạng popup: Mở ngay tại trang sản phẩm, khách hàng không phải rời trang đang xem.
  • Dùng chung hoặc riêng: Áp dụng một bảng size cho toàn cửa hàng, hoặc đặt bảng riêng cho từng sản phẩm.

Ảnh động: chọn loại sản phẩm, nhập số đo, bấm Tính Size và nhận kết quả.

ega-bed.mysapo.net
Nhập số đo 160 -> gợi ý đúng size ga, chăn và số vỏ gối.
Nhập số đo 160 -> gợi ý đúng size ga, chăn và số vỏ gối.
ega-bed.mysapo.net
Tab Bảng Size - bảng thông số theo loại sản phẩm.
Tab Bảng Size - bảng thông số theo loại sản phẩm.

Các khối trên trang sản phẩm Bật tắt độc lập

  • Quà tặng khuyến mãi: khối ưu đãi đặt ngay dưới giá, kèm nút sao chép mã.
  • Mã giảm giá: dãy voucher áp dụng cho sản phẩm, khách bấm một cái là copy.
  • Chọn biến thể: màu và kích thước dạng ô trực quan, kèm lối vào bảng size.
  • Tồn kho / đếm ngược: hiển thị trạng thái bán để tạo cảm giác khan hiếm.
  • Dịch vụ áp dụng: trả góp, giao lắp trong ngày, tìm showroom gần nhất.
  • Video sản phẩm: khối video thực tế đặt riêng cho từng sản phẩm.

Mỗi ảnh khoanh đỏ đúng một khối - tất cả đều bật/tắt riêng trong trình tuỳ chỉnh.

ega-bed.mysapo.net
Quà tặng khuyến mãi
Quà tặng khuyến mãi
ega-bed.mysapo.net
Mã giảm giá - bấm để xem điều kiện chi tiết
Mã giảm giá - bấm để xem điều kiện chi tiết
ega-bed.mysapo.net
Chọn biến thể
Chọn biến thể
ega-bed.mysapo.net
Tồn kho / đếm ngược
Tồn kho / đếm ngược
ega-bed.mysapo.net
Dịch vụ áp dụng
Dịch vụ áp dụng
ega-bed.mysapo.net
Video sản phẩm
Video sản phẩm

Gợi ý sản phẩm mua cùng Tăng giá trị mỗi đơn

  • Cửa hàng tự chọn: Chỉ định sản phẩm đi kèm cho từng mặt hàng cụ thể, không để hệ thống gợi ý ngẫu nhiên.
  • Tick chọn nhanh: Khách hàng bỏ tick món không cần, tổng tiền cập nhật ngay theo lựa chọn.
  • Thêm một lần: Chọn xong bấm một nút là cả nhóm vào giỏ, không phải mở từng trang sản phẩm.

Ảnh động: bỏ/chọn sản phẩm đi kèm, tổng tiền đổi theo rồi thêm cả nhóm vào giỏ.

ega-bed.mysapo.net
Chọn thêm sản phẩm đi kèm, tổng tiền cập nhật ngay.
Chọn thêm sản phẩm đi kèm, tổng tiền cập nhật ngay.

Tìm showroom gần nhất Nối online với cửa hàng

  • Ngay trên trang sản phẩm: Khách hàng đang xem hàng có thể tìm chỗ trải nghiệm thật mà không rời trang.
  • Lọc theo khu vực: Chọn tỉnh thành để xem danh sách cửa hàng kèm địa chỉ.
  • Dữ liệu từ Google Sheet: Mở chi nhánh mới chỉ cần thêm một dòng trong Sheet, không đụng vào giao diện.
ega-bed.mysapo.net
Bấm
Bấm "Tìm showroom" ngay tại khối dịch vụ của trang sản phẩm.
04

Danh mục và Bộ lọc

Công cụ giúp khách hàng thu hẹp danh sách khi cửa hàng có nhiều mã hàng.

Bộ lọc sản phẩm Thu hẹp lựa chọn

  • 5 nhóm lọc: Khoảng giá, hãng sản xuất, loại sản phẩm, màu sắc và tag tuỳ ý.
  • Tự thiết lập: Mỗi nhóm bật tắt riêng, đổi được tiêu đề và thứ tự hiển thị trên dưới.
  • Mốc giá do cửa hàng đặt: Danh sách khoảng giá nhập thủ công theo mặt bằng giá của cửa hàng.
  • Thu gọn trên điện thoại: Bộ lọc gom vào một nút, mở ra dạng bảng trượt để không chiếm chỗ hiển thị sản phẩm.
Cột lọc trên máy tính
Cột lọc trên máy tính
Bảng lọc trên điện thoại
Bảng lọc trên điện thoại

Xem nhanh Mua không rời danh sách

  • Mở ngay tại danh sách: Khách hàng bấm biểu tượng trên thẻ sản phẩm để xem ảnh và mô tả ngắn.
  • Chọn thuộc tính trong cửa sổ: Chọn kích thước và màu rồi thêm vào giỏ mà không chuyển trang.
  • Giữ mạch duyệt hàng: Khách hàng quay lại đúng vị trí đang xem sau khi đóng cửa sổ.
ega-bed.mysapo.net
Cửa sổ xem nhanh sản phẩm.
Cửa sổ xem nhanh sản phẩm.
05

Giỏ hàng và Thanh toán

Các tính năng ở bước cuối, gồm cả những yêu cầu riêng của thị trường Việt Nam.

Đề xuất mua thêm Tăng giá trị trung bình đơn

  • Thanh tiến trình theo mốc: Hiển thị số tiền còn thiếu để khách hàng đạt mốc ưu đãi tiếp theo.
  • 3 mốc, 3 loại ưu đãi: Mỗi mốc chọn miễn phí vận chuyển, mã giảm giá hoặc quà tặng.
  • Tự thêm quà vào giỏ: Với loại quà tặng, sản phẩm quà được thêm vào giỏ khi khách hàng đạt mốc.
  • Ngưỡng và nội dung tự đặt: Cửa hàng nhập mức tiền và câu thông báo riêng cho từng mốc.

Ảnh động: tăng số lượng trong giỏ, thanh ưu đãi chạy qua từng mốc và tự nhận mã.

ega-bed.mysapo.net
Từ
Từ "cần mua thêm 300.000đ" tới khi đạt đủ cả ba mốc ưu đãi.

Hoá đơn VAT và Hẹn giờ giao Yêu cầu riêng của thị trường Việt Nam

  • Tra cứu mã số thuế: Khách hàng nhập mã số thuế và bấm Tra cứu, hệ thống tự điền tên và địa chỉ công ty - không phải gõ tay, không sai chính tả.
  • Form hoá đơn đầy đủ: Mã số thuế, tên công ty, địa chỉ, email nhận hoá đơn; khách lưu lại để dùng cho các đơn sau.
  • Chọn ngày và khung giờ nhận: Phù hợp với hàng cồng kềnh cần có người ở nhà nhận và lắp đặt.
  • Khung giờ do cửa hàng đặt: Danh sách khung giờ khai báo theo lịch giao thực tế (demo: 08h-12h, 14h-18h, 19h-21h).

Ảnh động bên dưới quay đúng thao tác thật: gõ mã số thuế của một doanh nghiệp có thật rồi bấm Tra cứu.

ega-bed.mysapo.net
Tra cứu mã số thuế - tên và địa chỉ công ty tự điền vào form.
Tra cứu mã số thuế - tên và địa chỉ công ty tự điền vào form.
ega-bed.mysapo.net
Hẹn giờ nhận hàng - chọn ngày và khung giờ.
Hẹn giờ nhận hàng - chọn ngày và khung giờ.

Hành vi thêm vào giỏ 3 kiểu hiển thị

  • Drawer: Giỏ hàng trượt ra từ cạnh phải, khách hàng xem lại rồi tiếp tục mua.
  • Popup: Cửa sổ xác nhận nhỏ, ít che nội dung đang xem.
  • Chuyển sang trang giỏ hàng: Đưa khách hàng thẳng tới bước thanh toán.
06

Nội dung và Cửa hàng

Khu vực bài viết và hệ thống chi nhánh.

Blog Hỗ trợ tìm kiếm tự nhiên

  • Mục lục tự động: Bài viết dài tự sinh mục lục theo các đề mục, có tuỳ chọn đánh số.
  • Sidebar đầy đủ: Danh mục tin, tin nổi bật và danh sách tag.
  • Bài viết liên quan: Hiển thị cuối bài để giữ khách hàng đọc tiếp.
ega-bed.mysapo.net
Trang tin tức.
Trang tin tức.

Nhúng sản phẩm vào bài viết Bán ngay trong nội dung

  • Chèn ở bất kỳ đâu: Đặt một sản phẩm hoặc cả một danh mục vào giữa nội dung bài viết, ngay đoạn đang nói về mặt hàng đó.
  • Thẻ sản phẩm đầy đủ: Khối nhúng hiển thị ảnh, tên, giá và nút mua như ngoài trang danh mục.
  • Không rời bài đọc: Khách hàng đang đọc bài tư vấn có thể mua luôn, không phải quay lại trang danh mục để tìm.
  • Dùng cho bài tư vấn: Hợp với các bài kiểu "chọn chăn ga theo mùa" - nói tới mẫu nào thì gắn đúng mẫu đó vào.
ega-bed.mysapo.net
Khối sản phẩm nhúng giữa nội dung bài viết.
Khối sản phẩm nhúng giữa nội dung bài viết.

Hệ thống cửa hàng Quản lý bằng Google Sheet

  • Dữ liệu ngoài giao diện: Danh sách chi nhánh nạp từ Google Sheet, cửa hàng cập nhật trên Sheet là website đổi theo.
  • Lọc theo tỉnh thành: Khách hàng chọn khu vực để xem các chi nhánh gần nhất.
  • Nối với trang sản phẩm: Dùng chung dữ liệu với nút tìm showroom ở phần chính sách của trang sản phẩm.

Bộ trang dựng sẵn Đủ dùng từ khi khai trương

  • Trang giới thiệu cửa hàng: Liên hệ có bản đồ nhúng, giới thiệu, FAQ kèm form gửi câu hỏi.
  • Trang bán hàng: Trang Flash Sale riêng dùng chung danh sách sản phẩm với khối ở trang chủ.
  • Trang tài khoản: 8 trang gồm đăng nhập, đăng ký, đơn hàng, địa chỉ và đổi mật khẩu.
  • Trang phụ trợ: Trang 404 với ảnh tuỳ chỉnh và trang thông báo bảo trì.
ega-bed.mysapo.net
Trang liên hệ có bản đồ nhúng.
Trang liên hệ có bản đồ nhúng.
07

Bộ ảnh đầy đủ

15 trang, chụp ở hai khổ màn hình chuẩn. Rê chuột lên ảnh để xem trọn trang, bấm để phóng to.

Trang chủ

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Tất cả sản phẩm

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Danh mục sản phẩm

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Chi tiết sản phẩm

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Sản phẩm bán theo bộ

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Giỏ hàng

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Kết quả tìm kiếm

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Tin tức

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Chi tiết bài viết

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Trang Flash Sale

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Liên hệ

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Giới thiệu

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Đăng nhập

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Đăng ký

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px

Trang 404

ega-bed.mysapo.net
Máy tính · 1440px
Máy tính · 1440px
Điện thoại · 375px
Điện thoại · 375px
Cuộn để xem · bấm nền hoặc Esc để đóng