Bỏ qua tới nội dung
Case study · Nội thất gỗ · Website thật

TENON

Website bán nội thất gỗ nguyên khối đóng theo đơn. Đồ gỗ đóng tay giá vài chục triệu một món, khách xem rất kỹ rồi mới xuống tiền, nên cả trang dựng quanh đúng thói quen đó: xem ảnh món đồ ở mọi góc, đọc số đo tới từng centimet, biết trước tiền giao tới nhà là bao nhiêu, rồi mới bấm đặt. Toàn bộ luồng mua hàng chạy thật, từ lọc theo nhóm và mức giá tới đặt hàng bốn bước và chuyển khoản quét mã.

Xem website đang chạy tenon.mauweb.dev
Loại dự án
Bán hàng trực tuyến
Ngành
Nội thất gỗ
Mô hình
Đặt món, xưởng đóng theo đơn
Nền tảng
WordPress & WooCommerce
tenon.mauweb.dev
Trang chủ TENON nền kem, ảnh phòng khách gỗ ấm chiếm trọn màn hình đầu

Trang chủ đi từ một khung ảnh lớn xuống dần tới các nhóm hàng, ba khoảng ảnh khổ rộng kể chuyện nghề mộc, rồi tới món đang bán và ghi chép của xưởng. (Cuộn trong khung để xem toàn trang)

Tính năng

Bán một cái ghế mười triệu qua màn hình thì phải cho người ta xem cho đã

Người mua đồ gỗ đóng tay không chốt trong ba phút. Họ đo lại khoảng trống trong nhà, so nước gỗ, tính xem kê cạnh bộ bàn cũ có hợp không, rồi mới hỏi tiền giao. Website này đưa hết mấy thứ đó lên trang: ảnh nhiều góc, số đo cụ thể, cách giữ đồ, tiền giao tính theo khu vực. Dưới đây là từng phần đã dựng, tất cả đều bấm được ở bản đang chạy.

01 — Cửa hàng

Mười sáu món, tám nhóm hàng, lọc xong là ra đúng thứ đang cần

Cột bên trái gom sẵn tám nhóm: sofa, ghế, bàn, bàn trà, tủ, kệ, đèn và đồ ngoài trời, mỗi nhóm ghi luôn số món đang có nên khách không bấm vào rồi mới thấy trống. Kèm ba mức giá để người có sẵn ngân sách lọc trước, và một ô tìm cho ai đã biết tên món. Người mua nội thất hay đi theo kiểu "cần một cái ghế cho ban công dưới mười lăm triệu", nên bộ lọc phải ghép được cả nhóm hàng lẫn mức tiền.

  • Tám nhóm hàng, mỗi nhóm hiện sẵn số món đang bán
  • Ba mức giá và ô tìm theo tên món
  • Thẻ hàng ghi giá, chất liệu, điểm đánh giá và mấy chấm màu gỗ hay vải của món
Trang cửa hàng TENON với cột lọc theo nhóm hàng và mức giá bên trái
02 — Trang từng nhóm hàng

Mỗi nhóm hàng một địa chỉ riêng, gửi cho nhau được

Chọn "ngoài trời" là ra một trang riêng chỉ có đồ ngoài trời, đường dẫn sạch tiếng Việt. Chuyện này nghe nhỏ nhưng đổi cách khách dùng web: vợ chồng bàn nhau sắm bộ bàn ghế sân thượng thì gửi thẳng một đường dẫn cho nhau, thay vì bảo "vào web rồi bấm lọc giùm". Người gõ tìm trên mạng theo tên nhóm hàng cũng rơi đúng vào trang đó chứ không rơi vào trang chủ rồi lạc.

  • Tám nhóm hàng tương ứng tám trang riêng, đường dẫn tiếng Việt
  • Xưởng tự thêm nhóm mới hoặc đổi tên nhóm trong trang quản trị
  • Vẫn giữ nguyên cột lọc, đổi nhóm khác ngay tại chỗ
Trang nhóm hàng đồ ngoài trời của TENON
03 — Trang từng món

Xem ảnh như đang đi quanh món đồ, đọc số đo như đang cầm thước

