Giao diện đăng nhập: Hệ thống sử dụng phương thức xác thực tập trung. Người dùng truy cập hệ thống qua URL quản trị được cấp riêng.

Các trường thông tin bắt buộc:

• Tên người dùng hoặc địa chỉ email: Nhập chính xác tài khoản định danh được cấp (Ví dụ: dudo).
• Mật khẩu: Nhập chuỗi ký tự bảo mật. Người dùng có thể nhấn vào biểu tượng hình con mắt ở góc phải trường nhập liệu để hiển thị/ẩn mật khẩu nhằm kiểm tra tính chính xác.

Ảnh 1: Màn hình đăng nhập hệ thống

Tính năng bổ sung:

• Ghi nhớ đăng nhập: Tích chọn để lưu phiên làm việc, giảm tần suất phải đăng nhập lại trên cùng một thiết bị an toàn.
• Quên mật khẩu / Đăng ký: Các liên kết hỗ trợ khôi phục quyền truy cập tự động qua Email hệ thống khi xảy ra sự cố mất thông tin tài khoản.
• Đổi mật khẩu: Truy cập website, tìm mục đăng ký/đăng nhập tài khoản (thường nằm trên thanh menu), nhấn đăng nhập. Sau khi đăng nhập tài khoản thành công, màn hình quản trị tài khoản sẽ hiện như ảnh dưới. Click mục "Đổi mật khẩu" trong thanh menu bên trái và tiến hành đặt mật khẩu mới.
  Lưu ý: Mật khẩu nên bao gồm:
  • Ít nhất 8 ký tự
  • 1 chữ cái viết thường
  • 1 chữ cái viết hoa
  • 1 số hoặc ký tự đặc biệt.
  

  Hướng dẫn đổi mật khẩu

Trải nghiệm người dùng trên thiết bị di động phụ thuộc lớn vào sự tinh gọn và khả năng tương tác nhanh qua các điểm chạm định vị. Hệ thống phân tách bộ công cụ điều hướng di động thành 2 phân hệ chuyên biệt: Mobile Header Menu (thanh trượt ngang đỉnh trang) và Mobile Footer Menu (thanh dock neo cố định đáy màn hình).

2.1. Menu PC

Bước 1: Đăng nhập tài khoản quản trị (admin)/tài khoản được phân quyền chỉnh sửa menu & truy cập website.

Bước 2: Tại thanh công cụ trên cùng của website, nhấp vào danh sách thả xuống để chọn bộ Menu cần chỉnh sửa kỹ thuật (Ví dụ: Header Menu - Thanh công cụ chính đỉnh trang, hoặc Footer Menu - Hệ thống liên kết chân trang). Bấm Chọn (Select) để tải dữ liệu cấu trúc menu.

Chọn bộ Menu cần chỉnh sửa

Bước 3: Tại cột Thêm liên kết (Add menu items) bên trái, điều hướng qua các tab Trang, Bài viết hoặc Liên kết tự chọn (Custom Links). Tích chọn các trang tĩnh vừa khởi tạo hoặc điền link tùy biến → Bấm nút Thêm vào menu (Add to Menu).

Thêm liên kết từ cột bên trái

Thêm Liên kết tự chọn (Custom Links)

Bước 4: Sắp xếp đa tầng (Drag & Drop Hierarchy)
Tại khung cấu trúc menu bên phải, tiến hành kéo thả các khối mục menu dọc theo trục đứng để thay đổi thứ tự hiển thị từ trái qua phải (hoặc từ trên xuống dưới ngoài giao diện).
Để thiết lập cấu trúc phân cấp (Dropdown Menu/Menu con), thực hiện kéo khối mục con lệch sang bên phải một khoảng so với mục cha. Sau khi hoàn tất ma trận điều hướng, bấm nút Lưu menu (Save Menu) để hệ thống đồng bộ hóa dữ liệu lên giao diện hiển thị công cộng.

Sắp xếp cấu trúc phân cấp cho Menu

2.2. Menu mobile

Trải nghiệm người dùng trên thiết bị di động phụ thuộc lớn vào sự tinh gọn và khả năng tương tác nhanh qua các điểm chạm định vị. Hệ thống phân tách bộ công cụ điều hướng di động thành 2 phân hệ chuyên biệt: Mobile Header Menu (thanh trượt ngang đỉnh trang) và Mobile Footer Menu (thanh dock neo cố định đáy màn hình).

2.2.1. Cấu hình Mobile Header Menu (Carousel Navigation)

