> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appminis.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Detail

> Cấu hình bố cục, hiển thị thông tin, và các thành phần trên trang Chi tiết Sản phẩm.

### **3.3.6. Product Detail**

**Bố cục**\
Người dùng có thể lựa chọn các bố cục hiển thị sản phẩm, bao gồm: Đơn giản, Tinh tế, Ảnh dọc

<Frame caption="Bố cục sản phẩm">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image314_6aaba45481.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Tiêu đề**

**Nền**

* Chọn màu nền cho thẻ sản phẩm bằng cách nhấn ô vuông sau đó chọn màu.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image315_815b6623ba.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có màu nền và không có màu nền bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />.
* Xóa màu nền bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />.

**Hiển thị tiêu đề**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có tiêu đề và không có tiêu đề.
* Người dùng có thể nhập tiêu đề cho phần sản phẩm. Ví dụ, nếu tiêu đề là **"Chi tiết sản phẩm"** thì phần sản phẩm sẽ như thế này:

<Frame caption="Tiêu đề sản phẩm">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image150_81cf5cd493.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Kích thước / Màu sắc**

* Người dùng có thể điều chỉnh kích thước và màu sắc cho tiêu đề của phần sản phẩm tại.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image316_8a8d8333c2.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Hình ảnh**

**Chiều cao**

* Người dùng có thể chọn hoặc tăng/giảm chiều cao của banner tại.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image326_a106f83177.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Kiểu căn chỉnh ảnh**\
Người dùng có thể chọn kiểu căn chỉnh hình ảnh sản phẩm tại …

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image318_3a1c25f185.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Tổng quan**

**Hiển thị tên sản phẩm**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt tên sản phẩm.

**Hiển thị nhãn**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt nhãn.

**Hiển thị tên danh mục**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt tên danh mục.

**Hiển thị tên thương hiệu**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt tên thương hiệu.

**Hiển thị tên cửa hàng**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt tên cửa hàng.

**Hiển thị số sao đánh giá**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt số sao đánh giá.

**Hiển thị số lượng đã bán**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt số lượng đã bán.

**Hiển thị số lượng yêu thích**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt số lượng yêu thích.

**Sản phẩm sale**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt trạng thái sale.

**Hiển thị yêu thích**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt nút yêu thích.

**Hiển thị chia sẻ link**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt chia sẻ link.
  * **Hiển thị sao chép link:** Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt sao chép link.

**Hiển thị giá tiền**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt hiển thị giá tiền.

**Hiển thị giá giảm**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt hiển thị giá giảm.

**Tiếp thị liên kết**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt tiếp thị liên kết.

**Hiển thị mô tả**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt mô tả.

**Hiển thị đánh giá**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt đánh giá.

**Hiển thị sản phẩm liên quan**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt sản phẩm liên quan.

**Chăm sóc khách hàng**

**Hiển thị chăm sóc khách hàng**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt chăm sóc khách hàng.

**Thêm**

* **Bước 1:** Người dùng nhấn vào nút **"Thêm mục mới"**.

<Frame caption="Nút thêm mục mới">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image196_522cbb778a.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* **Bước 2:**
  * Người dùng nhập tiêu đề.
  * Người dùng nhấn **"Tải ảnh lên hoặc chọn ảnh từ thư viện"**.

<Frame caption="Thêm dữ liệu">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image159_31809b0c55.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* **Bước 3:** Người dùng nhấn **"Thêm dữ liệu"** để thêm ảnh hoặc nhấn **"Hủy bỏ"** để hủy.

**Chỉnh sửa**

* **Bước 1:** Người dùng nhấn nút <Icon icon="pencil" color="#cfcfcf" size={15} /> để đến trang chỉnh sửa.

<Frame caption="Nút chỉnh sửa">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image206_f40c0ece5e.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* **Bước 2:** Người dùng nhập tiêu đề, nhấn **"Tải ảnh lên hoặc chọn ảnh từ thư viện"**.

<Frame caption="Trang chỉnh sửa dữ liệu">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image144_2c88062158.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* **Bước 3:** Người dùng nhấn **"Lưu chỉnh sửa"** để lưu hoặc **"Hủy bỏ"** để hủy.

**Xóa**

* **Bước 1:** Người dùng nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} /> để xóa dữ liệu.

<Frame caption="Nút xóa">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image62_06152ef1b3.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* **Bước 2:** Ở hộp thông báo, người dùng nhấn **"Xóa ngay"** để xóa hoặc **"Hủy"** để hủy.

