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

Bài viết trước mình đã hướng dẫn cách tạo website bán hàng điện tử, công nghệ, và bài này sẽ là hướng dẫn thiết kế website bán hàng mỹ phẩm Online chi tiết.

Các bước thiết kế website bán hàng mỹ phẩm Online gồm:

  1. Mua tên miền và Hosting
  2. Tải Theme
  3. Cài đặt Theme bán hàng mỹ phẩm
  4. Cấu hình Theme
  5. Sửa đổi thông tin

Bước 1. Mua tên miền và Hosting

Tên miền là địa chỉ của website, giống như số nhà vậy.

Tên miền gồm tên, ví dụ: facebook, dantri, vnexpress, thachpham, themevi và đuôi (phần mở rộng, com, net, org, vn, edu.vn…)

Tên miền là gì? Hướng dẫn mua tên miền giá rẻ

Hosting chứa dữ liệu của website như hình ảnh, bài viết, code, video…. giống như mảnh đất để xây nhà.

 Hosting là gì? Mua hosting ở đâu tốt và rẻ?

Bước 2. Cài đặt Theme bán mỹ phẩm

2.1. Tải Theme Flatsome

Bạn tải về cả 3 file bao gồm: Installer.php, File Tài khoản Admin, và File nén

Đây là bản Update ngày 13/10/2018. Đã update tất cả Theme/Plugin, và thêm Key Flatsome vào web 🙂

2.2. Thực hiện tương tự hướng dẫn tạo web bán đồ công nghệ này, từ BƯỚC 3 – BƯỚC 5

Bước 3. Cấu hình Theme mỹ phẩm

3.1. Phần Đầu trang (Header)

header-flatsome-theme-my-pham1-min

Đầu tiên là thanh màu xanh trên cùng, nó gọi là Top bar. Truy cập vào Flatsome > Theme Options > Header > Top bar

header-flatsome-theme-my-pham2-min

Sau khi bấm vào Top Bar, nhìn bên trái bạn sẽ thấy các tùy chọn thay đổi thanh Top Bar như:

  • Enable Top Bar: Bật hoặc Tắt thanh Top Bar
  • Height: Chiều cao
  • NAV Color: Biểu tượng đầu tiên là chữ trắng – Biểu tượng thứ hai là chữ đen
  • Top Bar Background: Màu nền của TOP Bar. Bấm vào bạn sẽ thấy hiện ra bảng màu, kéo cái ô tròn nhỏ nhỏ để chọn màu phù hợp. Chọn xong thì bấm vào bất kỳ vị trí nào bên ngoài là được.
  • Navigation Style: các kiểu hiển thị chữ trên Top Bar

header-flatsome-theme-my-pham3-min

Nhìn qua bên phải, bạn sẽ thấy 3 mục HTML 3, Contact, và Social Icons. Bấm vào bánh răng bên phải để chỉnh sửa.

  • HTML 3: Chính là dòng chữ Shop mỹ phẩm Nessy – Cung cấp mỹ phẩm chất lượng cao
  • Contact: Email, Số điện thoại, Giờ làm việc
  • Social Icons: Biểu tượng mạng xã hội

header-flatsome-theme-my-pham4-min

Bấm vào HTML 3, và kéo xuống một tí, bạn sẽ nhìn thấy:

  • Font-size: Cỡ chữ, bạn đổi lại số 15
  • Color: màu chữ, tính theo rgba, với 0.8 là độ mờ của chữ (0-1)
  • Và thay đổi dòng chữ Shop Mỹ phẩm… theo cách bạn muốn thôi

Sau đó nhìn lên trên, sẽ thấy nút Lưu & Đăng

header-flatsome-theme-my-pham5

Lại nhìn qua phải và bấm vào Contact

  • Icon Style: Hiển thị cả icon và chữ (Icons Left) hoặc chỉ hiển thị Icon (Icons Only)
  • Icon Size: kích thước icon
  • Phone: Điền số điện thoại, kiểu gì cũng được
  • Email: Điền chính xác email
  • Email Label: điền gì cũng được, điền sai email cũng được
  • Open Hours: Giờ làm việc
  • Location: Địa chỉ

header-flatsome-theme-my-pham6-min

Bấm vào Social Icons ở bên phải

  • Icon Style: Kiểu icon mạng xã hội
  • Bên dưới là các mạng xã hội. Chỉ mạng nào điền đường dẫn liên kết thì nó mới hiển thị.

header-flatsome-theme-my-pham7

