Case study · Web22.dev

Nguyệt Hoa

Website thương hiệu bánh trung thu cao cấp — một cửa hàng trực tuyến hoàn chỉnh: duyệt, lọc, chọn biến thể, giỏ hàng, đặt hàng, mã giảm giá và đơn về thẳng email. Đẹp, nhanh, chuẩn SEO.

Loại dự án
Thương mại điện tử
Quy mô
12 SP · 5 danh mục
Ngôn ngữ
Song ngữ Việt – Anh
Nền tảng
Next.js 16 · React 19
mooncake.mauweb.dev
Trang chủ Nguyệt Hoa

Trang chủ — hero điện ảnh với vầng trăng, hộp quà 3D xoay được, bộ sưu tập sản phẩm. (Cuộn trong khung để xem toàn trang)

Mọi chức năng của một cửa hàng thật

Không phải landing page. Đây là luồng mua sắm trọn vẹn từ lúc khách ghé đến lúc đơn về hộp thư.

01 — Duyệt & lọc

Cửa hàng chuẩn thương mại điện tử

Trang cửa hàng riêng với đầy đủ công cụ như các sàn lớn: lọc theo danh mục, theo khoảng giá, theo phân khúc; sắp xếp và tìm kiếm tức thì.

  • Lọc danh mục · giá · phân khúc (Tinh hoa / Thượng hạng / Di sản)
  • Sắp xếp theo giá, độ phổ biến, hàng mới
  • Nhãn động: Mới · Bán chạy · Giảm giá + đánh giá sao
Trang cửa hàng
02 — Trang sản phẩm

Album ảnh & chọn biến thể

Mỗi sản phẩm là một trang bán hàng thuyết phục: album ảnh phóng to từng góc, chọn trọng lượng & khắc tên (giá tự cộng phụ phí), gợi ý sản phẩm liên quan.

  • Album ảnh + phóng to toàn màn hình (lightbox)
  • Biến thể: trọng lượng, khắc tên lên hộp
  • Dữ liệu Schema Product → hiện giá/sao trên Google
Trang chi tiết sản phẩm
03 — Giỏ hàng & đặt hàng

Đặt hàng, mã giảm giá & email tự động

Giỏ hàng lưu sẵn trên trình duyệt, trang đặt hàng với 3 cách thanh toán, mã giảm giá trừ tiền ngay. Tiền tính lại ở máy chủ chống gian lận. Đơn về thẳng email chủ shop.

  • 3 phương thức: COD · chuyển khoản · MoMo
  • Mã giảm giá: theo %, tiền mặt, hoặc freeship
  • Email đơn hàng trình bày đẹp về hộp thư tức thì
Trang đặt hàng
04 — Song ngữ & nội dung

Việt – Anh chuẩn SEO + blog

Toàn bộ web có bản tiếng Anh ở đường dẫn /en — dịch 100% từ sản phẩm đến nút bấm, khai báo hreflang & canonical chuẩn. Kèm blog gắn Schema Article xây uy tín thương hiệu.

  • Tiếp cận khách doanh nghiệp & quốc tế
  • hreflang + canonical riêng từng trang
  • Blog: văn hoá, cẩm nang quà, xu hướng
Phiên bản tiếng Anh
Responsive

Đẹp trọn vẹn trên điện thoại

Mọi trang được tối ưu cho màn hình nhỏ — nơi phần lớn khách hàng thật sự mua sắm.

Trang chủ trên điện thoại
Trang chủ
Cửa hàng & lọc trên điện thoại
Cửa hàng & lọc
Chi tiết sản phẩm trên điện thoại
Chi tiết sản phẩm
Đặt hàng trên điện thoại
Đặt hàng

Công nghệ 2026

Nền tảng hiện đại nhất, tối ưu cho tốc độ và độ bền vững.

Next.js 16Khung nền · SEO
React 19Giao diện tương tác
TypeScriptÍt lỗi, dễ bảo trì
Tailwind v4Thiết kế nhất quán
Hạ tầng đám mâyCDN toàn cầu · SSL
Email tự độngĐơn về hộp thư tức thì

Vì sao chọn Web22.dev

  • Cửa hàng đầy đủ — không dừng ở landing page: lọc, biến thể, giỏ hàng, đặt hàng, mã giảm, email đơn.
  • Tốc độ & SEO hàng đầu — HTML tĩnh + CDN + dữ liệu có cấu trúc + sitemap tự động.
  • Song ngữ chuẩn quốc tế — sẵn sàng cho khách doanh nghiệp & nước ngoài.
  • Giao diện thương hiệu thật — hộp quà 3D, hero điện ảnh, hoạt ảnh tinh tế.
  • Vận hành thực tế — đơn về email, tính tiền an toàn ở máy chủ.

Bạn muốn một website bán hàng như thế này?

Web22.dev nhận thiết kế website thương mại điện tử trọn gói — từ thương hiệu, tính năng đến tốc độ và SEO. Mọi ngành hàng, mọi mùa.