Trang chủ >

Tìm kiếm trên diễn đàn

Hướng dẫn làm web bán đồ thời trang , phiên bản 2017 1

Tham gia : 13/08/2013
Website : Admin
Admin
Gửi vào lúc : 17/08/2017

Demo: http://ella8myshopify.mov.mn/

screenshot_71

Bài viết sẽ hướng dẫn các bạn làm 1 web bán đồ thời trang quần áo từ A-Z trên phiên bản 2017, áp dụng tương tự các bạn có thể làm bất cứ web bán hàng nào mình cần. Phần lớn thao tác của mình sau khi đăng nhập là ở menu quản trị Giao diện > bố cục chức năng > bản PC, để sửa một chức năng thì các bạn click vào hình bút chì ở trong mục bố cục bản PC, vd như hình dưới, do vậy khi mình sẽ không nhắc lại khi vào phần này,.

screenshot_1

1.Đăng ký tài khoản, đăng nhập hệ thống, nâng cấp bản 2017 nếu đang ở bản cũ

nangcap_2017


 

2. Cài đặt font chữ và mầu chủ đạo

Vào giao diện > bố cục chức năng > nền PC

screenshot_4

3. Tạo thanh chứ chữ mầu hồng trên website

Thêm chức năng box html vào khung chính và ấn vào hình bút chì để sửa

 screenshot_72



screenshot_73

screenshot_74

screenshot_2


kết quả

screenshot_5

4.Logo, tìm kiếm, giỏ hàng


Thêm ô chứa màu xanh lá vào bố cục

screenshot_76

Trong ô chứa thêm 3 chức năng theo thứ tự, ảnh & slide, Công cụ tìm kiếm, giỏ hàng


screenshot_75


screenshot_77

4.1. Cấu hình logo , các bạn click vào hình bút chì ở ảnh & slide ảnh vừa thêm vào

screenshot_78

ấn vào hình cái ảnh để upload logo của bạn và đưa vào mục url ảnh

screenshot_79

chọn kiểu hiển thị là inline và rộng 20%

4.2 Cấu hình ô tìm kiếm

screenshot_81


screenshot_80


4.3. Cấu hình giỏ hàng

screenshot_82

screenshot_83

sau khi cấu hình xong 3 chức năng trên thì bố cục sẽ như sau

screenshot_84

screenshot_12

Chúng ta sẽ tinh chỉnh phần này cho đẹp sau


5. Ảnh banner

screenshot_85


cấu hình cho chức năng này, upload 2 ảnh trở lên cho slide, các bạn lưu ý 2 ảnh phải có kích thước bằng nhau thì slide sẽ không bị méo hay nhẩy hình


Đặt tên và upload ảnh

screenshot_15.1

kết quả

screenshot_14

6. Menu ngang

menu ngang mình sẽ đặt trên banner

screenshot_16

screenshot_17

screenshot_18


Kết quả

screenshot_20

7. Thêm nội dung giữa và cài đặt trang chủ

7.1 .Trang chủ được tính như 1 trang đặc biệt và nó vẫn phải nằm trong mục nội dung giữa, các bạn tạo bố cục nội dung giữa như sau

screenshot_21



7.2. Vào tab "Trang chủ PC" để thêm chức năng sản phẩm mới, chức năng này sẽ hiện ra đúng ở mục nội dung giữa màu đỏ khi ta vào trang chủ

screenshot_22

chưa cần cấu hình thì chức năng này đã hiển thị một số sản phẩm rồi

screenshot_23


Cấu hình chi tiết chức năng này

screenshot_24

screenshot_26


kết quả

screenshot_25

có thể thêm dưới chức năng này 1 banner cho web sinh động hoặc để quảng cáo sản phẩm mới của mình

screenshot_27

screenshot_28


7.3 Thêm chức năng sản phẩm khuyến mại cho trang chủ

screenshot_29

screenshot_30


Cấu hình chức năng cho sản phẩm khuyến mại

screenshot_31