Bước 1: Tiếp cận ứng dụng qua tìm kiếm thông minh
Tại màn hình Cổng Quản Trị, sử dụng tổ hợp phím Cmd+K (macOS) hoặc Ctrl+K (Windows) để mở thanh tìm kiếm.
Nhập từ khóa menu. Hệ thống sẽ lọc động và hiển thị các module liên quan.
Tại khối TẠO GIAO DIỆN, nhấp vào module Menu mobile header (Quản lý 2 chức năng nâng cao).

Truy cập module Menu mobile header qua thanh tìm kiếm thông minh

Bước 2: Khởi tạo Menu Mobile mới
Một cửa sổ lối tắt (Modal) sẽ xuất hiện. Để tạo mới bộ điều hướng di động, nhấp chọn Thêm mới menu.

Nhấp chọn Thêm mới menu

Bước 3: Cấu hình nội dung và thuộc tính hiển thị

• Nhập tên Carousel: Đặt tên định danh cho bộ Menu (Ví dụ: Menu trang chủ Mobile Header).
• Cài đặt các mục Slide: Đây là danh sách các biểu tượng điều hướng sẽ hiển thị theo hàng ngang trên điện thoại. Với mỗi mục (Slide), quản trị viên cần thiết lập:
  • Văn bản hiển thị: Tên chức năng (Ví dụ: Lọc sản phẩm).
  • Tiêu đề Popup Lọc: Nhãn tiêu đề khi khách hàng nhấp vào mục này.
  • Icon (Hình ảnh): Tải lên biểu tượng đại diện (Dạng tệp .svg hoặc .png không nền) để tăng tính trực quan.
  • Liên kết chuyển trang trực tiếp: Nếu muốn khách hàng chuyển sang một URL khác thay vì mở bộ lọc, hãy điền đường dẫn mục tiêu vào ô này.

Cấu hình nội dung và thuộc tính hiển thị Slide

Bước 4: Thiết lập cấu trúc Popup Lọc (Filter Structure)
Nếu mục Menu của bạn đóng vai trò là một bộ lọc nhanh, hãy nhấp vào Cấu trúc Popup Lọc:

• Tiêu đề Khối Lọc: Nhãn của nhóm điều kiện lọc (Ví dụ: Theo mức giá).
• Các mục tùy chọn (Items): Nhấp Thêm mục để tạo các lựa chọn chi tiết bên trong. Điền Nhãn (Text) hiển thị và URL/Định danh (Đích) để hệ thống thực hiện lệnh lọc dữ liệu tương ứng.

Bấm Tạo mới để lưu cấu trúc và kích hoạt hiển thị trên giao diện di động.

Thiết lập cấu trúc Popup Lọc và lưu cài đặt

2.2.2. Cấu hình Mobile Footer Menu (Sticky Bottom Dock Navigation)

Phân hệ Menu Footer Mobile hoạt động như một thanh Dock nổi bo góc neo cố định dưới đáy màn hình điện thoại (Sticky Navigation). Công cụ này giúp lưu giữ các hành động quan trọng nhất (Core Actions) xuyên suốt hành trình cuộn trang của khách hàng, tối ưu hóa tỷ lệ chuyển đổi trực tiếp trên Mobile.

Bước 1: Truy cập cấu hình cấu trúc dữ liệu
Từ thanh tìm kiếm hệ thống (Cmd+K), nhập từ khóa Menu mobile và lựa chọn phân hệ Menu mobile.

Truy cập phân hệ Menu mobile

Giao diện quản lý danh sách cấu trúc

Bước 2: Xây dựng danh sách mục chức năng đáy (Footer Items Setup)
Giao diện quản lý danh sách sẽ hiển thị bảng cấu trúc bao gồm các trường: Tên cột, Loại menu, Slug, và các nút hành động Sửa/Xóa. Nhấp chọn biểu tượng cấu hình tại Menu Footer để vào màn hình thiết lập chi tiết.

Màn hình cấu hình cho phép người vận hành xây dựng ma trận gồm tối đa 5 nút chức năng chính trên thanh dock đáy (Khuyên dùng từ 4 đến 5 nút để đảm bảo mật độ hiển thị phông chữ rõ ràng nhất).
Tại mỗi khối mục, tiến hành khai báo các trường thông tin kỹ thuật:

• Tên hiển thị: Nhập nhãn văn bản hiển thị trực diện dưới biểu tượng (Ví dụ: Trang chủ, Danh mục, Giỏ hàng, Ưu đãi, Tài khoản).
• Liên kết (URL): Điền đường dẫn nội bộ của Website hoặc đường dẫn tuyệt đối (Ví dụ: /gio-hang/, /account/).
• Icon hiển thị (Mã hóa SVG / Class): Nhập chuỗi mã Class biểu tượng từ thư viện font hệ thống hoặc dán mã mã hóa trực tiếp nhằm đảm bảo Icon hiển thị đồng bộ dạng phẳng nhẹ, sắc nét trên mọi mật độ điểm ảnh thiết bị di động.

Khai báo thông tin các nút hiển thị đáy

Bước 3: Thiết lập kịch bản hiển thị nâng cao (Conditional Visibility)
Hệ thống cung cấp tính năng Ẩn/Hiện theo điều kiện cho từng nút riêng biệt. Cho phép tùy biến giao diện linh hoạt dựa trên trạng thái của người dùng (Ví dụ: Thiết lập chỉ hiển thị nút Hồ sơ hoặc Ưu đãi thành viên khi hệ thống ghi nhận trạng thái tài khoản đã đăng nhập).

Tùy chọn ẩn/hiện mục menu dựa theo điều kiện

Bước 4: Kiểm tra Sơ đồ luồng hoạt động (User Flow Verification)
Trước khi lưu thay đổi, người vận hành đối chiếu cấu trúc theo sơ đồ luồng:

Màn hình Mobile hiển thị ➔ Sticky Dock cố định đáy ➔ User chạm nút ➔ Mở nhanh Popup / Điều hướng URL

Bấm nút Cập nhật để hệ thống xóa bộ đệm cũ và đồng bộ cấu trúc Menu mới bên ngoài giao diện di động thời gian thực.

Hệ thống phân phối và quản lý dữ liệu bài viết dựa trên hai trục định danh phân loại cốt lõi để tối ưu thuật toán tìm kiếm:

• Phân loại Danh mục (Categories): Thiết lập cấu trúc dữ liệu cho các bài viết có cùng chủ đề lớn mang tính phân cấp (cha - con) và định hướng điều hướng trực quan. Hệ thống bắt buộc mọi bài viết xuất bản phải thuộc tối thiểu một danh mục. Nếu người vận hành không chỉ định, hệ thống sẽ tự động gán vào danh mục mặc định.
  → Thao tác: Điều hướng đến mục Bài viết (Posts) → Chuyên mục (Categories). Nhập Tên chuyên mục (Name), chuỗi Đường dẫn tĩnh (Slug) viết thường không dấu và chọn Chuyên mục cha (nếu có), sau đó bấm nút khởi tạo.
  

  Ảnh minh họa: Phân loại Danh mục (Categories) - Bước 1
  

  Ảnh minh họa: Phân loại Danh mục (Categories) - Bước 2
• Phân loại Thẻ (Tags): Sử dụng làm nhãn phẳng cấu trúc (không phân cấp cha - con) để liên kết nhanh các từ khóa, thực thể cụ thể xuất hiện xuyên suốt trong nhiều bài viết thuộc các danh mục khác nhau, hỗ trợ Google gom cụm chủ đề liên quan.
  → Thao tác: Người vận hành nhập trực tiếp các từ khóa ngắn gọn ngăn cách bằng dấu phẩy tại hộp công cụ Thẻ (Tags) nằm ở cột quản trị bên phải trong không gian soạn thảo.
  

  Ảnh minh họa: Phân loại Thẻ (Tags) - Bước 1
  

  Ảnh minh họa: Phân loại Thẻ (Tags) - Bước 2
  

  Ảnh minh họa: Phân loại Thẻ (Tags) - Bước 3

Nhằm duy trì chỉ số Core Web Vitals tối ưu và ngăn chặn tình trạng dung lượng hình ảnh lớn làm suy giảm tốc độ tải trang (Page Speed), nhân sự vận hành nội dung phải thực thi nghiêm ngặt quy trình kỹ thuật sau:

Đây là loại banner được hiển thị thông qua Shortcode.

1.1. Truy cập quản lý
Vào menu GIAO DIỆN > Chọn ứng dụng Slide carousel.

Tại màn hình Tất cả Slide, bạn sẽ thấy danh sách các bộ Carousel đã tạo kèm theo Shortcode (Ví dụ: ).
Nhấn biểu tượng Cây bút (Sửa) để thay đổi nội dung hoặc Thêm Slide mới.

1.2. Xây dựng nội dung Slide
Tại tab Xây dựng Nội dung, bạn quản lý từng mục trong slide:

• Thêm mục mới: Tạo thêm một thẻ banner trong carousel.
• Ảnh: Tải lên hình ảnh đại diện cho banner.
• Tiêu đề & Nội dung: Nhập văn bản hiển thị trên banner.
• Nút (Chữ hiển thị) & URL Nút: Nhập tên nút (VD: Shop Now) và dán link liên kết khi khách nhấn vào.
• Màu nền: Chọn mã màu nền cho phần nội dung slide.
  

1.3. Cấu hình hiển thị (Style)
Chuyển sang tab Cấu hình Hiển thị để điều chỉnh kỹ thuật:

• Kiểu hiển thị: Có 2 lựa chọn:
  - Mặc định (Ảnh trên, Chữ dưới).
  - Ảnh làm nền (Chữ đè lên ảnh).
• Số slide hiển thị (Responsive): Thiết lập số lượng slide xuất hiện cùng lúc trên từng thiết bị:
  - MÁY TÍNH (PC): Ví dụ 3,3 slide.
  - TABLET: Ví dụ 2,2 slide.
  - MOBILE: Ví dụ 1,2 slide.
  
  
• Khoảng cách: Độ hở giữa các slide (đơn vị px).
• Cấu hình chữ (Text): Tùy chỉnh kích cỡ chữ (Size) và độ đậm (Bold/Normal) riêng biệt cho Tiêu đề, Nội dung và Nút bấm.

Sử dụng khi bạn muốn đặt một ảnh banner đơn lẻ, cố định tại một vị trí.

Cách thực hiện: Mở trang bạn muốn sửa trong mục Trang, nhấn "Sửa với Elementor", sau đó nhấn vào hình ảnh bạn muốn sửa > widget Image sẽ hiển thị chi tiết ở cột bên trái.

Thay đổi ảnh: Tại tab Content, rê chuột vào khung ảnh và nhấn Choose Image / Chọn Ảnh để mở Thư viện Media.

Thông số kỹ thuật & Thao tác:

• Image Resolution: Chọn độ phân giải (thường để Full hoặc 1024x1024).
• Link: Chọn "Custom URL" và dán link đích nếu muốn ảnh có thể nhấn vào được.
• Thao tác trong Media Library: Khi chọn ảnh, bạn có thể xem chi tiết kích thước tệp, ngày tải lên và điền thẻ Alt (Văn bản thay thế) để tốt cho SEO.

Đây là dạng slide chuyên dụng cho phép tùy chỉnh sâu về hiệu ứng và vị trí văn bản trên từng trang. Cách thức mở widget tương tự như banner tĩnh, bạn mở trang và vị trí banner cần sửa, nhấn vào khu vực chứa banner slide và widget banner slide sẽ hiển thị chi tiết ở cột bên trái.

3.1. Quản lý các Slide con
Tại Widget Slides, danh sách các item (Slide 1, Slide 2...) hiện ra. Bạn có thể nhân bản hoặc thêm item mới.
Height: Điều chỉnh chiều cao tổng thể của toàn bộ slide (Ví dụ: 501px).

3.2. Cấu hình chi tiết từng Slide
Nhấn vào từng slide để chỉnh sửa 3 tab nội dung:

• Background: Chọn màu nền (Color) hoặc Hình ảnh (Image).
  Size: Chọn "Cover" để ảnh phủ kín khung.
  Ken Burns Effect: Bật/Tắt hiệu ứng ảnh chuyển động nhẹ.
  Background Overlay: Bật nếu muốn làm tối ảnh nền để nổi bật chữ.
  
• Content: Nhập Tiêu đề (Title), Mô tả (Description) và Chữ trên nút (Button Text). Dán link vào ô Link.
  
• Style (Tùy chỉnh riêng cho mỗi slide): Bật Custom để điều chỉnh vị trí chữ.
  Horizontal/Vertical Position: Căn chữ sang Trái/Giữa/Phải hoặc Trên/Giữa/Dưới.
  Text Align: Căn lề văn bản (Trái/Giữa/Phải).
  Colors: Màu sắc riêng cho Tiêu đề, Nội dung hoặc Nút bấm của slide đó.
  

Sử dụng khi bạn muốn tạo một nhóm banner xếp lưới (Ví dụ: 4 banner chia làm 2 cột, 2 hàng). Cách thức khởi động để thay ảnh tương tự như banner ảnh tĩnh.

4.1. Cấu trúc Layout
Sử dụng các Container lồng nhau để chia cột (2 cột) và dòng. Mỗi banner nhỏ thực chất là một Container con.

