Thiết kế website bán cà phê Bản Vị Cafe: case study Code Pro

Bản Vị Cafe là ai và bài toán khi thiết kế website bán cà phê

Bản Vị — "vị nguyên bản" — là thương hiệu cà phê rang xay đóng gói, hạt phối từ Robusta, Arabica, Cherry, vùng nguyên liệu Buôn Ma Thuột. Điểm khác của Bản Vị không nằm ở hạt cà phê "ngon nhất thị trường" — câu đó ai cũng nói — mà nằm ở cách đóng gói: định lượng sẵn để người bận rộn không phải cân đong, không phải dọn bã, vẫn có ly cà phê đúng vị mỗi sáng.

Khi nhận dự án, mình thống nhất với Bản Vị rằng website phải làm được ba việc cùng lúc:

• Là bộ mặt thương hiệu: giữ được chất cổ điển, mộc của bộ nhãn — để người lần đầu thấy Bản Vị trên Facebook bấm vào website vẫn nhận ra "đúng là thương hiệu đó".
• Là cửa hàng thật sự: chọn sản phẩm, chọn khối lượng, đặt hàng, nhận thông báo đơn — không phải một trang giới thiệu kèm số điện thoại.
• Là công cụ vận hành và đo lường: Bản Vị tự sửa nội dung, tự quản lý đơn, liên hệ, đại lý; mọi chiến dịch quảng cáo sau này đều đo được ra đơn hay không.

Đây cũng là lý do mình không nhận làm website kiểu "dựng nhanh một theme cho có". Một website bán hàng thiếu bất kỳ vế nào trong ba vế trên đều sẽ phải làm lại, và chi phí làm lại luôn đắt hơn làm đúng từ đầu.

Hiểu khách hàng trước khi thiết kế: người mua cà phê online lo điều gì?

Trước khi phác thảo giao diện, mình đặt mình vào vị trí người lần đầu vào website một thương hiệu cà phê họ chưa từng uống. Họ không có cách nào nếm thử, nên mọi quyết định đều dựa vào những gì website cho họ thấy. Mình gom lại thành năm câu hỏi:

1. "Loại nào hợp với mình?" Hai dòng sản phẩm dùng chung một loại cà phê nhưng khác cách pha. Khách không phân biệt được sẽ chần chừ, và chần chừ thường là rời trang.
2. "Pha có khó không?" Cold brew nghe hấp dẫn nhưng nhiều người chưa từng tự ủ. Nếu không thấy cách pha ngay, họ sẽ nghĩ "chắc phiền lắm".
3. "Cà phê này từ đâu ra?" Thành phần hạt, vùng nguyên liệu, cách đóng gói — người uống cà phê thật sự quan tâm.
4. "Mua online có rủi ro không?" Sợ chuyển tiền trước, sợ giao sai, sợ không ai nghe máy khi cần đổi.
5. "Mình mua số lượng lớn được không?" Văn phòng, quán, người muốn làm đại lý cần một lối đi riêng, không phải nhắn tin hỏi giá từng lần.

Phía Bản Vị cũng có nhu cầu riêng: nhận đơn ngay cả khi chưa sẵn sàng tích hợp cổng thanh toán, biết đơn đến từ kênh nào, tự sửa được nội dung và giá. Mình lập bảng đối chiếu: mỗi câu hỏi phải có ít nhất một phần trên website trả lời trực tiếp.

Đây là bước nhiều website bỏ qua: thiết kế theo mẫu có sẵn hoặc theo website đối thủ, thay vì bắt đầu từ câu hỏi thật của khách. Mình từng phân tích hệ quả của việc này trong bài website không ra khách: 7 lỗi thường gặp và cách sửa — viết cho ngành spa nhưng các lỗi gần như giống hệt ở website bán hàng.

Phương án kỹ thuật: WordPress, WooCommerce với theme và plugin viết riêng

Với một thương hiệu bán lẻ, có ba hướng phổ biến. Mình cân nhắc cả ba trước khi chốt:

Mình chọn phương án thứ ba — cùng cách tiếp cận đã dùng cho dự án thiết kế website mai mối Family Connect — và tách làm hai phần:

• Theme "Bản Vị": toàn bộ giao diện tông nâu – be lấy từ chính bộ nhãn thương hiệu, font Playfair Display cho tiêu đề (gợi nét chữ trên nhãn) kết hợp Be Vietnam Pro cho nội dung.
• Plugin lõi "Bản Vị Core": cài đặt liên hệ – thanh toán, chế độ "chỉ nhận đơn", form đặt hàng kiểu Việt Nam, báo đơn qua email, VietQR, form liên hệ – đại lý, hỏi đáp, cảm nhận khách hàng.

Dữ liệu đơn hàng, liên hệ, hỏi đáp nằm ở WooCommerce và plugin, nên sau này đổi giao diện cũng không mất dữ liệu. Giao diện có thể thay theo mùa, theo chiến dịch; dữ liệu kinh doanh thì phải sống lâu hơn giao diện.

Trang chủ 12 phần: dẫn khách từ "đây là gì" đến "đặt hàng"

Trang chủ được sắp theo đúng thứ tự câu hỏi trong đầu khách: Bản Vị là gì? → Có những loại nào? → Chọn loại nào? → Pha thế nào? → Cà phê từ đâu ra? → Người khác nói gì? → Đặt ở đâu? Cả 12 phần đều sửa được chữ, ảnh và bật/tắt riêng trong phần Tuỳ biến của WordPress.

1. Banner đầu trang: giá trị thương hiệu trong một câu

Tiêu đề "Giữ trọn vị nguyên bản trong từng túi cà phê" vừa giải nghĩa tên thương hiệu, vừa nói luôn lợi ích. Đoạn mô tả bên dưới đi thẳng vào sản phẩm: túi zip chia sẵn 50g để pha phin, túi lọc định lượng sẵn để ủ lạnh qua đêm. Hai nút hành động — Chọn cà phê và Tư vấn qua Zalo — dành cho hai kiểu khách: người đã muốn mua và người muốn hỏi trước. Ảnh banner dùng chính chai cà phê ủ lạnh với nhãn thật của Bản Vị, kèm con dấu "Vị nguyên bản" như một chi tiết thủ công.

Banner đầu trang và dải 4 điểm nổi bật: định lượng sẵn, ủ lạnh tiện lợi, giữ hương lâu, tư vấn tận tình.

2. Sản phẩm: chọn khối lượng và mua ngay trên trang chủ

Mỗi thẻ sản phẩm cho chọn khối lượng 200g / 500g / 1kg, giá đổi ngay theo lựa chọn, có hai nút Thêm vào giỏ và Mua ngay. Nút Mua ngay đưa thẳng tới trang đặt hàng với đúng sản phẩm, đúng khối lượng — bỏ qua bước giỏ hàng cho người đã quyết. Nhãn "Bán chạy", "Ủ lạnh tiện lợi" bật/tắt được trong trang quản trị sản phẩm.

Hai dòng sản phẩm, chọn khối lượng và đặt hàng ngay trên trang chủ.

3. Bảng so sánh: trả lời "nên chọn loại nào?" trước khi khách hỏi

Đây là phần mình coi là quan trọng nhất về chuyển đổi. Bảng so sánh 5 tiêu chí — đóng gói, cách pha, dụng cụ, điểm cộng, hợp với ai — giúp khách tự xếp mình vào một trong hai nhóm: "người quen uống phin mỗi ngày" hay "người bận rộn, thích vị êm của cold brew". Ai cần đọc kỹ hơn có link sang trang so sánh chi tiết, có cả bảng giá theo khối lượng.

Bảng so sánh 5 tiêu chí giúp khách tự chọn đúng sản phẩm.

4. Cách pha theo tab: gỡ nỗi lo "pha có khó không"

Hai tab — Ủ lạnh với Brew Bag và Pha phin với Coffee Pouch — mỗi tab 4 bước, mỗi bước một câu. Câu chốt "Chuẩn bị tối nay — sáng mai có cold brew" biến một quy trình 12–16 giờ thành một thói quen dễ hình dung. Khách thấy đơn giản thì mới dám mua lần đầu.

Cách pha 4 bước cho từng sản phẩm, chuyển qua lại bằng tab.

5. Câu chuyện thương hiệu và nguồn gốc hạt

