Đây là bài viết đầu tiên trong chuỗi bài viết hướng dẫn Thiết kế website bán hàng từ A-Z cho bạn không biết kĩ thuật.
Mình sẽ hướng dẫn thiết kế website bán hàng đơn giản với chức năng show sản phẩm, đặt hàng online (như ảnh).
Bước 1. Mua tên miền và Hosting
Tên miền là địa chỉ của website trên Internet, có dạng: themevi.com, vn-zoom.org, vnexpress.net, dantri.com.vn. Nó giống với địa chỉ của ngôi nhà.
Hosting là nơi lưu trữ toàn bộ dữ liệu của website bao gồm bài viết, hình ảnh, video, tài liệu…Nó giống như mảnh đất để xây ngôi nhà.
Mình khuyến khích mua tên miền tại Namesilo. Đây là đại lí chính thức của ICANN, và giá tên miền .COM ở đây gần như rẻ nhất thị trường luôn, chỉ khoảng 200k/năm (rẻ hơn chỗ khác 50-100k/năm).
Và hosting bạn nên chọn ở Azdigi Thạch Phạm (Việt Nam). Do Thạch Phạm, admin Thachpham.com lập ra, với giá từ 50k/tháng (đủ cho 1 web bán hàng cỡ trăm sản phẩm trở xuống rồi).
Sử dụng mã VNZOOM để được giảm 10% khi mua hosting tại Azdigi.
Và sau khi có tên miền, hosting, bạn cần trỏ tên miền về Hosting. Đọc hướng dẫn này để biết cách trỏ tên miền nhé!
Bước 2. Cài đặt WordPress
WordPress là mã nguồn mở được 28% website trên Internet sử dụng. Nó mang lại nhiều tính năng mạnh mẽ cho người dùng, mà không cần bất kỳ kiến thức kĩ thuật nào.
Trước khi đi vào thiết kế website bán hàng, bạn cần cài đặt WordPress. Nếu sử dụng hosting ở Azdigi, hãy cài đặt WordPress theo hướng dẫn này.
Bước 3. Cài đặt Theme Shopper và WooCommerce
Theme (giao diện) WordPress là thành phần tạo nên sức mạnh và sự phổ biến của WordPress. Bạn muốn làm web gì, chỉ cần cài đặt Theme tương ứng.
Bạn muốn thiết kế web bán hàng, chỉ cần cài đặt Theme bán hàng. Bạn muốn thiết kế web công ty, chỉ cần cài đặt Theme công ty.
Hãy truy cập vào liên kết này và tải Theme Shopper WooCommerce Theme – Được phát triển bởi Dessign.net – Theme mà chúng ta sẽ sử dụng trong các bước kết tiếp. Đọc hướng dẫn này nếu bạn không biết cách tải Theme này như nào.
Sau khi tải xong, hãy truy cập vào trang quản lý website tại địa chỉ: themevi.com/wp-admin với themevi.com là tên miền website của bạn.
Truy cập vào Giao diện > Thêm mới
Bấm vào Tải giao diện lên. Bạn sẽ thấy 1 khung hiện ra. Bấm vào Choose File > Chọn file Theme vừa tải về ở phần trên > Cài đặt.
và bấm vào Kích hoạt
Tiếp theo là cài đặt WooCommerce, WooCommerce là công cụ quản lý bán hàng số 1 trong WordPress. Nó giúp bạn bán mọi thứ, kể cả sản phẩm hữu hình lẫn vô hình (như phần mềm, theme, ebook….).
Bạn chỉ cần cài đặt WooCommerce theo hướng dẫn này. Việc thiết lập giao hàng, thanh toán….sẽ được hướng dẫn trong các bước gần cuối bài viết này.
Bước 4. Bắt đầu Thiết kế web bán hàng
4.1. Thiết kế Header
Header của website này bao gồm Logo, Menu và Thanh tìm kiếm
Đầu tiên, để thay đổi Logo, bạn truy cập vào Giao diện > Shopper Theme Settings > Bấm tiếp vào Upload your logo tại mục Custom Logo URL
Bấm vào Chọn tập tin
Một cửa sổ sẽ hiện ra để bạn tìm và chọn ảnh trong máy. Sau khi chọn và tải ảnh lên, chờ tí, ảnh sẽ được tải và bấm vào Sửa
Nhìn qua trái và sao chép đường dẫn ở Địa chỉ File
Dán đường dẫn vào ô Custom Logo URL
Rồi bấm Save Changes ở cuối bài viết.
Tiếp theo là Menu, như web demo bạn sẽ thấy Menu có các phần sau:
- Home: trang chủ
- About: trang giới thiệu
- Shop: cửa hàng, với các menu con là các danh mục sản phẩm
- My account: tài khoản của khách hàng đăng ký trên web
- Cart: giỏ hàng
- Blog: bài viết tư vấn, chia sẻ
- Contact: trang liên hệ
Vậy bạn cần tạo Trang giới thiệu, liên hệ. Tạo danh mục sản phẩm, và các sản phẩm rồi thêm vào Menu.
Đọc bài viết hướng dẫn tạo Menu này để biết cách làm.
Cuối cùng là thanh tìm kiếm. Nó sẽ tự động xuất hiện ngay sau khi cài đặt Theme, mà không cần làm gì thêm.
4.2. Hiển thị sản phẩm ra trang chủ
Mặc định sản phẩm mới sẽ xuất hiện ở Trang chủ mà không cần phải thiết lập gì!
Trang chủ sẽ xuất hiện 09 sản phẩm, và nút LOAD MORE PRODUCT (bấm vào sẽ hiện ra thêm sản phẩm)
Để đổi chữ Load More Product qua Tiếng Việt, mình sẽ nói ở Bước dịch web, ở gần cuối bài.
4.3. Thiết kế Footer
Footer trang gốc có 2 phần Trên và Dưới
- Trên: 3 cột
- Dưới: 2 hàng gồm Liên kết mạng xã hội và Dòng chữ bản quyền
Đầu tiên là phần trên, ở đây bạn có thể để 3 mục là Giới thiệu ngắn – Thông tin liên hệ – Hướng dẫn khách hàng (3 mục này rất nhiều website sử dụng, nên mình nghĩ cũng khá hợp lí).
Truy cập vào Giao diện > Widget. Bạn sẽ thấy 3 mục là Footer Widget 1, Footer Widget 2 và Footer Widget 3, tương ứng 3 mục ta vừa nói bên trên.
Nhìn qua trái, bên dưới và bạn sẽ thấy Văn bản
Kéo Văn bản vào Footer Widget 1, bạn sẽ có
Điền tên và mô tả của cột và bấm Lưu thay đổi
Với cột 2, bạn cũng kéo Văn bản vào Footer Widget 2 và điền thông tin
Với cột 3, bạn cũng kéo Văn bản vào Footer Widget 3 và điền thông tin
Để chèn liên kết, bạn chỉ cần bôi đen dòng chữ và bấm vào biểu tượng liên kết
Điền liên kết và bấm biểu tượng xanh
Và kết quả
Tiếp theo là dòng liên kết mạng xã hội. Truy cập vào Giao diện > Shopper Theme Settings.
Và điền vào các liên kết mạng xã hội tương ứng cho shop của bạn. Rồi bấm Save changes.
Và cuối cùng là dòng chữ bản quyền. Truy cập vào Giao diện > Sửa
Bấm vào Footer.php ở bên phải
Kéo xuống dòng 52, bạn sẽ thấy dòng chữ bản quyền. Đổi lại theo ý bạn thích. Và bấm Cập nhật tập tin
Mình thử sửa!
Và kết quả
4.4. Trang giới thiệu và Liên hệ
Truy cập vào Trang > Thêm trang mới
Và tạo lần lượt 2 trang Giới thiệu và Liên hệ
Rồi sau đó thêm vào Menu, nếu muốn!
4.5. Form thanh toán
Đây là form thanh toán mặc định của WooCommerce. Có vẻ thừa một số phần, như quốc gia, mã bưu điện….
Vậy làm sao để xóa một số thành phần, và bỏ “bắt buộc” với một số phần?
Hãy đọc hướng dẫn sửa Form thanh toán bằng Checkout Field Editor nhé!
4.6. Thiết lập WooCommerce
Bao gồm các thiết lập là Giao hàng – Thanh toán và Email nhận đơn hàng.
Mình đã viết các bài chi tiết nói về chúng rồi.
- Thiết lập Giao hàng
- Thiết lập Thanh toán
- Thiết lập Email nhận đơn hàng
Bước 5. Hướng dẫn sử dụng
Vậy là xong phần thiết kế giao diện rồi. Bây giờ chúng ta đi vào cách sử dụng website.
- Đăng sản phẩm
- Tạo & Sửa danh mục sản phẩm
- Đăng & Sửa bài viết
- Quản lý đơn hàng
- Quản lý tài khoản nhân viên
- và các hướng dẫn khác
Bước 6. Thiết lập nâng cao
6.1. Cài đặt công cụ SEO
Xem hướng dẫn cài đặt công cụ tối ưu SEO
6.2. Cài đặt công cụ thống kê truy cập
Hãy sử dụng Google Analytics. Đây là công cụ thống kê truy cập website được nhiều cá nhân, doanh nghiệp sử dụng nhất. Đọc bài viết sau để biết cách cài đặt Google Analytics vào website.
6.3. Cài đặt chứng chỉ SSL (Https)
6.4. Cài đặt email cửa hàng
Email cửa hàng là email có dạng: [email protected] (với diachiwebsite.com là tên miền website). Ví dụ email của mình là [email protected].
Sử dụng email cửa hàng sẽ trông chuyên nghiệp hơn rất nhiều. Bạn có thể sử dụng Gmail Business (G Suite) với mức giá 2.5$/tháng. Hoặc cài đặt miễn phí với Yandex Email.
6.5. Dịch Website
Website còn rất nhiều chỗ là Tiếng Anh. Bạn cần dịch chúng qua Tiếng Việt bằng cách sử dụng Loco Translate, hoặc nhiều cách khác. Đọc hướng dẫn này từ Blog Thạch Phạm để biết cách dịch nhé!
Riêng WooCommerce, mình đang gấp rút dịch qua Tiếng Việt rồi, nên bạn yên tâm là qua Tết âm này, WooCommerce sẽ có Tiếng Việt hoàn toàn.
Bước 7. Vấn đề thường gặp
7.1. Website không gửi email?
Nếu có người mua hàng nhưng không có email gửi về, và mọi thiết lập phía trên đều đúng. Vậy nguyên nhân hầu hết do hosting đã chặn việc gửi mail.
Giải pháp ở đây sẽ là cấu hình máy chủ gửi mail riêng, gọi là SMTP. Hãy đọc bài viết này để biết cách cấu hình SMTP Gmail hoặc SendGrid