Tiếp tục nhìn vào hàng thứ 2, đó là LOGO, Block 2 (Ship dịch vụ COD, Hotline, Thanh toán) và Search Form (hộp tìm kiếm)

header-flatsome-theme-my-pham4-min

Bấm vào LOGO

  • Tiêu đề trang: Tên website
  • Khẩu hiệu: Slogan
  • Display below Logo: Hiển thị tên web và slogan bên dưới LOGO hay không
  • Logo Position: Bên trái hoặc Giữa
  • Logo Image: Thay đổi tệp để đổi Logo
  • Logo Image – Light Version: Logo này sẽ được sử dụng khi Header là trong suốt (transparent)
  • Logo Container Width: Chiều rộng vùng chứa logo
  • Logo max width (px): Chiều rộng tối đa của logo
  • Logo Padding: khoảng cách giữa logo và viền vùng chứa logo. Mặc định viền thường trong suốt, nên bạn sẽ chẳng thấy gì, có thể bỏ qua.
  • Biểu tượng Site: favicon, biểu tượng nhỏ xuất hiện trên tab trình duyệt

Xong thì bấm Lưu và Đăng

header-flatsome-theme-my-pham8-min

Bấm tiếp vào Search Form

  • Search Icon Style: Kiểu icon tìm kiếm
  • Search icon Type: Nó không liên quan mục này
  • Search Form Style: Nên để là Flat, nếu chọn Normal bạn sẽ thấy rất xấu
  • Placeholder Text: dòng chữ xuất hiện trong hộp tìm kiếm
  • Search Categories: Mặc định nó chỉ tìm kiếm trong Bài viết, Trang. Bấm vào để tìm kiếm trong cả Chuyên mục
  • Header Search Form Width: chiều rộng hộp tìm kiếm

header-flatsome-theme-my-pham9-min

Bấm vào Block 2, tìm mục Header Block 2, nhìn xuống bạn sẽ thấy dòng chữ Dich vu. Đây chính là tên của Block.

header-flatsome-theme-my-pham10

Truy cập vào trang quản trị website (WP Admin) > Blocks. Tìm mục Dich vu

header-flatsome-theme-my-pham11

Di chuột vào Dịch vụ, bạn sẽ thấy bên dưới hiện lên một loạt như: Chỉnh sửa, Edit with UX Builder, Sửa nhanh, Xóa tạm, Xem. Bấm vào Edit with UX Builder.

Mỗi Column chính là một ô: Ship dịch vụ Code, Hotline, Thanh toán. Bấm vào mũi tên để hiện ra các mục con của nó. Bấm vào bánh răng bên phải > Options > Sau khi sửa bấm vào Apply ở phía dưới > Và bấm tiếp vào Update.

  • Icon Box: Sửa biểu tượng icon
  • Text: Sửa dòng chữ bên phải icon

Có rất nhiều tùy chọn, bạn có thể tự thử nghiệm để rút ra chức năng của từng mục nhé.

header-flatsome-theme-my-pham12-min

Đổi hình nền Header. Truy cập vào Giao diện > Tùy chỉnh (hoặc Tùy biến) > Header > Header Main > Kéo xuống phần Background Image > Đây chính là phần đổi hình nền.

giao-dien-tuy-chinh

header-flatsome-theme-my-pham13-min

Ngoài ra chỗ này có rất nhiều tùy chọn sửa đổi Header, bạn có thể tự khám phá thêm.

3.2. Menu chính, Danh mục sản phẩm (bên trái), Slider

menu-danh-muc-slider-my-pham-1-min

Sửa menu chính

Vào Giao diện > Menu

menu-danh-muc-slider-my-pham-2

Chọn một trình đơn để chỉnh sửa: Danh mục sản phẩm (Vertical Menu) > Chọn

menu-danh-muc-slider-my-pham-5

Bấm Lưu trình đơn (hoặc Lưu Menu)

  • Main Menu: Menu chính như hình phía trên trên kia
  • Main Menu-Mobile: Menu trên di động
  • Footer Menu: Menu dưới Footer (chân trang)

Nếu chọn cả 3, nó sẽ hiển thị ở cả menu chính như hình, trên di động và dưới chân trang

menu-danh-muc-slider-my-pham-4-min

Menu Danh mục sản phẩm (bên trái)

menu-danh-muc-slider-my-pham-3

Vertical Menu chính là Menu ở vị trí bên trái.

menu-danh-muc-slider-my-pham-6-min

