Danh mục
Add-on Product Detail
Product Detail là trang mẫu hiển thị đầy đủ thông tin chi tiết của 1 sản phẩm: tên, ảnh, mô tả, giá, thuộc tính, nút mua hàng, đánh giá... Chỉ cần dựng 1 lần duy nhất, add-on sẽ tự động áp dụng cho mọi sản phẩm khi khách bấm vào từ trang Product List.
Phần 1 — Khai báo dữ liệu trong Manage
Nhấn vào mục Product, sau đó:
| Mục | Hướng dẫn |
| Category | Nhấn nút Add màu xanh để tạo nhóm sản phẩm Nhập tên sản phẩm vào mục Name, bật / tắt tính năng Published để hiện / ẩn nhóm sản phẩm, thêm ảnh vào Category Image để sử dụng cho Add-on Product Category, chọn Product List ở mục Page, Cuối cùng bạn cần nhấn nút Save & Close để hoàn tất. Tìm hiểu thêm về Add-on Product Category. |
| All Products | Nhấn nút Add màu xanh để tạo sản phẩm Nhập tên sản phẩm vào mục Name, chọn Category mong muốn, nhập giá bán vào mục Regular Price và giá giảm vào mục Sale Price, nhập một vài mô tả vào mục Intro, có thể thêm nhiều hình ảnh sản phẩm vào phần Multi Images. Bật / tắt tính năng Published để hiện / ẩn bài viết, chọn Product Detail ở mục Page, cuối cùng bạn cần nhấn nút Save & Close để hoàn tất. |
Phần 2 — Cấu hình add-on trong Visual Editor
Cách thêm vào trang:
- Tạo (hoặc dùng) 1 trang mẫu riêng, kéo thẻ Product Detail vào canvas.
- Add-on tự lấy dữ liệu theo sản phẩm đang được truy cập — không cần chọn tay từng sản phẩm.
- Click chọn add-on, mở bảng Addons Config để tuỳ chỉnh theo 5 tab: Display, Slider, Masonry, Image, Advanced.
Display — chọn thông tin nào hiển thị trên trang chi tiết
| Trường | Ý nghĩa |
|---|---|
| Title | Bật/tắt hiển thị tên sản phẩm. |
| Image Style | Chọn kiểu hiển thị khung ảnh sản phẩm. Cần chọn 1 kiểu (vd. Slider hoặc Masonry) thì cấu hình ở tab tương ứng bên dưới mới có tác dụng — để Hide là chưa chọn kiểu nào. |
| Category | Bật/tắt hiển thị danh mục sản phẩm. |
| Description | Bật/tắt hiển thị mô tả sản phẩm. |
| Label | Bật/tắt hiển thị nhãn gắn trên sản phẩm, vd. "Mới", "Giảm giá". |
| Collapse Height of Description | Chiều cao thu gọn (px) của phần mô tả — nếu mô tả dài hơn số này sẽ tự ẩn bớt kèm nút "Xem thêm". Để 0 = không giới hạn. |
| Price | Bật/tắt hiển thị giá. |
| Similar Products | Chọn kiểu hiển thị khối "Sản phẩm tương tự" ở cuối trang (đang Hide = ẩn). |
| Field | Bật/tắt hiển thị các trường thuộc tính tuỳ chỉnh của sản phẩm (size, màu sắc...). |
| Promotion | Bật/tắt hiển thị thông tin khuyến mãi đi kèm sản phẩm. |
| Add to Cart Bar | Bật/tắt thanh "Thêm vào giỏ" dính (sticky) khi khách cuộn trang. |
| Quantity | Bật/tắt ô chọn số lượng mua. |
| Quantity in Stock | Bật/tắt hiển thị số lượng còn trong kho. |
| Add to Cart | Bật/tắt nút "Thêm vào giỏ hàng". |
| Buy Now | Bật/tắt nút "Mua ngay". |
| Add to wishlist | Bật/tắt nút "Thêm vào yêu thích". |
| Contact Button | Bật/tắt nút liên hệ, chọn loại liên hệ ở ô bên cạnh (vd. gọi điện, Zalo...). Bấm Add Button để thêm nhiều nút liên hệ khác nhau. |
| Request information form | Chọn hiển thị/ẩn biểu mẫu yêu cầu thêm thông tin sản phẩm. |
| Specification | Bật/tắt hiển thị bảng thông số kỹ thuật. |
| Rating & Review | Bật/tắt hiển thị đánh giá & nhận xét từ khách hàng. |
| Publish Comment | Chế độ duyệt bình luận — đang để Manual nghĩa là cần duyệt thủ công trước khi hiển thị công khai. |
| Rating Limit | Giới hạn số lượng đánh giá hiển thị. |
| Intro | Bật/tắt hiển thị đoạn giới thiệu ngắn. |
| Collapse Height of Intro | Chiều cao thu gọn của đoạn giới thiệu, hoạt động tương tự Collapse Height of Description. |
| Attribute Tooltip | Bật/tắt hiển thị chú thích khi rê chuột vào từng thuộc tính sản phẩm. |
| Atribute Punctuations | Ký tự phân cách giữa các thuộc tính khi hiển thị liền nhau (mặc định dấu -). |
Slider — dùng khi Image Style chọn kiểu trình chiếu
| Trường | Ý nghĩa |
|---|---|
| Item Number | Số ảnh hiển thị cùng lúc trong khung. |
| Loop | Bật để slider quay vòng liên tục, hết ảnh cuối quay lại ảnh đầu. |
| Arrows | Bật/tắt mũi tên chuyển ảnh 2 bên. |
| Dots | Bật/tắt các chấm điều hướng bên dưới. |
| Auto Play | Bật để ảnh tự động chuyển sau một khoảng thời gian. |
| Play Timeout | Thời gian (mili-giây) giữa mỗi lần tự chuyển ảnh — vd. 7000 = 7 giây. |
| Item Number (theo từng Screen) | Số ảnh hiển thị riêng theo từng kích thước màn hình: Widescreen/Desktop/Laptop/Tablet/Mobile. |
| Horizontal/Vertical Spacing (px) | Khoảng cách ngang/dọc giữa các ảnh, cũng cấu hình riêng theo từng Screen. |
Masonry — dùng khi Image Style chọn kiểu lưới xếp so le
| Trường | Ý nghĩa |
|---|---|
| Item Number | Số ảnh hiển thị trên mỗi hàng, cấu hình riêng theo từng Screen. |
| Horizontal Spacing (0–4) | Khoảng cách ngang giữa các ảnh (thang điểm 0–4), theo từng Screen. |
Image — cấu hình kích thước/cắt ảnh
| Trường | Ý nghĩa |
|---|---|
| Image Large Crop | Bật để ảnh cỡ lớn tự động cắt vừa khung đã đặt. |
| Image Large Width / Height | Kích thước (px) của ảnh cỡ lớn. |
| Image Small Crop | Bật để ảnh cỡ nhỏ (thumbnail) tự động cắt vừa khung. |
| Image Small Width / Height | Kích thước (px) của ảnh cỡ nhỏ. |
Advanced
| Trường | Ý nghĩa |
|---|---|
| Description/Specification Tabs | Bật để gộp phần Mô tả và Thông số kỹ thuật thành dạng tab chuyển qua lại, thay vì hiển thị nối tiếp nhau trên cùng 1 trang. |
| Tabs Style | Chọn kiểu hiển thị cho các tab đó (vd. Solid). |
Lưu ý: mục Image Style ở tab Display phải được chọn đúng kiểu (Slider hoặc Masonry) thì các cấu hình tương ứng ở tab Slider/Masonry mới thực sự có tác dụng trên trang.
Chưa tìm thấy điều bạn cần?
Đừng lo, vẫn còn nhiều cách khác để được hỗ trợ.
Email hỗ trợ
Đội ngũ Eraweb sẽ phản hồi trực tiếp yêu cầu của bạn qua email trong 24 giờ.
Gửi yêu cầu hỗ trợ →
Chat trực tiếp
Từ câu hỏi trước khi mua đến xử lý sự cố kỹ thuật, trò chuyện với đội hỗ trợ 24/7.
Chat ngay →