Phần nền nâu đậm là "khoảng lặng" của trang: nhãn Bản Vị đặt cạnh câu chuyện "Bản Vị nghĩa là vị nguyên bản". Ngay sau là khối Từ hạt đến túi với ba thông tin khách hay hỏi nhất: thành phần hạt, vùng nguyên liệu, cách đóng gói. Mình không viết những câu kiểu "cà phê sạch nguyên chất 100%" — chỉ đưa thông tin cụ thể, kiểm chứng được, đúng với nhãn sản phẩm.

Câu chuyện thương hiệu dùng chính bộ nhãn, khối nguồn gốc chỉ nêu thông tin cụ thể.

6. Cảm nhận khách hàng: quản lý như dữ liệu, không dán ảnh chụp

Cảm nhận được nhập trong trang quản trị, mỗi cảm nhận gắn với sản phẩm và khối lượng khách đã mua, hiển thị dạng thẻ. Làm vậy để Bản Vị thêm cảm nhận mới trong một phút, và để nội dung là chữ thật — đọc được, tìm được — thay vì ảnh chụp màn hình tin nhắn mờ.

Cảm nhận khách hàng kèm sản phẩm và khối lượng đã dùng.

7. Hợp tác, hỏi đáp, blog và lời kêu gọi cuối trang

Khối Hợp tác mở lối riêng cho văn phòng, quán – nhà hàng và đại lý, dẫn tới form báo giá số lượng. Phần Hỏi đáp xử lý các câu còn lại trước khi đặt: một gói 50g pha được bao nhiêu ly, ủ lạnh mất bao lâu, thanh toán thế nào, phí giao hàng bao nhiêu. Ba bài viết mới nhất giữ trang chủ luôn có nội dung mới, và lời kêu gọi cuối trang cho người đã đọc hết hai lựa chọn rõ ràng: đặt hàng hoặc gọi hotline.

Hỏi đáp dạng mở/đóng, quản lý trong trang quản trị và có dữ liệu cấu trúc FAQ cho Google.

Trang sản phẩm: đủ thông tin để khách tự quyết

Trang sản phẩm là nơi khách "cầm hộp lên đọc nhãn". Ngoài ảnh, chọn khối lượng và giá, mình thêm ba khối mà website bán hàng thường thiếu:

• Thông tin sản phẩm: dạng, thành phần hạt, quy cách, khối lượng, cách dùng, bảo quản — trình bày như bảng thông số.
• Cách dùng: 4 bước ngắn, kèm link sang hướng dẫn chi tiết.
• Phù hợp với: mô tả người dùng phù hợp, để khách tự đối chiếu với mình.

Ngay dưới nút Thêm vào giỏ là ba dòng giảm rủi ro: đặt hàng online, Bản Vị gọi xác nhận trước khi giao; giao hàng toàn quốc; cần tư vấn thì nhắn Zalo hoặc gọi. Phía dưới là mô tả chi tiết, bảng giá theo khối lượng và sản phẩm còn lại để khách so sánh.

Trang sản phẩm Brew Bag: chọn khối lượng, thông tin sản phẩm, cách dùng và nhóm khách phù hợp.

Trải nghiệm đặt hàng: khách chưa cần thanh toán

Đây là quyết định mình trao đổi kỹ nhất với Bản Vị. WooCommerce mặc định có form thanh toán kiểu nước ngoài: họ, tên tách riêng, mã bưu chính, bang/tỉnh, bắt buộc chọn phương thức thanh toán. Với người mua cà phê ở Việt Nam, form như vậy vừa dài vừa lạ.

Mình viết lại toàn bộ luồng đặt hàng:

1. Form rút gọn kiểu Việt Nam: Họ và tên (một ô), số điện thoại, email không bắt buộc, tỉnh/thành phố, địa chỉ nhận hàng, ghi chú. Số điện thoại được kiểm tra đúng định dạng Việt Nam.
2. Chế độ "Chỉ nhận đơn": khách gửi đơn mà chưa cần trả tiền. Thông báo "Bạn chưa cần thanh toán" đặt ngay đầu trang, nút cuối đổi thành Gửi đơn đặt hàng. Bản Vị gọi lại xác nhận đơn, phí giao hàng và cách thanh toán.
3. Một công tắc để chuyển sang thanh toán: khi sẵn sàng, Bản Vị bật COD và chuyển khoản trong trang cài đặt. Đơn chuyển khoản tự hiện mã VietQR đúng số tiền, đúng nội dung chuyển khoản, cả trên trang cảm ơn lẫn trong email.
4. Báo đơn qua email: có đơn mới là email về ngay hộp thư người quản lý; khách để lại email thì nhận email xác nhận bằng tiếng Việt.