**Thanh tác vụ**

**Trạng thái**\
Người dùng có thể nhấn để chuyển đổi giữa chế độ **Cố định** và **Cuộn ẩn**.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image319_42c4586128.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Hiển thị giỏ hàng**\
Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt giỏ hàng.

**Hiển thị tư vấn**\
Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt tư vấn.

**Hiển thị yêu thích**\
Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt hiển thị yêu thích.

**Thẻ sản phẩm liên quan**

**Lề ngoài**

* Người dùng điều chỉnh **chung** khoảng cách trên/dưới giữa các thẻ sản phẩm với phần danh sách bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image320_fb482e6fa9.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Người dùng điều chỉnh khoảng cách **trái/phải** giữa các thẻ sản phẩm với phần danh sách bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image321_fca37db2a9.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Người dùng điều chỉnh riêng lề trái và lề phải, khoảng cách **trái/phải** giữa các thẻ sản phẩm với phần danh sách bằng nút.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image322_d178b5622c.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Lề trong**

* Điều chỉnh chung khoảng cách trên/dưới giữa các thẻ sản phẩm với thành phần bên trong bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image323_8c8a284391.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Điều chỉnh khoảng cách trái/phải giữa các thẻ sản phẩm với thành phần bên trong bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image324_6b915d1a11.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Người dùng điều chỉnh riêng lề trên và lề dưới, lề trái và lề phải bằng nút.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image325_dbbf7f9011.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Kích thước**

* Điều chỉnh kích thước tiêu đề thẻ sản phẩm tại.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image326_a106f83177.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Kiểu hình ảnh**

* Chọn kiểu hình ảnh các thẻ sản phẩm tại.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image327_32ed0ef634.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Nền**

* Chọn màu nền cho thẻ sản phẩm bằng cách nhấn ô vuông sau đó chọn màu.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image337_4a6da3b6ed.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có màu nền và không có màu nền bằng nút <Icon icon="eye" color="#cfcfcf" size={15} />.
* Xóa màu nền bằng nút <Icon icon="minus" color="#cfcfcf" size={15} />.

**Bo góc**

* Nhập hoặc tăng/giảm **chung** độ bo góc của 4 góc tại ô

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image328_5a388f1c31.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

hoặc điều chỉnh **riêng lẻ** từng góc bằng nút.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image329_d77861c2bd.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Viền**

* Nhập hoặc tăng/giảm độ lớn viền tại ô.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image330_ac7ca1dcda.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Chọn màu viền bằng cách nhấn ô vuông sau đó chọn màu.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image331_aca848658c.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Bật/tắt viền bằng nút <Icon icon="eye" color="#cfcfcf" size={15} />.
* Xóa viền bằng nút <Icon icon="minus" color="#cfcfcf" size={15} />.

**Đổ bóng**

* Chọn độ lớn đổ bóng tại ô.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image332_9481c35783.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Chọn màu đổ bóng bằng cách nhấn ô vuông sau đó chọn màu.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image333_80c01d2637.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* Bật/tắt đổ bóng bằng nút <Icon icon="eye" color="#cfcfcf" size={15} />.
* Xóa đổ bóng bằng nút <Icon icon="minus" color="#cfcfcf" size={15} />.

**Hiển thị tên sản phẩm**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt tên sản phẩm.

**Hiển thị danh mục**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt danh mục.

**Hiển thị giá tiền**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt giá tiền.

**Hiển thị giá giảm**

* Chọn hiển thị giá giảm theo **%** hay **giá gốc** tại.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image334_6a51b4f941.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Sản phẩm sale**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt trạng thái sale.

**Hiển thị nhãn**

* Chọn **không hiển thị** hoặc hiển thị nhãn **Flash sale / Bán chạy / Mới nhất**.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image335_b97cc68e66.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Hiển thị yêu thích**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt nút yêu thích.

**Hiển thị đánh giá**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt số sao đánh giá.

**Hiển thị số lượng yêu thích**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt số lượng yêu thích.

**Hiển thị số lượng đã bán**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt số lượng đã bán.

**Hiển thị nút giỏ hàng**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt nút thêm vào giỏ hàng.

**Kiểu nút giỏ hàng**\
Người dùng có thể chọn hiển thị giỏ hàng giữa **icon** hoặc **button** tại.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image336_d63228832c.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>
