![Lorem Ipsum](/_next/image?url=https%3A%2F%2Fd24rsy7fvs79n4.cloudfront.net%2Facademy.eraweb.net%2F1000x1000%2F20230426091048_29_1682475048.3112.webp&w=2048&q=75)
![Lorem Ipsum](/_next/image?url=https%3A%2F%2Fd24rsy7fvs79n4.cloudfront.net%2Facademy.eraweb.net%2F1000x1000%2F20230426135513_29_1682492113.6726.webp&w=2048&q=75)
Add-on Product Detail
![Lorem Ipsum](/_next/image?url=https%3A%2F%2Fd24rsy7fvs79n4.cloudfront.net%2Facademy.eraweb.net%2F1000x1000%2F20230426134727_29_1682491647.5894.webp&w=2048&q=75)
![Lorem Ipsum](/_next/image?url=https%3A%2F%2Fd24rsy7fvs79n4.cloudfront.net%2Facademy.eraweb.net%2F1000x1000%2F20230426134509_29_1682491509.3933.webp&w=2048&q=75)
Bước 1: Tìm và Click chọn phần Icon Config của Add on Product Detail trên thanh Layer xuất hiện hộp thoại.
Tab DISPLAY
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002094938_29_1696214978.4668.webp)
Title: Kích hoạt tiêu đề cho sản phẩm
Slide Image: Khởi tạo Slider hình ảnh trong chi tiết sản phẩm. Toàn bộ những ảnh trong Multiple image: của sản phẩm đó.
Category: Cho phép hiển thị Danh mục của sản phẩm đó
Description: Hiển thị mô tả ngắn của sản phẩm
Collapse Height of Description: Thu hẹp chiều cao cho mô tả sản phẩm (tính theo pixel)
Price: Hiển thị giá của sản phẩm
Field: Hiển thị các trường trong custom field của sản phẩm đó. Vd: màu sắc, kích thước, thể tích…
Promotion: Hiển thị nội dung thông tin khuyến mãi
Quantity: Hiển thị số lượng đặt hàng của sản phẩm
Add to Cart: Thêm nút thêm giỏ hàng
Contact Button: Thêm nút liên hệ. Sẽ được tùy chọn đến Form mà bạn đã tạo (mục bên cạnh)
Specification: Hiển thị những thông tin đặc biệt tạo thêm của custom field
Rating Review: hiển thị tính năng đánh giá của khách hàng
Rating Limit: Giới hạn mức độ đánh giá cho sản phẩm
Intro: Hiển thị mục mô tả chi tiết của sản phẩm. (Mục intro trong trang quản trị để nhập thông tin nội dung)
Collapse Height of Intro: Thu hẹp chiều cao cho Intro sản phẩm (tính theo pixel)
Attribute Tooltip: cho hiển thị khi hover chuột sẽ show thông tin chú thích trên những thuộc tính
Attribute Punctuations: Hiển thị dấu ký hiệu nối của thuộc tính đó.
Tab SLIDER
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002095109_29_1696215069.7706.webp)
Item Number: Số lượng hình ảnh sản phẩm muốn hiển thị trên Slider
Loop: Lặp chế độ khi chuyển hình sản phẩm
Arrows: Tạo 2 dấu mũi tên trái phải để di chuyển slider mà muốn xem hình sản phẩm nhanh hơn.
Dots: tạo phân trang trên Slider
Auto Play: Chế độ tự chuyển ảnh sản phẩm trên Slider
Play Timeout: Thời gian tự động chuyển ảnh sản phẩm
Item Number: Số lượng hiển thị trong 1 hàng của slider (điều này khác với Item Number bên trên chỉ cho phép hiển thị những sản phẩm hiển thị khi thiết lập với con số có nghĩa tạo cột và sau đó sẽ chuyển thời gian xem tiếp cho những hình sản phẩm tiếp theo)
Horizontal Spacing: Khoảng cách chiều ngang cho hình sản phẩm. Tính Pixel
Vertical Spacing: Khoảng cách dọc ngang cho hình sản phẩm. Tính Pixel
Tab IMAGE
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002095144_29_1696215104.5579.webp)
![](https://d24rsy7fvs79n4.cloudfront.net/academy.eraweb.io/20231002095046_29_1696215046.8401.webp)
Image Large Crop: Tạo crop ảnh của hình lớn của hình sản phẩm
Image Large Width: Tạo kích thước chiều dài cho ảnh lớn
Image Large Height: Tạo kích thước chiều cao cho ảnh lớn
Image Small Crop: Tạo crop ảnh của hình nhỏ của hình sản phẩm
Image Small Width: Tạo kích thước chiều dài cho ảnh nhỏ
Image Small Height: Tạo kích thước chiều cao cho ảnh nhỏ
Bước 2: khi bạn cấu hình toàn bộ các thẻ trên ta nhấn nút Apply để hoàn thành việc Config cho Product Detail.
Bài học liên quan
Phần này sử dụng addon Custom List để show ra danh sách theo dạng bài viết ngắn giới thiệu về...
Chúng ta sử dụng phần add-on Button tạo những nút chuyển hướng cho trang web. Thường tạo cho các giao...
Phần add-on này sử dụng cho việc show ra danh sách những sản phẩm trong category hoặc những sản phẩm...
Add-on biểu mẫu giúp tạo ra các biểu mẫu từ phức tạp đến đơn giản như: biểu mẫu thông tin...
Chủ đề liên quan