4.2. Cài đặt hình nền cho banner trong Grid
Chọn Container tương ứng > Tab Style > Mục Background.
Image: Chọn ảnh cho banner (Ví dụ: Banner Sale, Combo...).
Cấu hình ảnh nền:
- Position: Center Center (Để ảnh luôn nằm giữa).
- Attachment: Default hoặc Fixed.
- Repeat: No-repeat (Không lặp lại ảnh).
- Display Size: Chọn "Cover" để ảnh tự động co giãn vừa khít khung banner.

4.3. Nội dung đè lên banner
Trong mỗi Container banner, bạn click vào dòng text muốn sửa và nhập nội dung mới ở cột tương ứng bên trái.

Áp dụng cho các sản phẩm độc lập, không có tùy chọn cấu hình cấu trúc cấu trúc phức tạp (Ví dụ: Sách, tài liệu đóng gói sẵn, vật phẩm đóng hộp cố định).

• Mã định danh SKU: Tại tab dữ liệu sản phẩm, truy cập mục Kiểm kê kho hàng (Inventory), nhập chuỗi mã SKU duy nhất theo quy ước nội bộ để hệ thống tự động kiểm soát đối soát phân tích tồn kho thực tế.

Mã định danh SKU

• Cấu hình khung giá: Tại mục Chung (General), nhập mức giá niêm yết tại ô Giá bán thường (Regular Price). Nếu có chương trình ưu đãi, nhập số tiền giảm tại ô Giá khuyến mãi (Sale Price) và nhấp chọn Lên lịch (Schedule) để thiết lập chính xác ngày bắt đầu và ngày kết thúc chuỗi giảm giá.

Ảnh minh họa: Cấu hình khung giá

• Quản lý tồn kho lõi: Tích chọn ô Quản lý kho hàng (Manage stock), nhập số lượng sản phẩm thực tế đang lưu kho. Hệ thống sẽ tự động trừ đi theo thời gian thực khi phát sinh giao dịch thanh toán thành công.

Quản lý tồn kho lõi

Áp dụng cho sản phẩm có nhiều thuộc tính khác nhau như kích thước (Size), màu sắc (Color), mỗi tùy chọn có mức giá và lượng tồn kho riêng lẻ.

Bước 1: Khởi tạo thuộc tính (Attributes)
Tại hộp dữ liệu sản phẩm, chuyển đổi định dạng loại sản phẩm thành Sản phẩm biến thể (Variable Product). Truy cập mục Các thuộc tính (Attributes), chọn thuộc tính cần thiết lập (Ví dụ: Màu sắc), điền các giá trị phân tách bằng dấu gạch đứng | (Ví dụ: Xanh | Đỏ | Tím), tích chọn ô Dùng cho nhiều biến thể (Used for variations) và bấm lưu.

Bước 1: Khởi tạo thuộc tính (Attributes) - Ảnh 1

Bước 1: Khởi tạo thuộc tính (Attributes) - Ảnh 2

Bước 2: Tạo ma trận biến thể tự động
Chuyển sang mục Các biến thể (Variations), nhấp chọn lệnh Tạo biến thể từ tất cả thuộc tính (Create variations from all attributes). Hệ thống sẽ tự động chạy thuật toán chạy ma trận để sinh ra toàn bộ các SKU tổ hợp tương ứng.

Bước 2: Tạo ma trận biến thể tự động - Ảnh 1

Bước 2: Tạo ma trận biến thể tự động - Ảnh 2

Bước 3: Định giá và gán hình ảnh riêng biệt
Người vận hành bắt buộc phải nhấp mở rộng từng biến thể biến thể trong danh sách để nhập dữ liệu riêng lẻ: Mã SKU biến thể, Giá bán thường, dung lượng Kho hàng và tải lên hình ảnh đặc trưng tương ứng của biến thể đó. Nếu không nhập giá bán, biến thể đó sẽ tự động ẩn ngoài giao diện hiển thị mua sắm công cộng.

Bước 3: Định giá và gán hình ảnh riêng biệt

Mọi đơn hàng phát sinh trên Website Commerce sẽ vận hành tự động theo sơ đồ chuỗi trạng thái trạng thái logic nghiêm ngặt sau:

[Khách đặt hàng] ──> Chờ thanh toán (Pending payment) ──> Đang xử lý (Processing)
                                                               │
   ┌──────────────────────── Tạm giữ (On hold) ──────────────────────┤
   │                                                               ▼
[Hủy tự động/Thủ công] <── Đã hủy (Cancelled) / Thất bại <── Đã hoàn thành (Completed)