Xin chào tất cả các bạn đang xem Series hướng dẫn làm web cùng AZDIGI. Trong bài viết này AZDIGI sẽ hướng dẫn bạn xây dựng triển khai một website bán hàng với MyThemeShop, một trong kho theme mà AZDIGI đang miễn phí tặng kèm trọn bộ mà khi sử dụng dịch vụ tại AZDIGI các bạn đều được tặng.
Ưu điểm của MyThemeShop
- Các theme từ MyThemeShop đều được được thiết kế Responsive (Tự động tối ưu hiển thị tốt trên mọi kích thước màn hình như laptop, điện thoại, máy tính bảng).
- Tối ưu về tốc độ load, giúp tăng trải nghiệm người dùng.
- Tối ưu cấu trúc theme giúp chuẩn SEO, giúp làm SEO onpage dễ dàng hơn.
- Giúp người dùng cài đặt và thiết lập giao diện nhanh chóng và dễ dàng nhờ có các tài liệu hướng dẫn chi tiết kèm theo.
- Cài theme giống demo nhanh chóng chỉ với 1 click.
- Tùy biến giao diện dễ dàng thông qua Theme Options kể cả khi bạn không biết gì về CSS, HTML, JS và PHP.
- Tùy chỉnh về màu sắc, phông nền (background) không hạn chế.
- Tối ưu quảng cáo, đặc biệt là quảng cáo Adsense, giúp tăng CPC, CTR và RPM để đạt hiệu quả quảng cáo tối đa.
- Tùy chỉnh font chữ cho phù hợp với sở thích và phù hợp với mọi ngôn ngữ.
- Giao diện thân thiện với các thiết bị di dộng, hiển thị với bố cục đẹp, dễ dàng điều hướng.
- Theme cung cấp bởi MyThemeShop xây dựng dựa trên HTML5 và CSS3 mới nhất.
- Tích hợp sẵn hầu hết các icon mạng xã hội phổ biến hiện nay.
- Theme trên MyThemeShop hỗ trợ tạo Child Theme để bạn thoải mái tùy biến mà không sợ mất khi update lên phiên bản mới.
- Dễ dàng update lên phiên bản mới chỉ với 1 click.
- Tích hợp Schema để thiết lập bản đồ nội dung cho người dùng, công cụ tìm kiếm, trình thu thập thông tin
Yêu cầu:
Đã thực hiện Phần 1 và Phần 2
I. Cài đặt Theme MyThemeShop
1. Chọn và cài đặt Theme
Việc chọn theme chưa bao giờ là dễ dàng, mỗi loại hình kinh doanh sẽ có tương ứng những theme theo mô hình đó. Với mythemeshop mà AZDIGI tặng kèm hỗ trợ đa loại hình và bạn có thể xem chi tiết ở trang chủ mythemeshop để bắt đầu lựa chọn cho website của mình.
- Xem demo từ trang chủ: https://mythemeshop.com/themes/
- Tải File cài đặt Theme ở đây
Bạn đăng nhập vào admin WordPress, sau đó chọn Appearance => Theme và chọn Add New để bắt đầu cài.
Sau đó bạn chọn Upload Theme và chọn Choose File và chọn Theme mà bạn đã tải về trước đó. Và file theme này sẽ là định dạng zip nhé.
Sau khi cài đặt xong, bạn chọn Activate để kích hoạt theme lên.
2. Cài đặt Plugin cần thiết
- Cài đặt Plugin mặc định của MyThemeShop
Theme sau khi kích hoạt xong. MyThemeShop sẽ gợi ý một số Plugin cần thiết đi kèm theo Theme. Bạn hãy chọn Install Plugins => Tick chọn các Plugins => Install => Apply để bắt đầu cài đặt.
- Cài đặt Plugin WooCommerce
Sở dĩ bạn cần cài đặt Plugin WooCommerce vào vì đối với Theme bán hàng của MyThemeShop. Khi bạn import demo mà không có Plugin WooCommerce thì các sản phẩm mẫu sẽ không được nhập vào. Do đó bạn cần cài đặt Plugin WooCommerce trước khi thực hiện Import Demo
- Tải WooCommerce trực tiếp tại đây:
3. Kích hoạt bản quyền MyThemeShop
Để sử dụng toàn bộ các tính năng bản quyền cũng như kho Theme, Plugin bản quyền của MyThemeShop bạn cần kích hoạt bản quyền. Bạn có thể gửi yêu cầu hỗ trợ đến Phòng kỹ thuật đã được kích hoạt bản quyền của sản phẩm nhé.
Lưu ý: Bản quyền chỉ kích hoạt một lần với MyThemeShop Theme & Plugin Updater và bạn có thể sử dụng toàn bộ các sản phẩm của MyThemeShop về sau mà không cần kích hoạt.
4. Nhập vào nội dung mẫu theme (import demo theme)
Tiếp đến bạn cần nhập vào nội dung mẫu của Theme đã chọn để sửa dụng. Bạn chọn Appearance => Theme Options
Tại giao diện Theme Options bạn hãy chọn Import/Export để bắt đầu bước nhập nội dung mẫu.
Sau đó bạn sẽ thấy một hoặc nhiều giao diện mẫu mà Theme hỗ trợ. Bạn hãy chọn tương ứng giao diện mà phù hợp với nhu cầu sử dụng để nhập vào.
Nội dung Demo bao gồm
- Import Theme Options: Chỉ nhập các tuỳ chọn của Theme
- Import Theme Options & Widgets: Nhập các tuỳ chọn và Widgets mẫu
- Import Theme Options, Widgets & Content: Nhập các tuỳ chọn theme, Widgets và nội dung mẫu
Tiến trình nhập nội dung mẫu đang được bắt đầu. Thời gian nhập có thể mất từ 5-10 phút hoặc ngắn hơn. Bạn lưu ý không tắt cửa sổ trình duyệt cho đến khi hoàn tất.
Sau đó bạn sẽ nhận được thông báo Importing process finished! có nghĩa đã nhập thành công. Bạn click OK để đóng cửa số.
Lưu ý: Nếu nhận được thông báo nhập thất bại, bạn hãy xem log trả về và thông báo với Phòng kỹ thuật để được hỗ trợ kiểm tra.
Nếu bạn nhận được thông báo Importing proccess finished! thì tiến trình nhập nội dung mẫu đã hoán tất.
Và bên dưới là giao diện mẫu mà mình nhập thành công. Bây giờ bạn có thể dựa vào giao diện mẫu này để điều chỉnh lại website hoàn chỉnh.
II. Hướng dẫn tuỳ chỉnh Theme Options MyThemeShop
1. Tuỳ chỉnh Customizer trong WordPress
Customizer là phần tuỳ chỉnh mặc định của WordPress. Bạn có thể thông qua Customizer để tuỳ chỉnh một số thành phần của WordPress như là:
- Site Identity
Phần Site Identity này thì có liên quan và liên kết đến Header Builder khá nhiều. Vì trong đây bạn sẽ điều chỉnh được Site Title & Logo Settings và Site Icon hay còn gọi là Favicon.
- Menu
Ngoài cách điều chỉnh menu ở Appearance => Menus thì bạn cũng có thể điều chỉnh menu trực tiếp ở đây. Và ở đây cũng khá đơn giản, để thêm Menu mới bạn click vào Create New Menu để thêm.
- Widgets
Widget WordPress được gọi tắt Widget là một hệ thống công cụ của WordPress cho phép thêm các nội dung mới, định hình danh mục các bài viết. Qua đó hiển thị những bài viết mới nhất lên các thanh để người đọc dễ dàng tìm kiếm và theo dõi các bài viết
Mỗi theme sẽ có Widget nhất định với các vị trí khác nhau. Và trong mỗi Widget bạn có thể thêm nhiều block vào.
Với mỗi block thì bạn có thể sử dụng như một trình soạn thảo bài viết.
- Homepage Settings
Homepage Settings hay là cài đặt trang chủ. Phần này sẽ chọn page cố định cho trang chủ. Phần này bạn hãy để mặc định.
- Additional CSS
CSS bổ sung. Đa phần thì các bạn xây dựng web hay làm việc ở vùng này. Thay vì phải sửa code css trực tiếp trong theme, như vậy sẽ ảnh hưởng đến theme và lỗi phát sinh không mong muốn. Thì bạn sửa css ở vùng này.
2. Tuỳ chỉnh Theme Options trong MyThemeShop
Đây là chức năng tuỳ riêng biệt của MyThemeShop. Chức năng sẽ quản lý hầu như toàn bộ Theme, và bạn có thể sử dụng Theme Options này để sửa lại website.
- General Settings
Tab này chứa các tùy chọn cài đặt chung sẽ được áp dụng cho toàn bộ chủ đề như thay đổi Logo, Favicon
- Performance
Tab này chứa các tùy chọn liên quan đến hiệu suất có thể giúp tăng tốc trang web của bạn như là tăng tốc độ tải trang, tính năng Lazy loading giúp tải khi cuộn trang, đồng bộ các Javascript…
- Styling Options
Tab này mang các chức năng liên quan đến chủ đề của bạn. Như chỉnh bố cục, màu sắc, font chữ..
- Header
Tab này tuỳ chỉnh các yếu tố của phần tiêu đề website.
- Footer
Tab này tuỳ chỉnh các yếu tố tuỳ chỉnh phần chân của theme.
- Homepage
Tab này kiểm soát bố cục của phần trang chủ website.
- Single Posts
Tab này kiểm soát giao diện và chức năng của phần nội dùng bài đăng của bạn.
- Social Buttons
Tab này kiểm soát chức năng các nút chia sẽ lên mạng xã hội.
- Ad Management
Chức năng kiểm soát các quảng cáo trên website của bạn. Với chức năng này việc quản lý các quảng cáo trỡ nên dễ dàng hơn.
- Sidebars
Chức năng này bạn có toàn quyền kiểm soát các thanh bên (Sidebars). Tại đây, bạn có thể quản lý các thanh bên và chọn một thanh bên (Sidebars) trên mỗi phần trang web. Hoặc chọn một thanh bên tùy chỉnh trên cơ sở mỗi bài đăng trong trình chỉnh sửa bài đăng.
- Navigation
Chức năng này sẽ sử dụng trên Appearance => Menus
- Typography
Chức năng này kiểm soát tất cả các Font chữ trên trang web của bạn. Từ tiêu đề, trang và các bài viết. Để đổi font và size bạn chỉ cần lick vào và chọn các Font cần sử dụng là được. Để xem thêm các tuỳ chọn khác bạn click vào chữ More để xem thêm.
- Import/Export
Chức năng này dùng để import theme demo cho website. Ngoài ra chức năng này còn dùng để lưu lại cấu hình của theme hoặc là nhập cấu hình theme lại.
III. Thiết lập Woocommerce
1. Tạo chuyên mục cho sản phẩm
Để tạo chuyên mục cho sản phẩm. Bạn chọn Products => Categories
- Name: Nhập vào tên chuyên mục
- Slug: Để trống hoặc nhập theo định dạng của tên chuyên mục không dấu (VD:ca-phe)
- Parent category: Chuyên mục cha
- Description: Mô tả cho chuyên mục
Sau đó chọn Add new category để thêm chuyên mục mới.
Chuyên mục mới sẽ xuất hiện ở đây. Để sửa chuyên mục vừa tạo bạn rê chuột vào tên chuyên mục và thực hiện:
- Edit: Sửa chuyên mục
- Quick Edit: Sửa nhanh chuyên mục
- Delete: Xoá chuyên mục
- View: Xem chuyên mục
- Make default: Chọn chuyên mục này làm mặc định
2. Tạo sản phẩm
Để tạo mới sản phẩm bạn chọn Products => All Products sau đó nhập vào nội dung và thông tin của sản phẩm. Sau khi nhận xong bạn chọn Public để đăng sản phẩm lên.
Sản phẩm được đăng thành cônng bạn sẽ thấy xuất hiện ở giao diện của hàng (shop) của website
3. Cấu hình mail thông báo đơn hàng
Lưu ý: Trước khi thiết lập bạn cần phải cấu hình SMTP cho mail
Ở bước này sẽ thiết lập email Gửi đơn hàng và Email nhận thông tin đơn hàng của WooCommerce như là: Đơn hàng mới, Huỷ đơn hàng, Thông báo đơn hàng không thành công.
Bạn hãy truy cập vào WooCommerce => Thiết lập sau đó chọn và nhập vào các thông tin như sau
- Đơn hàng mới: Nhập vào mail nhận thông báo đơn hàng khi có người đặt hàng mới
- Huỷ đơn hàng: Nhập vào mail nhận thông báo khi đơn hàng bị huỷ
- Đơn hàng không thành công: Nhập vào mail nhận thông thông khi đơn hàng không thành công.
Nếu bạn muốn nhận nhiều mail bạn hãy nhập các mail và cách nhau bằng dấu phẩy (,): Ví dụ (email1, email2, email3, email4)
Tiếp đến bạn hãy di chuyển xuống phân bên dưới và thiết lập tại Tuỳ chọn email người gửi
- Tên “người gửi”: Ở khung này bạn hãy nhập tên tiêu đề của người gửi đơn hàng.
- “Từ” địa chỉ: Bạn hãy nhập gmail mà bạn đã cấu hình SMTP (Đây là email gửi thông báo đơn hàng đến khách hàng của bạn)
Qua bài viết Xây dựng một website bán hàng với MyThemShop. Hy vọng khi xem xong bài viết này bạn có thể xây dựng cho riêng mình một website bán hàng hoàn chỉnh để chuẩn bị cho công việc kinh doanh của mình.
Chúc bạn thực hiện thành công.
No Comment! Be the first one.