# Thiết kế giao diện website

Đây là công cụ giúp người bán  **tự thiết kế và tùy chỉnh giao diện website bán hàng** của mình một cách dễ dàng, không cần biết lập trình. Bạn có thể kéo thả, chỉnh sửa các phần như banner quảng cáo, danh sách sản phẩm, hình ảnh, bố cục... để tạo ra một website đẹp và phù hợp với thương hiệu của mình.

## **Tạo mới Webpage**

**Bước 1**: Nhấn nút **"+ Tạo page"** ở góc trên bên phải màn hình

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

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

**Bước 2**: Nhập thông tin đầy đủ vào các trường

* **Đường dẫn**: Nhập địa chỉ URL cho trang mới,chỉ dùng chữ thường, số, dấu gạch ngang và không có dấu "/" ở đầu hoặc cuối. VD: gioi-thieu, san-pham-moi
* **Tên hiển thị**: Đặt tên cho trang (hiển thị trên menu)&#x20;
* **Đặt làm trang mặc định**: Tích chọn nếu muốn trang này là trang chủ

**Bước 3**: Nhấn **"Lưu cài đặt"** để hoàn tất (hoặc "Hủy" để không lưu)

## Quản lý Webpage

**Chỉnh sửa thông tin của webpage**

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

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

**Xóa Webpage**

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

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

**Các section bố cục trong Root**: cấu trúc xương sống của trang web, hiển thị tất cả các phần (sections/bố cục) được sắp xếp theo thứ tự từ trên xuống dưới trên trang. Người bán có thể dễ dàng theo dõi tất cả các section của trang và sắp xếp nhanh các khối bố cục của webpage bằng các kéo thả các thành phần vào vị trị tương ứng&#x20;

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

## **Lựa chọn bố cục các cột hiển thị** **:**&#x20;

**Thành phần hiển thị**: Bên trái có danh sách các thành phần như 2 cột, 3 cột, 4 cột, 2 cột lệch, 3 cột lệch, người bán có thể linh hoạt sử dụng phù hợp bằng cách kéo các khối bố cục thiết kế banner quảng cáo, hình ảnh quảng bá thương hiệu,..

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

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

**Thành phần bố cục**: Bao gồm 3 thành phần chính tạo nên cấu trúc của trang web là Thanh điều hướng đầu trang, Banner hình ảnh, Chân trang

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

* **Thanh điều hướng đầu trang**: Phần luôn ở trên cùng ở mọi trang giúp định danh thương hiệu và điều hướng sang các webpage đi kèm với các công cụ hỗ trợ khác. Người bán có thể tùy chỉnh style của header và thiết lập công cụ hỗ trợ, quản lý các webpage muốn hiển thị&#x20;
* **Banner hình ảnh**: Là phần hình ảnh lớ&#x6E;**,** bắt mắt ngay sau Header. Đây là "tấm poster khổng lồ" thu hút sự chú ý đầu tiên của khách hàng. Người bán có thể thiết lập nhiều slide trong cùng 1 banner, tùy chỉnh các nội dung và nút bấm của banner&#x20;
* **Chân trang**: Là phần cuối cùng của trang, hiển thị các thông tin liên quan đến cửa hàng đã được thiết lập ở cài đặt thông tin trang web

**Thành phần sản phẩm**: Là phần **hiển thị danh sách các sản phẩm** trên website của bạn. Đây là nơi khách hàng duyệt, tìm kiếm và chọn sản phẩm để mua. Có 2 cách hiển thị bao gồm: Tất cả sản phẩm và Chọn sản phẩm lẻ&#x20;

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

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

* **Tất cả sản phẩm**: Hệ thống sẽ **tự động lấy và hiển thị** toàn bộ sản phẩm từ kho sản phẩm của bạn với điều kiện sản phẩm phải được bật hiển thị. Người bán có thể tùy chỉnh tiêu đề và số lượng sản phẩm trên 1 dòng (tối đa < 5 sản phẩm trên dòng), thiết lập bộ lọc cố định hoặc bộ lọc dành cho người mua.
* **Chọn sản phẩm lẻ**: Khi chọn **"Chọn sản phẩm lẻ"**, bạn **tự tay chọn từng sản phẩm cụ thể** muốn hiển thị tối đa 20 sản phẩm. Đây là cách kiểm soát **100%** những sản phẩm nào xuất hiện.

**Thành phần khác**: Bao gồm html, hình ảnh, mã giảm giá&#x20;

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

**HTML**: Gồm 2 khu vực nhập code, người bán có thể tự viết html/css, thêm banner hiệu ứng hay text giới thiệ&#x75;**,** Gắn iframe, icon, layout riêng phù hợp cho shop thỏa sức sáng tạo trang trí web bán hàng&#x20;

**Hình ảnh**: Cho phép upload ảnh trực tiếp, ảnh sẽ hiển thị trên website bán hàng phù hợp cho các ảnh lookbook, giới thiệu thương hiệu&#x20;

**Mã giảm giá**: Hiển thị danh sách mã giảm giá đã tạo, khách hàng có thể theo dõi để áp dụng vào đơn hàng làm tăng tỷ lệ sử dụng mã


---

# Agent Instructions: 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:

```
GET https://docs.salework.net/salework-tai-lieu/salework-website/thiet-lap-kenh-website-ban-hang/thiet-ke-giao-dien-website.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.