Album ảnh dựng riêng cho trang này: bấm qua lại, đếm ảnh, bấm phím mũi tên, vuốt trên điện thoại, mở ảnh lớn xem cận thớ gỗ rồi thoát ra vẫn đúng chỗ cũ. Bên dưới chia bốn mục cho bốn câu hỏi khách hay hỏi nhất: làm bằng gì, kê vừa chỗ nào, giữ ra sao, và số đo cụ thể tới từng centimet, kể cả chiều cao mặt ngồi. Cuối trang là nhận xét của người đang dùng và vài món kê chung hợp nhà.

  • Album ảnh nhiều góc, xem ảnh lớn, dùng được bằng phím và vuốt tay
  • Số đo đầy đủ: dài, sâu, cao, cao mặt ngồi, cân nặng
  • Nhận xét khách và gợi ý món kê chung ngay dưới
Trang sản phẩm sofa Fjord 3 chỗ với album ảnh và bảng số đo
04 — Giỏ hàng

Giỏ hàng dựng lại theo giao diện, không để lòi bảng biểu mặc định

Phần lớn web bán hàng dựng nhanh đều lộ ra ở chỗ này: mặt tiền trau chuốt, bấm vào giỏ là ra một cái bảng thô của phần mềm nền, chữ nghĩa lệch hẳn với phần còn lại. Ở đây giỏ hàng viết lại từ đầu theo đúng bộ chữ và màu của xưởng. Khách sửa số lượng ngay tại chỗ, nhập mã giảm giá, và thấy trước tiền giao tính theo khu vực trước khi bước sang đặt hàng.

  • Sửa số lượng, xoá món, nhập mã giảm giá ngay trong giỏ
  • Tính trước tiền giao theo khu vực, không để khách đoán
  • Giỏ trống cũng có trang riêng, dẫn khách quay lại cửa hàng
Giỏ hàng TENON với hai món và cột tóm tắt đơn bên phải
05 — Đặt hàng & thanh toán

Bốn bước rõ ràng, chuyển khoản quét mã cho xong trong một lần mở điện thoại

Trang đặt hàng chia bốn khối: thông tin liên hệ, địa chỉ giao, chọn cách giao, chọn cách trả tiền. Khách Việt mua món vài chục triệu phần lớn chuyển khoản, nên phần chuyển khoản quét mã đặt ngay trong luồng, không bắt thoát ra mở ứng dụng ngân hàng rồi mò số tài khoản. Bên cạnh là tóm tắt đơn luôn hiện tiền cuối cùng, kèm mấy dòng ghi chú viết riêng cho đồ đóng theo đơn — thứ tự nhận đơn, thời gian đóng, cách xưởng báo lịch giao.

  • Bốn khối tách bạch, điền tới đâu biết còn thiếu gì tới đó
  • Chuyển khoản quét mã ngay trong trang, kèm cách trả tiền khi nhận
  • Phần đặt hàng do Web22 tự viết, hiện có mặt trên kho plugin của WordPress.org
Trang đặt hàng TENON chia bốn bước với cột tóm tắt đơn
06 — Giao hàng

Đồ cồng kềnh nên tiền giao phải nói trước, đừng để tới lúc chốt đơn mới lòi ra

Một bộ sofa không giao như cái áo. Xưởng chia hai khu vực, mỗi khu ba cách giao, và đơn từ ba mươi triệu trở lên thì gói tiêu chuẩn miễn phí. Toàn bộ mức phí đó nằm sẵn ở trang giao hàng, khách đọc trước khi bỏ món vào giỏ. Cách này bớt hẳn kiểu bỏ giỏ giữa chừng vì phút cuối thấy thêm một khoản không ai báo trước.

  • Hai khu vực, ba cách giao, ghi rõ mức phí từng cách
  • Đơn từ ba mươi triệu miễn phí gói tiêu chuẩn
  • Mức phí ở trang chính sách và mức tính trong giỏ là một, không hai đường
Trang chính sách giao hàng của TENON
07 — Bảo hành & chính sách

Sáu trang chính sách viết cho người đọc, không chép mẫu trên mạng

Bảo hành, đổi trả, giao hàng, bảo mật, cookie, điều khoản — sáu trang, viết bằng tiếng Việt thường, câu nào cũng nói được một việc có thật. Với đồ gỗ thì đây không phải thủ tục cho có: khách bỏ ra ba bốn chục triệu luôn muốn biết mối mộng hở thì ai chịu, gỗ cong do thời tiết có được đổi không, trả hàng thì ai chở về. Đọc thấy trả lời thẳng mấy câu đó, người ta mới dám đặt.

  • Sáu trang chính sách, đường dẫn tiếng Việt, có mặt ở chân mọi trang
  • Nói rõ phạm vi bảo hành và trường hợp không nhận bảo hành
  • Viết theo đúng cách xưởng đang làm, không chép mẫu chung chung
