Thiết kế website thương mại điện tử: thực hành theo trang
Hướng dẫn thiết kế cửa hàng theo từng trang: trang chủ, điều hướng, danh mục, tìm kiếm, sản phẩm và di động, kèm nội dung cần có và lỗi nên tránh.
Câu hỏi thường gặp
Thực hành thiết kế website thương mại điện tử nào quan trọng nhất?
Điều hướng theo cách khách nghĩ về sản phẩm, trang tải nhanh, ảnh sản phẩm lớn có thể phóng to, giá và phí giao gần nút Thêm vào giỏ, đánh giá dễ thấy, tìm kiếm hoạt động tốt và thanh toán ngắn có lựa chọn khách. Hãy ưu tiên điện thoại vì phần lớn khách duyệt cửa hàng trên đó.
Trang danh mục nên hiện bao nhiêu sản phẩm?
Đủ để khách so sánh mà không phải chuyển trang liên tục. Nhiều cửa hàng hiện 24–48 sản phẩm mỗi trang hoặc dùng nút Tải thêm. Quan trọng hơn là bộ lọc theo thuộc tính khách chọn như cỡ, màu, giá và tình trạng hàng.
Thông tin nào cần xuất hiện đầu trang sản phẩm?
Tên sản phẩm, ảnh chính, giá, bộ chọn biến thể chính (cỡ, màu), tình trạng tồn kho, nút Thêm vào giỏ và thông tin giao hàng. Nếu có đánh giá, điểm sao và số lượt đánh giá cũng nên ở đó.
Trang chủ cửa hàng có nên dùng băng chuyền ảnh không?
Thường là không. Thanh trượt tự đổi thường bị bỏ qua, ảnh hưởng khả năng tiếp cận và thời gian tải. Một ảnh mở đầu mạnh, thông điệp rõ và liên kết đến danh mục hàng đầu thường hiệu quả hơn.
Thiết kế thương mại điện tử tốt giúp khách nhanh chóng làm ba việc: tìm đúng sản phẩm, đủ tin tưởng để mua và thanh toán không vướng mắc. Trên thực tế, đó là điều hướng theo cách khách suy nghĩ, trang di động nhanh, ảnh sản phẩm lớn, hiển thị sớm giá và phí giao, đánh giá dễ thấy và thanh toán ngắn.
Thay vì liệt kê nguyên tắc chung, hướng dẫn này đi theo từng trang vì câu hỏi của khách thay đổi theo từng bước.
Trang chủ: “Tôi đến đúng nơi chưa?”
Trang chủ chỉ có vài giây để xác nhận bạn bán gì và dành cho ai.
Nên có:
Tiêu đề nói rõ sản phẩm bằng từ ngữ đơn giản (“Túi da thủ công dùng hàng ngày”, không phải “Được làm dành riêng cho bạn”)
Một ảnh mở đầu cho thấy sản phẩm đang được sử dụng
Liên kết kèm ảnh đến 3–6 danh mục hàng đầu
Cam kết chính về giao hàng hoặc đổi trả ở thanh mảnh phía trên
Sản phẩm bán chạy hoặc hàng mới để khách cũ thấy nội dung mới
Tránh: băng chuyền tự chuyển, cửa sổ bật lên trước khi trang tải xong và video mở đầu tự chạy làm chậm màn hình điện thoại.
Điều hướng: “Sản phẩm tôi muốn ở đâu?”
Đặt tên danh mục theo cách khách tìm. “Giày chạy bộ” thay vì “Giày hiệu năng”. Nhật ký tìm kiếm và truy vấn trong Google Search Console cho biết từ ngữ khách dùng.
Giữ mục cấp cao gọn. Năm đến tám mục chính thường là giới hạn hợp lý. Với danh mục lớn, dùng menu mở rộng, thêm ảnh nếu sản phẩm cần hình minh họa.
Cho sản phẩm xuất hiện ở nhiều danh mục. Áo khoác chống nước có thể nằm trong “Áo khoác” và “Đồ đi bộ đường dài”.
Thêm đường dẫn breadcrumb vào trang danh mục và sản phẩm để khách quay lên cấp trên. Đánh dấu bằng BreadcrumbList để công cụ tìm kiếm hiểu.
Trang danh mục: “Sản phẩm nào phù hợp với tôi?”
Đây là nơi khách so sánh nhiều nhất.
Thành phần
Thực hành tốt
Thẻ sản phẩm
Tỷ lệ ảnh thống nhất, tên, giá, điểm đánh giá và ảnh thứ hai khi rê chuột
Bộ lọc
Theo quyết định thật: cỡ, màu, giá, chất liệu, còn hàng; hiển thị số lượng
Sắp xếp
Mặc định “Nổi bật” hoặc “Bán chạy”; có lựa chọn giá và mới nhất
Tồn kho
Ẩn hoặc đánh dấu rõ sản phẩm hết hàng
Phân trang
Nút Tải thêm hoặc số trang; giữ bộ lọc khi khách quay lại
Điện thoại
Bộ lọc trong bảng trượt lên, có nút rõ “Hiển thị 34 kết quả”
Lỗi phổ biến là bộ lọc tự xóa khi khách mở sản phẩm rồi quay lại. Hãy thử nút Quay lại.
Tìm kiếm trên website: “Tôi biết mình cần gì”
Người dùng tìm kiếm thường có ý định mua cao, nên ô tìm kiếm yếu làm mất doanh thu trực tiếp.
Đặt ô tìm kiếm ở đầu trang, luôn thấy trên máy tính và cách một lần chạm trên điện thoại.
Chấp nhận lỗi chính tả và từ đồng nghĩa (“tee” vẫn tìm ra “t-shirt”).
Hiển thị gợi ý sản phẩm kèm ảnh khi khách gõ.
Không để ngõ cụt. Khi không có kết quả, gợi ý danh mục hoặc hàng bán chạy.
Rà soát cụm tìm kiếm hàng tháng. Tìm kiếm thường xuyên không có kết quả cho biết nên nhập hàng gì hoặc đổi tên sản phẩm thế nào.
Trang sản phẩm: “Tôi có nên mua món này không?”
Trang sản phẩm thực hiện việc bán hàng. Hãy rà từ trên xuống.
Ảnh
Nhiều ảnh cho mỗi mặt hàng: mặt trước, sau, chi tiết, tỷ lệ (trên người hoặc cạnh vật quen thuộc) và ảnh đang sử dụng
Phóng to trên máy tính và chụm ngón tay trên điện thoại
Phông nền nhất quán toàn danh mục
Thêm video khi cần thể hiện chuyển động, chẳng hạn độ rủ của vải hoặc cách gập thiết bị
Giá, lựa chọn và nút mua
Đặt giá gần tên sản phẩm, hiển thị rõ giá khuyến mãi
Với ít lựa chọn, dùng nút hoặc ô màu cho biến thể thay vì danh sách thả xuống
Hiện cỡ đã hết nhưng vô hiệu hóa để khách biết phạm vi lựa chọn
Một nút Thêm vào giỏ có tương phản cao; trên điện thoại nên có phiên bản cố định khi cuộn
Đặt ước tính giao hàng và phí hoặc ngưỡng miễn phí ngay bên dưới
Mô tả và chi tiết
Bắt đầu bằng lợi ích của sản phẩm cho khách rồi đến thông số. Dùng bảng ngắn cho kích thước, chất liệu và cách bảo quản. Hướng dẫn cỡ nên mở ngay trong bảng trên cùng trang, không đưa khách đi nơi khác.
Niềm tin
Điểm sao và số lượt đánh giá gần đầu trang; đánh giá đầy đủ ở phía dưới, thêm ảnh khách gửi nếu có thể
Tóm tắt chính sách đổi trả cạnh nút mua
Trả lời các câu hỏi thường tới hộp thư hỗ trợ
Thêm Product schema (tên, ảnh, giá, tồn kho, đánh giá) để kết quả tìm kiếm có thể hiển thị giá và điểm sao.
Giỏ hàng và thanh toán: “Cho tôi trả tiền rồi đi”
Thiết kế thanh toán là một lĩnh vực riêng. Tóm lại: hiển thị toàn bộ chi phí sớm, cho thanh toán khách, rút gọn biểu mẫu và có ví nhanh như Apple Pay/Google Pay. Hướng dẫn tối ưu thanh toán trình bày chi tiết từng bước.
Trang sau mua hàng: “Đơn đã xong chưa và tiếp theo là gì?”
Thiết kế không kết thúc ở nút Thanh toán. Gần như mọi khách đều đọc trang xác nhận và email:
Nêu rõ số đơn, sản phẩm, tổng tiền và ngày giao ước tính.
Mời tạo tài khoản tại đây, điền sẵn thông tin khách vừa nhập.
Liên kết theo dõi đơn và quy trình đổi trả.
Chỉ gợi ý sản phẩm liên quan nếu thật sự phù hợp với món vừa mua.
Giữ giao diện email xác nhận đồng bộ cửa hàng để không bị nhầm là thư rác.
Thiết kế cho điện thoại trước
Phần lớn lượt truy cập cửa hàng đến từ điện thoại. Hãy thiết kế và thử giao diện điện thoại trước rồi mới mở rộng lên máy tính:
Vùng chạm cao khoảng 44 pixel trở lên
Chữ ít nhất 16 pixel để iOS không tự phóng to trường biểu mẫu
Nút Thêm vào giỏ cố định trên trang sản phẩm
Không dùng tính năng chỉ hoạt động khi rê chuột vì màn hình cảm ứng không có thao tác đó
Thử trên điện thoại tầm trung thực tế qua mạng di động
Tốc độ và khả năng tiếp cận
Đây là quyết định thiết kế, không chỉ là việc kỹ thuật.
Tốc độ: nén ảnh, dùng WebP hoặc AVIF, đặt chiều rộng và chiều cao để tránh bố cục nhảy, hạn chế ứng dụng và mã bên thứ ba, kiểm tra Core Web Vitals trong PageSpeed Insights của Google.
Khả năng tiếp cận: độ tương phản màu đạt WCAG 2.2 AA, ảnh sản phẩm có alt, trường biểu mẫu có nhãn, menu và bộ lọc truy cập được bằng bàn phím, thông báo lỗi giải thích vấn đề. Cửa hàng dễ tiếp cận thì mọi người đều dùng dễ hơn; nhiều nơi còn xem đây là yêu cầu pháp lý.
Rà soát thiết kế trước khi ra mắt
[ ] Trang chủ nói rõ bạn bán gì trong một câu
[ ] Tên danh mục khớp cụm khách tìm
[ ] Bộ lọc còn nguyên khi bấm Quay lại
[ ] Tìm kiếm xử lý lỗi gõ và không trả trang trống
[ ] Mỗi sản phẩm có nhiều ảnh và chức năng phóng to
[ ] Phí hoặc ngưỡng giao hiện trên trang sản phẩm
[ ] Đánh giá hiển thị gần đầu trang sản phẩm
[ ] Có nút Thêm vào giỏ cố định trên điện thoại
[ ] Cho phép thanh toán khách
[ ] Đã kiểm tra báo cáo di động PageSpeed Insights và sửa vấn đề lớn
Tạo cửa hàng trực tuyến
Nếu bắt đầu từ đầu, bố cục khởi điểm tốt giúp giảm nhiều quyết định. Xem mẫu cửa hàng, hoặc mô tả cửa hàng trong cuộc trò chuyện với We.Inc để tạo cửa hàng có trang sản phẩm, giỏ hàng và thanh toán, sau đó chỉnh trực quan hoặc bằng mã; có kèm lưu trữ và SSL.