Mặc định khi kéo chuột xuống, menu này sẽ bị ẩn đi. Bạn cần bấm vào Danh mục sản phẩm thì nó mới hiển thị trở lại.

Vậy nếu không muốn bấm vào, mà muốn di chuột thì nó hiển thị luôn thì sao?

Truy cập vào Thiết lập (hoặc Cài đặt, Settings) > OT FS Vertical Menu > Bấm vào mũi tên đen nhỏ ở Event Show > Hover to Show > Lưu thay đổi

menu-danh-muc-slider-my-pham-7-min

Sửa Slider

Mở trang chủ > Di chuột vào nút Sửa trang (ở bên trên, thanh đen nằm ngang) > Edit with UX Builder

Slider chính là Column 9/12. Bấm vào mũi tên bên phải để hiện ra các mục con. Bạn sẽ thấy 3 cột Image, đó chính là 3 ảnh của Slider.

Bấm tiếp vào Bánh răng bên phải > Options > Sửa ảnh thôi

menu-danh-muc-slider-my-pham-8-min

Phần này cũng có rất nhiều tùy chọn, bạn thử nghiệm lần lượt từng cái để biết rõ chúng có tác dụng gì nhé.

Vậy đổi biểu tượng bên trái từng mục Menu của Danh mục sản phẩm như nào?

menu-danh-muc-slider-my-pham-9

3.3. Sản phẩm mới, Sản phẩm bán chạy, sản phẩm khuyến mại

san-pham-ban-chay-trang-chu1-min

Quay ra trang chủ > Di chuột lên Sửa trang > Edit with UX Buidler.

san-pham-lam-dep-da-flatsome1

Section chính là phần bạn cần sửa. Bấm vào mũi tên, sẽ hiện ra các mục con, trong đó có Tabs, mỗi Tab là một mục Sản phẩm bán chạy, Sản phẩm mới, Sản phẩm khuyến mại. Và khu vực bên phải màn hình, là phần sẽ hiển thị bên ngoài website.

san-pham-ban-chay-trang-chu2-min

Bấm tiếp vào mũi tên ở từng Tab muốn sửa > Bạn sẽ thấy Products > Bấm vào bánh răng > Options

san-pham-ban-chay-trang-chu3

Bạn sẽ thấy rất nhiều tùy chọn ở đây

  • Style: Kiểu hiển thị sản phẩm
  • Type: Slider (4 sản phẩm/hàng – Mặc định) – Full Slider (1 sản phẩm/hàng) – Row/Masonry (2 hàng, 4 sản phẩm/hàng) – Grid
  • Width: Full Width (chiều rộng tối đa)
  • Column Spacing: Khoảng cách giữa hai sản phẩm
  • Columns: Số cột, mặc định là 4, mỗi sản phẩm một cột
  • Depth Hover: Hiệu ứng khi di chuột vào sản phẩm
  • Animate: Hiệu ứng chuyển động cho sản phẩm, có rất nhiều hiệu ứng, bạn tự thử nghiệm nhé
  • Auto Slide: Sản phẩm tự động chạy qua trái, qua phải không…
  • ….

Bài viết: Tab sẽ lấy sản phẩm từ Danh mục nào

  • Category: Chuyên mục sản phẩm
  • Total Posts: Số sản phẩm. Lưu ý nếu bạn chọn là 8, mà phía trên số cột là 4. Nó chỉ hiển thị 4, nhưng nếu bạn chọn chế độ chạy Slider cho sản phẩm trên, thì nó sẽ chạy 8 sản phẩm này.
  • Tags: Thẻ
  • Custom Posts: Nếu bạn muốn chỉ hiển thị những sản phẩm nhất định, thì điền vào đây

Và bên dưới nữa là các Tùy chọn về Hình ảnh, bài viết

san-pham-ban-chay-trang-chu4-min

Cuối cùng bấm Apply > Update.

Các Tab khác cũng tương tự.

3.4. Sản phẩm làm đẹp da

san-pham-lam-dep-da-flatsome-1-min

Quay ra trang chủ, di chuột vào nút Sửa trang > Edit with UX Builder

san-pham-lam-dep-da-flatsome1

Section Sản phẩm làm sạch da chính là phần chúng ta cần sửa. Nó có 3 mục là:

  • Gap: khoảng cách phía trên
  • Column 3/12: Phần ảnh và tên danh mục bên trái
  • Column 9/12: Phần sản phẩm bên phải

san-pham-lam-dep-da-flatsome-2-min