Trang bảo hành và cam kết của TENON
08 — Ghi chép trong xưởng

Chín bài viết kéo người chưa định mua quay lại lần hai

Người sắm đồ gỗ thường tìm hiểu cả tháng trước khi chọn. Mục ghi chép nói đúng thứ họ đang tra: chọn độ sâu mặt ngồi thế nào cho vừa người, xưởng đánh dầu gỗ sồi ra sao, một mối ghép tốt khác mối ghép ẩu ở chỗ nào, da thật có mấy loại. Đọc xong một bài là hiểu vì sao món đồ có giá đó, nên bài viết vừa giữ chân người chưa mua, vừa đỡ cho xưởng khỏi giải thích lại từ đầu với từng khách.

  • Chín bài, mỗi bài một trang riêng có ảnh bìa và ngày đăng
  • Cuối bài dẫn tiếp sang bài khác, người đọc ở lại lâu hơn
  • Xưởng tự viết bài mới trong trang quản trị, không cần nhờ ai
Trang danh sách bài viết Ghi chép từ bàn thợ của TENON
09 — Trang bài viết

Bài đọc thoáng, chữ to, đọc trên điện thoại không mỏi mắt

Bài dài về nghề mộc mà dồn thành khối chữ đặc thì không ai đọc hết. Trang bài mở bằng một khung ảnh lớn, rồi để cột chữ hẹp vừa tầm mắt, cỡ chữ lớn và dòng thưa, đoạn nào ra đoạn nấy. Cuối bài là ba bài khác cùng mạch, người đọc xong một bài thường lướt tiếp thay vì đóng tab.

  • Ảnh bìa khổ lớn mở đầu, cột chữ hẹp vừa tầm mắt
  • Cỡ chữ lớn, dòng thưa, đoạn ngắn cho dễ theo
  • Gợi ý ba bài khác ở cuối trang
Một bài viết trong mục ghi chép của TENON
10 — Giới thiệu

Kể xưởng làm việc thế nào, thay cho mấy dòng tự khen

Trang giới thiệu không kể thành tích. Nó kể xưởng bắt đầu từ đâu, một món đi qua bốn chặng nào trước khi tới nhà khách, gỗ và vải da lấy ở đâu, và vì sao danh sách hàng cố ý để ngắn. Với nghề làm tay thì cách kể này đáng tin hơn mọi lời quảng cáo: khách đọc xong hình dung được ai đang đóng cái ghế mình sắp mua.

  • Bảy mục kể quy trình, chất liệu và cách xưởng chọn việc
  • Một ảnh khổ lớn mở đầu, ba ảnh chất liệu ở mục danh sách hàng
  • Cuối trang dẫn thẳng sang cửa hàng
Trang giới thiệu xưởng mộc TENON
11 — Liên hệ

Lời nhắn của khách nằm luôn trong trang quản trị, không trôi mất

Biểu mẫu liên hệ ở đây làm hai việc cùng lúc: lưu lời nhắn vào một mục riêng trong trang quản trị, rồi mới gửi thư báo. Chỗ này nhiều web làm hụt — chỉ gửi thư, hôm nào hộp thư lọc nhầm vào thư rác là mất luôn một khách mà không ai biết. Lưu lại trước thì dù thư có lạc, lời nhắn vẫn nằm nguyên đó. Bên cạnh biểu mẫu là năm câu hay được hỏi nhất và bản đồ chỉ đường tới xưởng.

  • Lời nhắn lưu trong trang quản trị rồi mới gửi thư báo
  • Năm câu hỏi thường gặp trả lời sẵn ngay bên cạnh
  • Bản đồ ghim đúng địa chỉ xưởng
Trang liên hệ TENON với biểu mẫu và mục hỏi đáp
Cách khách chốt đơn

Đặt thẳng trên web, hoặc nhắn cho xưởng nếu muốn hỏi thêm

Ai đã ưng món nào thì bỏ vào giỏ, điền bốn bước rồi chuyển khoản quét mã, xong trong một lần mở điện thoại. Ai còn phân vân chuyện kích thước hay nước gỗ thì để lại lời nhắn, lời nhắn vào thẳng trang quản trị nên xưởng gọi lại được ngay. Mỗi món có sẵn số đo đầy đủ và cách giữ đồ, nên phần lớn câu hỏi đã có câu trả lời trước khi khách kịp hỏi.

