> 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-co-ban/thiet-lap-chung.md).

# Thiết Lập Chung

## 1. Thiết lập chung cho trang

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung`

### 1.1. Favicon

Chọn `Dùng Favicon`, **Tải lên** hoặc **Thay thế** thành hình ảnh Favicon mới

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

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

### 1.2. Hình ảnh chia sẻ trang chủ

Bạn có thể **Thay thế** ảnh mới cho `Hình ảnh chia sẻ trang chủ`

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

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

## 2. Màu sắc

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Màu sắc**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfGrrwq5KqnrV9LpYT3TL9nq-FA9vZpBImvbg0r6TSvSDQKR3EMBKFKkeoaDpT_ZVByvsXOo5EVTWfvnlVHMjHv4HLf75feuHV60lZVfTul1yqaSpVE-AYJ2oYpHCC1dRKjx_5-SHU7wMHNaQ9OMQ?key=XtnK6Nx0NdIN36oMe4Wm9Q" alt="" width="563"><figcaption></figcaption></figure>

Bạn click vào màu sắc cần thiết lập, chọn màu bằng cách chấm chuột vào vị trí màu muốn hiển thị hoặc nhập mã màu HEX vào ô nhập bên dưới.

* **Màu chính:** là màu chủ đạo của trang (bao gồm các nút trên trang chủ, đường viền cho nút và nhiều vị trí khác không có thiết lập màu sắc riêng thì sẽ hiển thị theo màu chủ đạo)

  → Màu thanh trình duyệt trên thiết bị di động cũng được hiển thị theo màu chính
* **Màu chữ:** Chữ hiển thị trên trang sẽ lấy theo màu này (ngoại trừ những chữ có thiết lập riêng)
* **Màu nền trang:** Màu nền tất cả các trang sẽ thiết lập ở đây
* **Màu liên kết khi hover:** tức là khi rê chuột vào link thì chữ sẽ đổi sang màu này
* Màu giá, màu nền % giảm giá, màu chữ % giảm giá
* Màu chữ và nền nút thêm vào giỏ

## 3. Meta Keywords cho trang chủ (SEO)

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Meta Keywords cho trang chủ (SEO)**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcQYQy4a9ZI5mW55KFab_GaULS08ndb21z1f7t1aAwaPi5yjUV8SnFinOafHCXxZIYYQOWUH16HAYOWKdoO1ycVQhJlX6U7Nm1s1QtPLYlqrU6J50QW_lM0WGv6vs9PNI6YCY_7p_tPlx7ulljaGkU?key=XtnK6Nx0NdIN36oMe4Wm9Q" alt=""><figcaption></figcaption></figure>

## 4. Thông tin liên hệ chung

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Thông tin liên hệ chung**

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

## 5. Thiết lập chung cho sản phẩm

### 5.1. Đổi ảnh khi rê chuột vào sản phẩm

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > `Thiết lập chung cho sản phẩm` > Chọn **Đổi ảnh khi rê chuột vào sản phẩm**

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

{% tabs %}
{% tab title="Trước khi rê chuột" %}

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

{% tab title="Khi rê chuột" %}

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

### 5.2. Dùng nút xem nhanh (desktop)

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > `Thiết lập chung cho sản phẩm` > Chọn **Dùng nút xem nhanh (desktop)**

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

Nút **xem nhanh** sẽ hiển thị khi khách rê chuột vào ảnh sản phẩm (ở danh sách sản phẩm)

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

### 5.3. Dùng nút thêm vào giỏ

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > `Thiết lập chung cho sản phẩm` > Chọn **Dùng nút thêm vào giỏ**

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

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

Trường hợp sản phẩm có:

* Một biến thể (phiên bản): hiển thị nút **Thêm vào giỏ** → thêm ngay sản phẩm vào giỏ
* Nhiều biến thể (phiên bản): hiển thị nút **Tùy chọn** → bạn được thiết lập hành động cho nút Tùy chọn này
  * ***Đi đến trang chi tiết sản phẩm*** *→ chọn biến thể sản phẩm → Thêm sản phẩm vào giỏ*
  * ***Thêm nhanh sản phẩm ở Quickview (Popup Xem nhanh)*** *→ Chọn biến thể sản phẩm → Thêm sản phẩm vào giỏ*

## 6. Biến thể màu sắc

Biến thể màu sắc sẽ hiển thị ở danh mục sản phẩm và trang chi tiết sản phẩm như hình dưới đây

{% tabs %}
{% tab title="Danh mục sản phẩm" %}

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

{% tab title="Chi tiết sản phẩm" %}

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

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Biến thể màu sắc**

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

**Có 2 kiểu hiển thị biến thể màu sắc:**

<details>

<summary><strong>Hiển thị ảnh của biến thể</strong></summary>

Ảnh biến thể được nhập trong phần quản lý sản phẩm và tên biến thể màu sắc phải đặt trùng với tên quy định trong thiết lập

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

</details>

<details>

<summary><strong>Hiển thị dạng nút màu</strong></summary>

Nhập tên biến thể và tên màu trùng với tên được quy định trong thiết lập

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

</details>

## 7. Bộ nút icon liên hệ (desktop)

Bộ nút liên hệ được hiển thị neo ở góc dưới bên phải toàn bộ các trang trên desktop

Bao gồm 3 nút: Hotline, Zalo, Facebook Messenger

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

### 7.1. Hiển thị bộ nút

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > `Bộ nút icon liên hệ (desktop)` > **Chọn hiển thị bộ nút**

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

### 7.2. Icon Hotline

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Icon Hotline**

<figure><img src="/files/94nHQ3gzDkHspZdx2Ood" alt=""><figcaption></figcaption></figure>

Bạn có thể thiết lập:

* Bật / tắt hiển thị icon hotline
* Thêm nội dung ghi chú cho nút (ghi chú này sẽ hiển thị khi khách hàng rê chuột vào nút).

{% hint style="success" %}
**Lưu ý:**&#x20;

Số điện thoại sẽ được lấy theo thiết lập ở mục [Thông tin liên hệ chung](#id-4.-thong-tin-lien-he-chung)
{% endhint %}

### 7.3. Icon Zalo

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Icon Zalo**

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

Bạn có thể thiết lập:

* Bật / tắt hiển thị icon Zalo
* Thêm nội dung ghi chú cho nút (ghi chú này sẽ hiển thị khi khách hàng rê chuột vào nút).
* Thêm link chat Zalo theo ID tài khoản Zalo cá nhân hoặc OA ID Doanh nghiệp.

{% hint style="success" %}
**Cách lấy link chat Zalo:**

* Link chat Zalo có cú pháp `https://zalo.me/ID`
* Trong đó:
  * ID đối với tài khoản Zalo cá nhân là **Số điện thoại** sử dụng để đăng ký tài khoản đó hoặc **Username** của tài khoản.
  * ID đối với tài khoản Doanh nghiệp là Official Account ID. [Xem thêm hướng dẫn lấy OA ID](https://oa.zalo.me/home/resources/guides/huong-dan-lay-oa-id_2183147545189302941)
    {% endhint %}

### 7.4. Icon Messenger

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Icon Messenger**

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

Bạn có thể thiết lập:

* Bật / tắt hiển thị icon Messenger
* Thêm nội dung ghi chú cho nút (ghi chú này sẽ hiển thị khi khách hàng rê chuột vào nút).
* Thêm link chat Messenger theo ID tài khoản Fanpage Facebook.

#### **Hướng dẫn nhập link Facebook Messenger**

<details>

<summary><strong>Trường hợp 1:</strong> Với Fanpage hoặc trang cá nhân <strong>đã tạo được @username</strong></summary>

**Cú pháp thiết lập:**

* Cách 1: `https://m.me/[username]`
* Cách 2: `https://www.messenger.com/t/[username]`

**Ví dụ**: fanpage có link <https://www.facebook.com/EGAnyTech> thì username là `EGAnyTech`

\--> Vậy link Facebook messenger là:

* <https://m.me/EGAnyTech>
* hoặc <https://www.messenger.com/t/EGAnyTech>

</details>

<details>

<summary><strong>Trường hợp 2:</strong> Với Fanpage hoặc trang cá nhân <strong>chưa tạo được @username</strong></summary>

**Cú pháp thiết lập:**

* Cách 1: `https://m.me/[ID Fanpage Facebook hoặc cá nhân]`
* Cách 2: `https://www.messenger.com/t/[ID Fanpage Facebook hoặc cá nhân]`&#x20;

**Ví dụ**: fanpage có link [https://www.facebook.com/Báo-giá-thi-công-điện-nước-tphcm-322183071720389](https://www.facebook.com/B%C3%A1o-gi%C3%A1-thi-c%C3%B4ng-%C4%91i%E1%BB%87n-n%C6%B0%E1%BB%9Bc-tphcm-322183071720389) thì ID là `322183071720389`

\--> Vậy link Facebook messenger là

* <https://m.me/322183071720389>
* hoặc <https://www.messenger.com/t/322183071720389>

</details>

## 8. Bộ nút tối ưu chuyển đổi (dưới mobile)

### 8.1. Hiển thị bộ nút

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Bộ nút tối ưu chuyển đổi (dưới mobile)**

Bộ nút sẽ hiển thị ở cuối các trang mặc định như trang chủ, trang danh mục sản phẩm, trang tin tức, trang liên hệ,… Riêng trang chi tiết sản phẩm sẽ hiển thị những nút khác, hỗ trợ việc mua hàng được nhanh chóng hơn.

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

Bạn được thiết lập ẩn / hiện toàn bộ các nút ở trang mặc định và trang sản phẩm

Hoặc thiết lập ẩn / hiện nút mua hàng ở trang sản phẩm

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

### 8.2. Nút điều hướng (dạng liên kết)

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Nút điều hướng 1,2,3**

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

Bạn có thể thiết lập:

* Chọn vị trí hiển thị của nút: từ 1 đến 5
* Nhập tiêu đề cho nút
* Nhập liên kết: khi khách ấn vào nút thì sẽ đến liên kết được nhập
* Tải lên ảnh icon của nút (khuyến nghị ảnh định dạng .png, kích thước 25px x 25px)

### 8.3. Nút gọi điện

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Nút gọi điện**

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

Bạn có thể thiết lập:

* Chọn vị trí hiển thị của nút: từ 1 đến 5 (chỉ áp dụng cho trang mặc định)
* Tải lên ảnh icon của nút (khuyến nghị ảnh định dạng .png, kích thước 25px x 25px)
* Số điện thoại sẽ được lấy theo thiết lập ở mục [**Thông tin liên hệ chung**](#id-4.-thong-tin-lien-he-chung)

### 8.4. Nút nhắn tin

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Nút nhắn tin**

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

Bạn có thể thiết lập:

* Chọn vị trí hiển thị của nút: từ 1 đến 5 (chỉ áp dụng cho trang mặc định)
* Tải lên ảnh icon của nút (khuyến nghị ảnh định dạng .png, kích thước 25px x 25px)
* Nhập link Facebook Messenger.

#### **Hướng dẫn nhập link Facebook Messenger**

<details>

<summary><strong>Trường hợp 1:</strong> Với Fanpage hoặc trang cá nhân <strong>đã tạo được @username</strong></summary>

**Cú pháp thiết lập:**

* Cách 1: `https://m.me/[username]`
* Cách 2: `https://www.messenger.com/t/[username]`

**Ví dụ**: fanpage có link <https://www.facebook.com/EGAnyTech> thì username là `EGAnyTech`

\--> Vậy link Facebook messenger là:

* <https://m.me/EGAnyTech>
* hoặc <https://www.messenger.com/t/EGAnyTech>

</details>

<details>

<summary><strong>Trường hợp 2:</strong> Với Fanpage hoặc trang cá nhân <strong>chưa tạo được @username</strong></summary>

**Cú pháp thiết lập:**

* Cách 1: `https://m.me/[ID Fanpage Facebook hoặc cá nhân]`
* Cách 2: `https://www.messenger.com/t/[ID Fanpage Facebook hoặc cá nhân]`&#x20;

**Ví dụ**: fanpage có link [https://www.facebook.com/Báo-giá-thi-công-điện-nước-tphcm-322183071720389](https://www.facebook.com/B%C3%A1o-gi%C3%A1-thi-c%C3%B4ng-%C4%91i%E1%BB%87n-n%C6%B0%E1%BB%9Bc-tphcm-322183071720389) thì ID là `322183071720389`

\--> Vậy link Facebook messenger là

* <https://m.me/322183071720389>
* hoặc <https://www.messenger.com/t/322183071720389>

</details>

### 8.5. Nút giỏ hàng

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Nút giỏ hàng**

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

Bạn có thể thiết lập:

* Chọn ẩn / hiển nút giỏ hàng (nút này chỉ hiển thị ở trang sản phẩm)
* Tải lên ảnh icon của nút (khuyến nghị ảnh định dạng .png, kích thước 25px x 25px)

## 9. Popup khi vào website

Truy cập `Admin` > `Tùy chỉnh giao diện` > `Thiết lập chung` > **Popup khi vào website**

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

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

Bạn có thể thiết lập các mục sau:

* Chọn ẩn / hiện popup
* Nhập thẻ alt cho ảnh: nội dung được nhập trong Thẻ alt sẽ hiển thị trong trường hợp ảnh không tải được.
* Tải lên ảnh (kích thước chiều rộng gợi ý tối đa 800px)
* Đặt chiều rộng và chiều cao chính xác cho hình ảnh để cải thiện CLS (<https://web.dev/optimize-cls/>)
* Liên kết: nhập đường dẫn khi ấn vào ảnh

*Sau khi thực hiện theo hướng dẫn trên, bạn đã có thể **Thiết lập chung** 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)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://egany-docs.gitbook.io/ega-kitchen-haravan/thiet-lap-co-ban/thiet-lap-chung.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.