Trang đặt hàng: form rút gọn, thông báo chưa cần thanh toán, Bản Vị gọi xác nhận trước khi giao.

Vì sao không bật thanh toán online ngay từ đầu? Với thương hiệu mới, rào cản lớn nhất của đơn đầu tiên là niềm tin, không phải sự tiện lợi khi trả tiền. Một cuộc gọi xác nhận vừa giữ chân khách, vừa cho Bản Vị cơ hội tư vấn đúng sản phẩm — và hệ thống đã sẵn để bật thanh toán bất cứ lúc nào.

Các trang còn lại và mục đích của từng trang

Ngoài trang chủ, trang sản phẩm và đặt hàng, website có thêm các trang dưới đây. Không trang nào làm chỉ để "cho đủ menu":

Trang Đại lý & Doanh nghiệp đáng nói riêng: khách mua sỉ không cần giỏ hàng, họ cần một người báo giá. Form ở đây hỏi đúng thứ cần cho cuộc gọi đầu — nhu cầu (văn phòng, quán, đại lý), tỉnh thành, lời nhắn về sản lượng dự kiến — có ô bẫy bot chống spam, và mọi liên hệ được lưu trong trang quản trị có lọc, ghi chú và xuất CSV.

Trang Đại lý & Doanh nghiệp với form nhận báo giá số lượng.

Blog được chuẩn bị sẵn các bài nền tảng như cách pha cold brew bằng túi lọc, cách pha phin, pha cà phê ở văn phòng, bảo quản cà phê rang xay — đúng những câu người dùng gõ lên Google, và mỗi bài đều dẫn về sản phẩm phù hợp.

Bài viết hướng dẫn pha cold brew — nội dung SEO dẫn về sản phẩm Brew Bag.

Trải nghiệm trên điện thoại: mua cà phê bằng một tay

Khách thấy Bản Vị chủ yếu qua Facebook, TikTok, Zalo — tức là trên điện thoại. Vì vậy mình thiết kế mobile song song với desktop chứ không coi đó là bản thu nhỏ. Điểm quan trọng nhất là thanh hành động cố định ở đáy màn hình với 4 nút: Gọi, Zalo, Giỏ hàng (có số lượng), Mua ngay. Khách cuộn tới đâu cũng chỉ cách đặt hàng hoặc hỏi tư vấn đúng một chạm. Nút bấm, ô nhập trong form đặt hàng đều đủ lớn để thao tác bằng ngón cái.

Trang chủ, trang sản phẩm và trang đặt hàng trên điện thoại; thanh Gọi – Zalo – Giỏ hàng – Mua ngay luôn cố định ở đáy màn hình.

Đo lường, SEO và tốc độ: làm sẵn từ ngày đầu

Một website bán hàng mà không đo được thì mọi quyết định quảng cáo đều là đoán. Những thứ dưới đây có sẵn ngay khi bàn giao:

• Sự kiện chuyển đổi: đặt hàng thành công tự bắn Purchase cho Meta Pixel và purchase cho GA4/GTM, chỉ một lần cho mỗi đơn (tải lại trang cảm ơn không bị tính trùng); thêm vào giỏ bắn AddToCart; form liên hệ, đại lý bắn Lead.
• Nguồn đơn và nguồn liên hệ: UTM, fbclid, gclid lưu kèm từng liên hệ; nguồn đơn hàng xem trực tiếp trong danh sách đơn.
• SEO kỹ thuật: tiêu đề, mô tả, ảnh chia sẻ Facebook/Zalo cho từng trang; dữ liệu cấu trúc Organization, WebSite, FAQ, Breadcrumb, BlogPosting; chặn index trang Cảm ơn, giỏ hàng, đặt hàng. Khi cài Rank Math, theme tự tắt phần meta của mình để không bị trùng.
• Tốc độ: font tự host, ảnh WebP, không dùng page builder.

Nếu bạn đang chạy quảng cáo mà chỉ nhìn số tin nhắn hay lượt click, gần như chắc chắn bạn đang tối ưu theo cảm tính. Mình có phân tích cách tính đúng chi phí ra một khách trong bài chi phí một khách đặt lịch khi chạy ads.