Để đổi tên danh mục, bạn bấm vào theo thứ tự: Column 3/12 > Message box > Row > Column 12/12 > Text và sửa

san-pham-lam-dep-da-flatsome-3

Nếu bạn cảm thấy bối rối trước những dòng code này. Hãy bấm vào Open Text Editor để ra giao diện sửa đổi thân thiện hơn nhé. Sửa xong bấm Apply > Update.

san-pham-ban-chay-trang-chu-4

Còn phần ảnh thì vào Column 3/12 > Image rồi sửa thôi. Rất nhiều tùy chọn, bạn hãy tự khám phá nhé.

san-pham-lam-dep-da-flatsome-4

Để sửa phần sản phẩm bên phải, bấm vào Column 9/12 > Products. Phần này có tùy chọn tương tự Bước 3.3

san-pham-lam-dep-da-flatsome-5

3.5. Đăng ký bản tin

dang-ky-ban-tin-flatsome1-min

Bạn cũng quay ra trang chủ, di chuột lên đầu Sửa trang > Edit with UX Builder

san-pham-lam-dep-da-flatsome1

Phần chúng ta cần sửa là Message Box. Nó có 4 Column là:

  • Column: 5/12: Chính là đoạn Đăng ký nhận tin, Vui lòng nhập địa chỉ Email… và ô Điền địa chỉ Email + Đăng ký
  • Column 1/12: Khoảng cách hai bên

dang-ky-ban-tin-flatsome2

Bấm vào bánh răng từng cái để sửa. Riêng ô điền địa chỉ Email + Đăng ký là bạn phải sửa trong phần Form liên hệ (WP Admin)

dang-ky-ban-tin-flatsome3

Chính là Form Lien he phía trên. Di chuột vào đó và bấm Sửa

dang-ky-ban-tin-flatsome4-min

Mình sẽ có một bài chi tiết nói về Form liên hệ trong bài viết khác. Còn phần này bạn chỉ quan tâm tới mục Cấu hình Email.

  • Mail nhận: Mail muốn nhận thông tin
  • Mail gửi: Sửa [email protected] thành [email protected] Với tenmiencuaban.com là tên miền của website bạn đang sử dụng.
  • Tiêu đề: Tiêu đề mail bạn nhận được.

dang-ky-ban-tin-flatsome5-min

Để chức năng gửi Email hoạt động, hosting của bạn phải bật hàm mail hoặc cài SMTP. Chỉ cần hỏi bên bán hosting, họ sẽ cho bạn biết hàm mail có được bật hay không.

Thông thường hosting Việt là tắt hàm mail. Còn hosting nước ngoài như Stablehost là bật.

3.6. Chăm sóc và dưỡng da mặt, Chăm sóc da toàn thân và Chăm sóc tóc

Cách sửa tương tự như phần trên, vì mấy mục này cũng giống nhau thôi.

3.7. Nhân viên tư vấn

nhan-vien-tu-van-section1-min

Truy cập vào trang quản lý website (WP Admin) > Blocks > Footer > Edit with UX Builder

footer-flatsome1-min

Trong đó:

  • Column 12/12: Liên hệ nhân viên tư vấn của chúng tôi để được hỗ trợ tận tình
  • 6 Column 2/12: tên, vị trí, số điện thoại, ảnh của từng nhân viên

footer-flatsome2

Bấm vào Column 12/12

  • Gap 30px: khoảng cách phần trên 30px
  • Text: bấm vào bánh răng để sửa nội dung

footer-flatsome3

Ảnh chính là Icon Box. Và tên, chức vụ, số điện thoại là Text. Bấm vào bánh răng tương ứng để sửa. Sửa tương tự như đã nói ở các mục trước.

footer-flatsome4

3.8. Footer (Chân trang)

Footer chính là Row thứ hai. Nó có 4 mục tương ứng là (từ trên xuống dưới):

  • Column 3/12: phần giới thiệu Nessy và Like, Share Facebook
  • Column 2/12: thông tin chung và hướng dẫn
  • Column 3/12: Menu danh mục sản phẩm
  • Column 4/12: Một số sản phẩm

footer-flatsome5

Column 3/12. Về Nessy và Column 2/12. Thông tin chung, Hướng dẫn

Bấm vào Column 3/12 sẽ thấy: Gap và Text

Bấm tiếp vào Text > Open Text Editor để sửa nội dung phần giới thiệu

footer-flatsome6

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ứ =)))

Gửi một bình luận