Đặt trên web bốn bước, có chuyển khoản quét mã Để lại lời nhắn vào thẳng trang quản trị Tiền giao báo trước theo khu vực, ngay trong giỏ Đơn từ 30 triệu miễn phí gói giao tiêu chuẩn
Responsive

Người ta nằm trên ghế cũ, cầm điện thoại chọn cái ghế mới

Cả trang được đo lại ở bốn khổ màn hình, từ điện thoại nhỏ tới màn hình rộng. Trên điện thoại, ảnh món đồ chiếm gần trọn bề ngang, bảng số đo xuống thành từng dòng đọc được mà không phải phóng to, album ảnh vuốt bằng ngón tay, và cột lọc cửa hàng xếp lại thành một hàng chữ gọn nằm trên lưới hàng.

Trang chủ TENON trên điện thoại
Trang chủ
Cửa hàng TENON trên điện thoại
Cửa hàng
Trang món đồ TENON trên điện thoại
Trang món đồ
Chỗ khó

Ba chỗ khó và cách gỡ

Giao diện đẹp mà vẫn phải bán được hàngMấy khoảng ảnh khổ rộng và chuyển động mượt thường đi kèm cái giá: trang nặng, máy yếu giật. Ở đây phần chuyển động chỉ chạy khi khối đó lọt vào màn hình, khuất đi là nghỉ; ai đã tắt hiệu ứng chuyển động trong máy thì web bỏ luôn phần đó, cuộn thường cho nhẹ. Nhờ vậy vẫn giữ được nhịp xem thong thả mà không đánh đổi tốc độ.
Không đo bằng mắt, đo bằng sốMỗi trang được đo lại từng khoảng cách, cỡ chữ và bề rộng khối thay vì ước lượng bằng mắt, rồi quét lại toàn bộ ở bốn khổ màn hình để bắt chỗ tràn ngang và lỗi hiển thị. Cách làm này chậm hơn nhìn qua rồi gật, nhưng đổi lại không có trang nào lệch một kiểu riêng.
Tiếng Việt có dấu là chỗ dễ vỡ nhấtHai lỗi chỉ lộ ra khi soi tận mắt: chữ hoa nuốt mất dấu ở những chữ như ă, ơ, ư, và một phông chữ tuy có đủ chữ Việt nhưng đặt dấu thanh sai chỗ, dấu huyền dấu ngã bay tách khỏi chữ. Đã đổi cách viết hoa và thay hẳn phông, sau đó soi lại từng chữ có dấu chồng trên cả mười một trang.
Công nghệ

Nền tảng & công nghệ

WordPressXưởng tự thêm món, sửa giá, viết bài
WooCommerceĐơn hàng, kho, khu vực giao gom một chỗ
Giao diện làm riêngKhông dùng giao diện bán sẵn ngoài thị trường
Phần đặt hàng tự viếtBốn bước, có mặt trên kho plugin WordPress.org
Chuyển khoản quét mãTrả tiền ngay trong trang, không thoát ra ngoài
Tiền giao theo khu vựcKhách biết trước tổng tiền trước khi đặt
Đường dẫn tiếng ViệtToàn site, địa chỉ cũ tự chuyển sang địa chỉ mới
Phông tiếng Việt đủ dấuChữ hoa, dấu chồng đều hiển thị đúng
ResponsiveĐo lại ở bốn khổ màn hình, không tràn ngang
Cam kết Web22

Bản dựng mẫu thật, do chính đội Web22 code

Đây là sản phẩm mẫu Web22 tự thiết kế và lập trình để thể hiện năng lực — không phải theme mua sẵn hay bản sao rập khuôn tràn lan ngoài thị trường. Toàn bộ giao diện và tính năng đều code tay, nên khi triển khai cho bạn, mọi thứ đều có thể tuỳ biến, thêm tính năng hay chỉnh sửa theo đúng thương hiệu riêng.

  • Code tay 100%, không dựng bằng mẫu rập khuôn
  • Tuỳ biến & thêm tính năng theo nhu cầu
  • Sản phẩm độc quyền của đội ngũ Web22
Bắt đầu

Bạn muốn một website bán được món giá cao qua màn hình?

Web22 nhận thiết kế website bán hàng cho nội thất, vật liệu, đồ thủ công và mọi ngành có món giá cao cần khách xem kỹ: ảnh bày đẹp, số đo và chính sách rõ ràng, đặt hàng gọn, tiền giao minh bạch, chuẩn SEO, bàn giao là bạn tự quản trị được.

Chat Zalo