Gửi ticket
Khuyến mại
Kiến thức
Quản lý dịch vụ
Chào anh/chị,
Bài hướng dẫn này sẽ chỉ cho anh/chị cách tạo một danh sách các loại sản phẩm (ví dụ: Áo Sơ Mi, Quần Jean, Váy Đầm…) và đặt nó ở bất kỳ đâu trên trang web của mình.
“Danh mục Sản phẩm” là gì?
Hãy tưởng tượng trang web của anh/chị là một siêu thị lớn. “Danh mục Sản phẩm” chính là các tấm biển chỉ dẫn các gian hàng khác nhau như “Gian hàng Rau củ”, “Gian hàng Thịt cá”, “Gian hàng Bánh kẹo”.
Việc này giúp khách hàng:
- Dễ dàng tìm thấy nhóm sản phẩm họ quan tâm.
- Nhanh chóng biết được cửa hàng của anh/chị bán những loại hàng nào.
- Có trải nghiệm mua sắm tốt hơn.
Đừng lo lắng, các bước thực hiện rất đơn giản. Anh/chị chỉ cần làm theo hướng dẫn là được.
Điều kiện cần: Anh/chị đã tạo sẵn các Danh mục Sản phẩm
Trước khi hiển thị danh mục ra ngoài, anh/chị cần đảm bảo mình đã tạo ra chúng. Giống như phải có “gian hàng” thì mới treo “biển chỉ dẫn” được.
Để kiểm tra, anh/chị vào trang quản trị (menu đen bên trái), tìm mục Sản phẩm -> Danh mục. Nếu đã thấy danh sách các loại sản phẩm của mình ở đó thì tuyệt vời, chúng ta có thể bắt đầu ngay!
Các Bước Thực Hiện
Chúng ta sẽ thực hiện qua 3 bước chính:
- Mở trình chỉnh sửa trang web (gọi là UX Builder).
- Thêm khối “Danh mục Sản phẩm” (Product Categories) vào trang.
- Tùy chỉnh cách hiển thị cho danh sách này.
Bước 1: Mở Trình Chỉnh Sửa Trang Web (UX Builder)
Đầu tiên, anh/chị cần vào trang mà mình muốn thêm danh sách sản phẩm (ví dụ: Trang chủ, hoặc một trang “Sản phẩm” riêng).
- Từ trang quản trị website (trang có menu màu đen bên trái), anh/chị tìm đến mục Trang.
- Rê chuột vào mục Trang, một menu con sẽ hiện ra, anh/chị bấm vào Tất cả các trang.
- Tìm đến trang mình muốn sửa trong danh sách, sau đó rê chuột vào tên trang đó.
- Các tùy chọn sẽ hiện ra bên dưới, anh/chị hãy bấm vào nút “Sửa với UX Builder”.
Màn hình sẽ chuyển sang giao diện chỉnh sửa. Bên trái là cột công cụ, bên phải là trang web của anh/chị.
Bước 2: Thêm Khối “Danh mục Sản phẩm” (Product Categories)
Bây giờ, chúng ta sẽ chọn công cụ này và đặt nó vào trang web.
- Nhìn sang cột công cụ bên trái. Anh/chị sẽ thấy một nút dấu cộng (+) to màu xanh có chữ “Add Elements”. Hãy bấm vào đó.
- Một bảng lớn chứa rất nhiều khối chức năng sẽ hiện ra. Để tìm cho nhanh, anh/chị hãy gõ chữ “Product Categories” vào ô tìm kiếm ở trên cùng.
- Ngay lập tức, khối Product Categories sẽ hiện ra. Anh/chị chỉ cần bấm chuột vào nó.
Vậy là xong! Một danh sách các danh mục sản phẩm của anh/chị sẽ được thêm ngay vào trang web. Giờ chúng ta sẽ tùy chỉnh cho nó hiển thị theo đúng ý mình.
Bước 3: Tùy Chỉnh Cách Hiển Thị
Sau khi thêm khối, cột công cụ bên trái sẽ tự động chuyển sang phần cài đặt cho danh sách này. Anh/chị có thể lựa chọn các kiểu hiển thị khác nhau.
Mục 1: BỐ CỤC (LAYOUT)
Phần này quyết định cách sắp xếp và hiển thị các danh mục trên trang.
- Type (Kiểu sắp xếp):
- Slider (Thanh trượt): Các danh mục sẽ nằm trên một hàng và khách hàng có thể bấm nút mũi tên để lướt qua lại. Rất hợp để đặt ở đầu trang chủ.
- Row (Hàng ngang): Các danh mục sẽ dàn thành một hàng ngang. Nếu không đủ chỗ, nó sẽ tự động xuống hàng.
- Grid (Lưới): Sắp xếp các danh mục theo dạng lưới (nhiều hàng, nhiều cột). Dùng khi anh/chị muốn trưng bày tất cả các danh mục ra cùng một lúc.
- Columns (Số cột): Anh/chị muốn hiển thị bao nhiêu danh mục trên một hàng? Kéo thanh trượt này để chọn (ví dụ: 3, 4, hoặc 5 cột).
- Column Spacing (Khoảng cách cột): Chọn khoảng cách giữa các danh mục (Gần, Xa, Bình thường).
- Depth & Depth Hover (Hiệu ứng nổi 3D):
- Depth: Tạo một lớp bóng mờ bên dưới các danh mục, làm chúng trông “nổi” lên khỏi trang web.
- Depth Hover: Hiệu ứng nổi sẽ đậm hơn khi khách hàng rê chuột vào.
- Mẹo: Anh/chị có thể để cả hai là 0 nếu thích phong cách phẳng, hoặc chọn 1-2 để có hiệu ứng nhẹ nhàng
Mục 2: SLIDER
Phần này chỉ có tác dụng khi anh/chị chọn ở trên.
- Nav Style (Kiểu nút điều hướng): Chọn kiểu mũi tên trái/phải để lướt slider (Reveal: hiện ra khi rê chuột, Simple: luôn hiện, Outline: dạng viền).
- Nav Color (Màu nút điều hướng): Chọn màu cho mũi tên (Sáng hoặc Tối) để nổi bật trên nền trang web.
Mục 3: META
Phần này quyết định NỘI DUNG nào sẽ được hiển thị.
- Categories (Chọn danh mục): Đây là mục RẤT QUAN TRỌNG.
- Để trống: Hệ thống sẽ tự động lấy tất cả các danh mục sản phẩm của anh/chị.
- Chọn cụ thể: Bấm vào ô này và chọn chính xác những danh mục anh/chị muốn trưng bày. (Ví dụ: chỉ muốn hiện “Áo Thun” và “Quần Jean”).
- Total (Tổng số): Giới hạn số lượng danh mục tối đa được hiển thị. Ví dụ, nếu anh/chị có 20 danh mục nhưng chỉ muốn hiện 8 cái đẹp nhất, hãy điền số 8 vào đây.
- Order By (Sắp xếp theo):
- Menu Order: Sắp xếp theo thứ tự anh/chị đã cài đặt trong mục Sản phẩm -> Danh mục. Đây là lựa chọn tốt nhất để tùy biến.
- Name: Sắp xếp theo tên (A-Z).
- Sắp xếp: Chọn ASC (Tăng dần, A-Z) hoặc DESC (Giảm dần, Z-A).
- Show Count (Hiển thị số lượng): Gạt nút này sang màu xanh, bên dưới tên mỗi danh mục sẽ hiện ra số lượng sản phẩm có trong đó. (Ví dụ: Áo Sơ Mi (15)).
Mục 4: HÌNH ẢNH (IMAGE)
Phần này quyết định HÌNH ẢNH của danh mục sẽ trông như thế nào.
- Cao (Height): Chỉnh chiều cao cố định cho tất cả các ảnh. Ví dụ, điền 200px để tất cả các ảnh cao bằng nhau.
- Radius (Bo tròn góc): Kéo thanh trượt này để “gọt” các góc của ảnh.
- 0%: Ảnh sẽ là hình vuông sắc cạnh.
- 50% trở lên: Ảnh sẽ dần trở thành hình tròn. Rất đẹp mắt!
- Overlay (Lớp phủ màu): Bấm vào ô vuông để chọn một lớp màu phủ nhẹ lên trên ảnh. Thường dùng để làm chữ nổi bật hơn. Anh/chị có thể chọn màu đen và kéo thanh trượt độ trong suốt xuống thấp.
- Hover (Hiệu ứng rê chuột): Chọn một hiệu ứng khi khách hàng rê chuột vào ảnh.
- Zoom: Ảnh sẽ phóng to lên một chút. Đây là hiệu ứng rất phổ biến và đẹp.
- Glow: Ảnh sẽ tỏa sáng nhẹ.
- Fade Out: Lớp phủ màu sẽ mờ đi.
Bước Cuối Cùng: Lưu Lại!
Sau khi đã tùy chỉnh mọi thứ theo ý muốn, anh/chị BẮT BUỘC phải làm 2 bước sau:
- Ở dưới cùng cột bên trái, bấm nút “Apply”.
- Ở góc trên cùng bên phải màn hình, bấm nút “Update” màu xanh.
Chờ vài giây để hệ thống lưu lại. Bây giờ anh/chị có thể ra ngoài trang web để chiêm ngưỡng thành quả của mình!
Mẹo Thêm
- Muốn di chuyển danh sách này? Ở khung xem trước bên phải, anh/chị chỉ cần nhấn giữ chuột vào khối “Danh mục Sản phẩm” và kéo nó đến vị trí mới rồi thả ra.
- Muốn sửa lại danh sách đã tạo? Chỉ cần vào lại “Sửa với UX Builder”, sau đó bấm đúp chuột vào danh sách đó trên trang web. Cột công cụ bên trái sẽ hiện ra các cài đặt để anh/chị chỉnh sửa lại.