Các bạn nhấn vào chữ T Logic1, sau đó đổi nhãn cho nó thành khuyến mại, load lại trang, ở phần điều kiện truy vấn 1 bạn chọn lại là khuyến mại, trong admin mở trang Sản phẩm > toàn bộ, các bạn sẽ thấy thêm 1 mục check "Khuyến mại", các sản phẩm check ở ô này sẽ vào chức năng sản phẩm khuyến mại

screenshot_32


Reload lại trang chủ để xem kết quả

screenshot_33


7.4. Căn chỉnh lại nội dung trang chủ

screenshot_34


screenshot_36

Sau khi căn chỉnh thì ô chứa nội dung trang chủ và các trang con sẽ có độ rộng là 1000px và căn giữa màn hình, các bạn thử ở những máy độ phân giải cao sẽ thấy rõ

screenshot_37


7.5. Căn chỉnh độ rộng ô chứa logo giỏ hàng

screenshot_38


screenshot_36


kết quả

screenshot_40


8. Làm chân website

screenshot_41

mình sẽ làm 1 chân website chứa 3 cột, cột 1 cột 2 chứa 2 menu hay địa chỉ gì đó tùy sở thích của các bạn, cột 3 chứa facebook likebox và hộp nhận tin newsletter, tạm thời các bạn bố cục như trên, sau đó đặt độ rộng của từng cột và kiểu hiển thị inline cho từng phần

Nhân vào biểu tượng chia cột và chia 3 cột đều nhau

screenshot_41.1

screenshot_41.2

8.1. Cột 1

screenshot_42.1


screenshot_43.1


8.2. Cột 2

screenshot_44



8.3. Cột 3

Chức năng facebook

screenshot_47

screenshot_47.1

vào hệ thống > tùy chọn khác để cài đặt facebook cho chức năng này

screenshot_48


Reload lại website để xem kết quả chân web

screenshot_49


8.4. Đặt màu nền và căn chỉnh

screenshot_50


screenshot_27.1

Kết quả

screenshot_52


9. Sửa trang danh sách sản phẩm

Click thử vào trang danh sách sản phẩm, vd mục giầy

screenshot_53

Slide banner  chiếm diện tích khá nhiều và mình quyết định sẽ tắt mục này ở tất cả các trang, ngoài ra thì nội dung trang danh sách sản phẩm cũng chưa có gì ngoài cái phân trang nên mình sẽ cấu hình phần này

9.1 Tắt Slide banner ở tất cả các trang, chỉ giữ lại trang chủ

screenshot_54


screenshot_55


9.2. Tùy chọn trang danh sách sản phẩm

Các bạn vào Giao diện > tùy chọn trang sản phẩm, trang danh sách PC1, nếu chưa có cấu hình nào thì các bạn thêm cấu hình mới vào

screenshot_57


Cấu hình cụ thể

screenshot_56


kết quả

screenshot_58


9.3. Cấu hình trang chi tiết sản phẩm

screenshot_59

screenshot_60


screenshot_61

Click vào thử 1 sản phẩm để xem kết quả

screenshot_62



10. Tinh chỉnh cho một số chức năng

10.1. Thanh header khi vào các trang con

screenshot_63

screenshot_64

screenshot_30.1


screenshot_65



10.2. Ô tìm kiếm

screenshot_67


screenshot_68

screenshot_32.css


10.3. Giỏ hàng

screenshot_69

screenshot_69.1

screenshot_34.css

Kết quả

screenshot_70


Đến đây bạn đã có trang bán đồ thời trang với đầy đủ các chức năng cơ bản, mời các bạn theo dõi tiếp những bài hướng dẫn của webmienphi.vn, cảm ơn các bạn đã theo dõi

screenshot_71


Gửi vào lúc :

Gửi phản hồi của bạn ( các bạn vui lòng không gửi câu hỏi khác không liên quan đến topic, nếu có câu hỏi mới xin lập topic mới )

VUI LÒNG ĐĂNG NHẬP ĐỂ GỬI PHẢN HỒI

Chat hỗ trợ
Chat ngay