> For the complete documentation index, see [llms.txt](https://egany-docs.gitbook.io/ega-kitchen-haravan/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://egany-docs.gitbook.io/ega-kitchen-haravan/thiet-lap-cac-trang/trang-san-pham.md).

# Trang Sản Phẩm

## 1. Layout trang sản phẩm <a href="#id-1.-layout-trang-san-pham" id="id-1.-layout-trang-san-pham"></a>

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm`  > **Layout trang sản phẩm**

Các tính năng trên trang sản phẩm đa số đều có thể thiết lập ẩn/hiện bằng cách ấn chọn hoặc bỏ chọn vào ô checkbox.

<figure><img src="/files/lXbAkztVsJc1JQk1pHqk" alt="" width="375"><figcaption></figcaption></figure>

## 2. Video trong ảnh sản phẩm <a href="#id-2.-video-trong-anh-san-pham" id="id-2.-video-trong-anh-san-pham"></a>

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm`> **Video trong ảnh sản phẩm**

<figure><img src="/files/v78ui6u7KLnlgI295n6h" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="/files/iBoyW2FiV8sLdvQBEZnX" alt=""><figcaption></figcaption></figure>

Tiếp tục thực hiện theo các bước sau:

### 2.1. Video lấy từ Youtube <a href="#id-2.1.-video-lay-tu-youtube" id="id-2.1.-video-lay-tu-youtube"></a>

* **Bước 1:** Vào trang admin, chọn sản phẩm muốn hiển thị video<br>

  <figure><img src="/files/ytcLe7PiSDtlhfmxby5q" alt=""><figcaption></figcaption></figure>
* **Bước 2:** Đến mục Hình ảnh sản phẩm, ấn **thêm từ URL**<br>

  <figure><img src="/files/LrRPxpVvmoznHx7C0thL" alt=""><figcaption></figcaption></figure>
* **Bước 3:** Nhập link video Youtube và Lưu lại<br>

  <figure><img src="/files/bSYuh3bFAIojiyEQaBZ1" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Video sẽ được hiển thị đầu tiên trong danh sách ảnh sản phẩm
{% endhint %}

### 2.2. Video lấy từ Dropbox <a href="#id-2.2.-video-lay-tu-dropbox" id="id-2.2.-video-lay-tu-dropbox"></a>

* **Bước 1:** Upload video lên Dropbox và lấy link video (Nếu bạn chưa có tài khoản Dropbox thì có thể đăng ký ở link <https://www.dropbox.com/> )<br>

  <figure><img src="/files/ezTPoOwuuqHiaZNL1XXR" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Lưu ý:** video phải được chia sẻ ở chế độ công khai (Bất cứ ai cũng có thể xem)
{% endhint %}

* **Bước 2:** Xử lý lại link video

Link video đã copy: <https://www.dropbox.com/scl/fi/wlwz5ez6yo3nu3vc45a4x/Christmas8_2.mp4?rlkey=53g7nlbnnp35hatca2bbpyg0r&st=xftxc3g9&dl=0>

{% hint style="info" %}
Thay đoạn `dl=0` thành `raw=1`
{% endhint %}

—> Link video sau khi xử lý: <https://www.dropbox.com/scl/fi/wlwz5ez6yo3nu3vc45a4x/Christmas8_2.mp4?rlkey=53g7nlbnnp35hatca2bbpyg0r&st=xftxc3g9&raw=1>

* **Bước 3:** Chèn link video đã xử lý vào mẫu iframe sau:

```
<iframe src="link-video-da-xu-ly" height="480px" width="640px" allowfullscreen=""></iframe>
```

Ví dụ Iframe đầy đủ sau khi chèn link video sẽ có dạng như sau:

```
<iframe src="https://www.dropbox.com/scl/fi/wlwz5ez6yo3nu3vc45a4x/Christmas8_2.mp4?rlkey=53g7nlbnnp35hatca2bbpyg0r&st=xftxc3g9&raw=1" height="480px" width="640px" allowfullscreen=""></iframe>
```

* Bước 4: Chèn iframe vào sản phẩm (Ấn chèn video, dán iframe vào)<br>

  <figure><img src="/files/fo5fM5NYXRHGJd9md6GS" alt=""><figcaption></figcaption></figure>

  <figure><img src="/files/hg1fMUJSGkSjRU7lFJhM" alt=""><figcaption></figcaption></figure>

Video chèn vào sẽ hiển thị ở nội dung mô tả của sản phẩm, đồng thời video cũng sẽ hiển thị trên slide ảnh sản phẩm (như hình sau)

<figure><img src="/files/eQncqQnSXApjFGE142bT" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Lưu ý:**

* Hiện tại chỉ hỗ trợ hiển thị 1 video của dropbox trên sản phẩm
* Video sẽ hiển thị đồng thời ở list ảnh sản phẩm và ở nội dung mô tả sản phẩm
* Video sẽ tự động phát khi vừa load trang
  {% endhint %}

## 3. Chia sẻ sản phẩm qua <a href="#id-3.-chia-se-san-pham-qua" id="id-3.-chia-se-san-pham-qua"></a>

Giao diện hỗ trợ chia sẻ trang sản phẩm qua các kênh:

* Facebook
* Messenger (chỉ hoạt động trên điện thoại)
* Pinterest
* Twitter

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Chia sẻ sản phẩm qua**

<figure><img src="/files/1j7rgveWtPBf6JrZEOKI" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="/files/6aRhi44f0xhbIEW3R6Ge" alt=""><figcaption></figcaption></figure>

## 4. Khuyến mãi - ưu đãi

### 4.1. Hiển thị chung cho tất cả sản phẩm

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Khuyến mãi - Ưu đãi**

<figure><img src="/files/shAbmimswYv0j94VBRkN" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/nmaMPYSH2De2jwQJNRKh" alt=""><figcaption></figcaption></figure>

### 4.2. Hiển thị riêng cho từng sản phẩm

* **Bước 1:** Truy cập vào nội dung mô tả sản phẩm trong Admin

<figure><img src="/files/9OlGnsPjuMNHEfTrRd4D" alt=""><figcaption></figcaption></figure>

* **Bước 2:** Nhập liệu nội dung cho mục Khuyến mãi - Ưu đãi

<figure><img src="/files/5VfgS3w5bVpsGmM78XCf" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
***Lưu ý:***

* *Tiêu để phải trùng với tiêu đề được nhập liệu trong thiết lập giao diện*
* *Tiêu đề được định dạng thẻ heading 6*
* *Mỗi dòng là 1 nội dung khuyến mãi*
  {% endhint %}

## 5. Thiết lập Flash Sale

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Thiết lập Flash Sale**

<figure><img src="/files/iSSEFFe0edDRX77Sevuz" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/pGe3tN7bPC4l9M5Fpvdr" alt=""><figcaption></figcaption></figure>

## 6. Trạng thái tồn kho

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Trạng thái tồn kho**

{% hint style="warning" %}
Trạng thái tồn kho chỉ hiển thị với sản phẩm có bật quản lý tồn kho
{% endhint %}

<figure><img src="/files/WGE9OqnbuJvl1StKiuCp" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/W8Cs30F689n82zJZ3XNp" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Nếu setting có chọn “Hiển thị số lượng hàng tồn kho”. Thì trạng thái sẽ hiển thị ra số lượng tồn kho của sản phẩm (xem hình dưới)
{% endhint %}

<figure><img src="/files/a4jBv5XCTRZctyzmJ2td" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/jBSNw1adiOFEcYvqu1SL" alt=""><figcaption></figcaption></figure>

## 7. Thông số kỹ thuật

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Thông số kỹ thuật**

<figure><img src="/files/XYASjp3Q4Wv2xPvG0lR4" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/se1Gwz35AFk9XPEJH4Hv" alt=""><figcaption></figcaption></figure>

**Nhập liệu nội dung bảng thông số kỹ thuật**

{% stepper %}
{% step %}
Truy cập vào sản phẩm cần nhập liệu thông số kỹ thuật, đến cuối phần nội dung mô tả

<figure><img src="/files/eZIpln5HhiTB2xe2ZtLL" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Nhập liệu Tiêu đề và nội dung bảng thông số kỹ thuật

<figure><img src="/files/YbyKmGCeZObyk9VKB8HU" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
**Lưu ý:**

* Tiêu đề "Thông số kỹ thuật" ở mô tả và trong thiết lập ***phải trùng nhau***
* Tiêu đề được định dạng thẻ "***Heading 6***"
* Nội dung bảng phải ***nhập liệu tay*** hoặc cần phải xử lý lại các định dạng trước khi dán vào nội dung mô tả của sản phẩm
  {% endhint %}

## 8. Nút mua ngay

Hỗ trợ thiết lập nội dung nút mua ngay

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Nút mua ngay**

<figure><img src="/files/tgR2uaQKRxBuqLjXaQgJ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/aLZdctcdsdj4roVswtqg" alt=""><figcaption></figcaption></figure>

## 9. Nút thêm vào giỏ

Hỗ trợ thiết lập nội dung nút thêm vào giỏ

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Nút thêm vào giỏ**

<figure><img src="/files/y457dFxo3KdpxUlrPx2v" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/lw0qMhK43QXNC5BnjvbN" alt=""><figcaption></figcaption></figure>

## 10. Chính sách bán hàng

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Chính sách bán hàng**

<figure><img src="/files/REQBFq0yhBuQdFXp7pwp" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/5G70J0lCz5oWxZz7oVfI" alt=""><figcaption></figcaption></figure>

## 12. Mô tả sản phẩm

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Mô tả sản phẩm**

<figure><img src="/files/BhxXLS1yrzfSVAbino0B" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/6caRdSorQJfJeLYgMbfQ" alt=""><figcaption></figcaption></figure>

## 13. Đánh giá sản phẩm

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Layout trang sản phẩm >** Tích chọn mục ***Hiển thị các đánh giá của sản phẩm***

<figure><img src="/files/P1BqdvWqP7vDFHDoaNjw" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Lưu ý**

* App đánh giá sản phẩm là ứng dụng có phí được tích hợp sẵn UI (phần hiển thị) trên giao diện.
* Để sử dụng được tính năng đánh giá người dùng cần mua ứng dụng **Đánh giá sản phẩm** trên kho ứng dụng của Haravan
* Cài đặt nhiều ứng dụng có thể gây ảnh hưởng tới điểm *Google Pagespeed* của theme
  {% endhint %}

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Đánh giá sản phẩm >** Thay đổi tiêu đề mục đánh giá sản phẩm

<figure><img src="/files/WitQ316erbYSr1uFTpvo" alt=""><figcaption></figcaption></figure>

## 14. Sản phẩm liên quan

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Sản phẩm liên quan**

<figure><img src="/files/XueBoOb30LPashNC2rxK" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/El9pjG3n0XMzHyplsFzd" alt=""><figcaption></figcaption></figure>

Giao diện hỗ trợ hiển thị sản phẩm liên quan theo 3 cách sau:

{% tabs %}
{% tab title="Theo Collection" %}
Hiển thị những sản phẩm có cùng Collection với sản phẩm đang xem

<figure><img src="/files/aibscjSh9kGJy3x6bBMJ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Theo Tag" %}
Hiển thị những sản phẩm được nhập tag (nhãn) giống nhau và có chung 1 tiền tố được quy định trong thiết lập

<figure><img src="/files/UZq3yLvap6NbKKrl4h6U" alt=""><figcaption></figcaption></figure>

Nhập tag liên quan cho sản phẩm (như ví dụ ở hình sau)

<figure><img src="/files/23ASpiv3pEy7wGI4ZdJU" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Theo Tag và Collection " %}
Nếu sản phẩm có nhập tag sản phẩm liên quan thì hiển thị theo tag. Nếu không có tag liên quan thì hiển thị theo collection

<figure><img src="/files/54pvqXbNKLFp9SlgzgJX" alt=""><figcaption></figcaption></figure>

Nhập tag liên quan cho sản phẩm (như ví dụ ở hình sau)

<figure><img src="/files/23ASpiv3pEy7wGI4ZdJU" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## 15. Sản phẩm cùng phân khúc giá

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Trang sản phẩm` > **Sản phẩm cùng phân khúc giá**

<figure><img src="/files/sT4llAbWg0i32nFQ18Jp" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/1dfptWpxL6l8ukAXMjpX" alt=""><figcaption></figcaption></figure>

*Sau khi thực hiện theo hướng dẫn trên, bạn đã có thể thiết lập **Trang sản phẩm** cho giao diện trên Haravan. Trong quá trình thiết lập, nếu có thắc mắc vui lòng liên hệ* [*support@egany.com*](mailto:support@egany.com)*.*