Cloudways giảm 30% Hosting. Mã giảm: SCALEINSUMMER

Thiết kế Website bán hàng mỹ phẩm Online A – Z

Bài viết sẽ là hướng dẫn thiết kế website bán hàng mỹ phẩm Online chi tiết, giúp bạn có một website mỹ phẩm đơn giản mà không cần mất tiền thuê dịch vụ!

Đây là một mẫu web mỹ phẩm mình đã thiết kế sẵn, bạn chỉ cần tải về, sửa đổi thông tin và sử dụng thôi!

Bấm vào ảnh để ra trang demo chi tiết

Phần 1. Chuẩn bị công cụ

Bạn cần chuẩn bị những công cụ sau

1. Tên miền

Tên miền là địa chỉ của một website trên Internet. Đây là bắt buộc để website hoạt động.

Để biết thêm chi tiết, hãy đọc bài Tên miền là gì?

Và bạn có thể mua tên miền tại Namesilo, đây là nhà cung cấp tên miền mình sử dụng cho blog themevi.com (trước đây) và gần 20 tên miền (hiện tại).

2. Hosting

Hosting để lưu trữ dữ liệu của website. Và nó cũng là bắt buộc.

Mình khuyến khích mua hosting tại HostingViet, vì giá khá rẻ, cấu hình ổn cho một website bán hàng nhỏ và hỗ trợ khá linh hoạt. Xem hướng dẫn mua Hosting HostingViet (chọn gói 40k/tháng là đủ, nếu đăng dưới 50 sản phẩm).

3. Bộ cài đặt website

Nói chính xác là website đã được mình thiết kế sẵn (giống y hệt website mình nói ở đầu bài). Bạn chỉ cần cài đặt rồi chỉnh sửa lại màu sắc, thông tin phù hợp với bạn nữa thôi.

Bộ cài đặt bao gồm

  • WordPress 5.2.1
  • GeneratePress Theme & Child Theme
  • Plugin Beaver Builder, Advanced Custom Fields, All in One WP Migration, Classic Editor, Duplicate Page, ManageWP Worker và WordPress Importer

Bộ cài đặt được cập nhật vào ngày 09/06/2019 và đã sửa lỗi

  • Xóa tài khoản mặc định
  • Ẩn một số thông báo cập nhật
  • Thêm điều kiện cho trường thông tin ở Footer
  • Sửa Web Options

Link tải bộ cài đặt: Google Drive

Phần 2. Cài đặt

Bước 1. Cài đặt WordPress

Đầu tiên bạn cần cài đặt WordPress theo hướng dẫn này, nếu bạn đã mua hosting từ HostingViet.

Bước 2. Import bộ cài đặt

Tiếp theo bạn cần cài đặt plugin All in One WP Migration và Import bộ cài đặt website (Bước 3. Phần 1), theo hướng dẫn này.

Với HostingViet thì bạn sẽ thấy All in One WP Migration giới hạn tệp Import là 128 MB, nên bạn sẽ không cần cài thêm plugin bổ sung nào nữa nhé!

Phần 3. Chỉnh sửa thông tin

Vậy là bạn đã có một website với y hệt giao diện như đầu bài rồi. Tiếp theo chúng ta cùng tìm hiểu cách chỉnh sửa thông tin trên web theo thông tin doanh nghiệp bạn nhé!

1. Sửa Menu

Menu gồm Logo, Menu (Giới thiệu, Bảng giá, Khuyến mãi, Liên hệ), Điện thoại

Bạn cần đăng nhập vào WordPress, và bấm tiếp vào Beaver Builder > Bấm vào Thông tin liên hệ > Bạn sẽ thấy mục Logo và Điện thoại. Sửa ở đó là được.

Nếu bạn muốn đổi màu nút và số điện thoại, hãy bấm vào Màu sắc > Và đổi ở 3 mục màu sắc bên dưới.

thiet-ke-web-xe-tai2-min

Sau khi đổi xong thì bấm vào Update để lưu lại thay đổi nhé.

Với mục Menu, bạn vào Giao diện > Menu. Mục này mình sẽ không hướng dẫn thêm, bạn có thể đăng vào nhóm (đầu bài), nếu cần chỉnh sửa gì ở đó nhé!

2. Sửa giới thiệu

Giới thiệu bao gồm các phần như hình dưới.

tk-web-my-pham2-min

Để sửa giới thiệu, hãy bấm vào Beaver Builder > Giới thiệu > Bạn sẽ thấy 4 vị trí và Ảnh giới thiệu, sửa ở đó.

tk-web-my-pham3-min

3. Sửa khuyến mãi

Khuyến mãi bao gồm 3 ảnh.

tk-web-my-pham4-min

Bạn thay ở Beaver Builder > Khuyến mãi. Thay xong nhớ bấm Update để lưu lại.

tk-web-my-pham5-min

4. Sửa thông tin liên hệ

Thông tin liên hệ chính là phần ở dưới chân web, như trong hình.

tk-web-my-pham6-min

Sửa ở Beaver Builder > Thông tin liên hệ giống Bước 1 Phần 3

5. Sửa Facebook/Zalo

Để sửa phần Facebook và Zalo ở bên tay phải website

thiet-ke-web-xe-tai10-min

Truy cập vào Giao diện > Sửa giao diện > Bấm vào Footer.php

Và sửa liên kết và chữ được đánh dấu bằng 3 mũi tên trong hình dưới.

  • Đổi đường dẫn Facebook
  • Đổi dòng chữ “Bạn có câu hỏi”
  • Đổi số đằng sau đường dẫn zalo.me

thiet-ke-web-xe-tai11-min

6. Sửa Slide & Ảnh dưới khuyến mãi

Bạn bấm vào Beaver Builder > Sửa thôi.

tk-web-my-pham7-min

7. Chỉnh sửa khác

Truy cập vào Cài đặt > Tổng quan > Đổi thông tin website > Bấm Lưu thay đổi

  • Đổi Tên website, Khẩu hiệu, Địa chỉ Email
  • KHÔNG ĐỔI Địa chỉ WordPress & Địa chỉ trang web: Hai địa chỉ này sẽ tự động cập nhật đúng theo tên miền của bạn, khi bạn làm xong Bước 2. Phần 2.

Phần 4. Hướng dẫn sử dụng

Để đăng sản phẩm lên website, bạn bấm vào Bài viết > Viết bài mới

thiet-ke-web-xe-tai-dang-bai1-min

Nhìn qua bên phải, đánh dấu vào Mỹ phẩm > Sẽ xuất hiện phần Thông số kĩ thuật

Và điền thông tin cho từng sản phẩm thôi.

Nhớ điền mô tả nhanh cho mỹ phẩm

và Ảnh đại diện (sẽ hiển thị bên ngoài trang chủ)

thiet-ke-web-xe-tai-dang-bai5-min

Cuối cùng bấm Đăng

thiet-ke-web-xe-tai-dang-bai6-min

Phần 5. Lưu ý

1. Tài khoản quản trị là

Username: admin

Mật khẩu: admin

2. Xóa tài khoản tuanphan sau khi cài đặt website

3. Bỏ chặn Google Bot ở Cài đặt > Đọc

3 bình luận về “Thiết kế Website bán hàng mỹ phẩm Online A – Z”

    • Ý bác là không tải được file zip lên host được à? Nó báo lỗi gì không? Bác mô tả cụ thể thì em mới biết chứ =)))

Bình luận đã đóng.

1
Bạn có câu hỏi?