Bàn giao: tài liệu vận hành và danh sách việc trước khi bán thật

Cách bàn giao cũng là một phần của sản phẩm. Cùng với website, Bản Vị nhận một bảng "sửa nội dung ở đâu": muốn đổi chữ trên trang chủ vào mục nào, đổi hotline – Zalo ở đâu, bật thanh toán ở đâu, xem đơn và xuất danh sách liên hệ thế nào.

Kèm theo là danh sách việc cần hoàn tất trước khi chạy quảng cáo — những việc không thuộc phần lập trình nhưng thiếu thì website không bán hàng đúng chuẩn được:

• Điền đầy đủ tên hộ kinh doanh/doanh nghiệp, mã số thuế, địa chỉ — bắt buộc với website bán hàng.
• Duyệt 5 trang chính sách (đang ở dạng bản nháp có ghi chú), điền thời hạn đổi trả, đơn vị vận chuyển.
• Thay ảnh minh hoạ sản phẩm bằng ảnh chụp thật.
• Cấu hình email báo đơn và gửi mail thử.
• Thông báo website thương mại điện tử bán hàng với Bộ Công Thương tại online.gov.vn.
• Gửi sitemap lên Google Search Console, gắn mã Pixel/GA4.

Mình ghi rõ từng việc để hai bên không ai phải đoán — và để Bản Vị biết chính xác website đã "sẵn sàng bán" ở mức nào.

Vì sao Code Pro không làm website giá rẻ

Mình hay được hỏi: "Có gói nào rẻ hơn không, chỉ cần cái web đẹp là được?". Câu trả lời thật là: website giá rẻ thường rẻ vì bỏ qua đúng những phần ở trên — bước hiểu khách hàng, form đặt hàng đúng thói quen người Việt, đo lường chuyển đổi, tài liệu vận hành. Website vẫn lên, vẫn đẹp, nhưng khi chạy quảng cáo thì không biết vì sao không ra đơn.

Sau dự án Bản Vị, đây là những nguyên tắc mình áp dụng cho mọi website bán hàng và website dịch vụ:

1. Bắt đầu từ câu hỏi của khách, không phải từ mẫu giao diện. Mỗi phần trên trang phải trả lời được một câu hỏi cụ thể.
2. Thương hiệu phải nhất quán từ nhãn sản phẩm tới website. Khách thấy quảng cáo, bấm vào website, nhận hàng — ba điểm chạm phải là một thương hiệu.
3. Giảm rủi ro cho bước đầu tiên: không bắt trả trước khi chưa cần, luôn có Gọi/Zalo, chính sách rõ ràng.
4. Website phải phục vụ cả người vận hành: tự sửa nội dung, tự quản lý đơn và liên hệ, đổi giao diện không mất dữ liệu.
5. Đo được thì mới tối ưu được: sự kiện chuyển đổi và nguồn đơn phải có trước khi bật ngân sách quảng cáo.

Đó cũng là điều mình nhận ra sau nhiều lần ngồi trực tiếp với chủ doanh nghiệp: họ không mua "một website", họ mua khả năng có thêm khách hàng. Nếu muốn hiểu vì sao một lập trình viên như mình lại nhìn website theo góc độ marketing, bạn có thể đọc câu chuyện từ lập trình viên đến marketing.

Câu hỏi thường gặp khi thiết kế website bán hàng

Bạn cần thiết kế website bán hàng cho thương hiệu của mình?

Nếu bạn đang có một thương hiệu — cà phê, trà, mỹ phẩm, spa, hay một dịch vụ cần khách tin tưởng trước khi mua — và muốn một website không chỉ đẹp mà còn bán được hàng, đo được hiệu quả, mình sẵn sàng trao đổi. Mình sẽ bắt đầu bằng việc nghe bạn kể về khách hàng của mình, giống như cách mình đã làm với Bản Vị.

Bạn có thể xem trực tiếp website tại banvicafe.vn, đọc thêm case study thiết kế website mai mối Family Connect, hoặc tìm hiểu về Code Pro qua bài Code Pro chính thức ra mắt website codepro.vn.

Nhận tư vấn thiết kế website Nhắn Zalo cho mình