Giới thiệu

Trong kinh doanh thời trang online, khách hàng không thể thử đồ trực tiếp. Vì vậy, biểu đồ kích thước (Size Chart) là nội dung rất quan trọng giúp người mua:
  • Chọn đúng size sản phẩm
  • Giảm tỷ lệ đổi trả
  • Tăng trải nghiệm mua sắm
  • Tăng độ chuyên nghiệp cho website
  • Trên nền tảng Fashion EzyPlatform, bạn có thể dễ dàng tạo trang biểu đồ kích thước và hiển thị dưới dạng Modal (popup) ngay trong nội dung website.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn:
  • Cách tạo đoạn trang biểu đồ kích thước trong khu vực quản trị
  • Cách thiết lập hiển thị ngoài website
  • Cách sử dụng ChatGPT để thiết kế biểu đồ đẹp hơn (màu sắc, font chữ, bố cục, hình ảnh…)

Truy cập khu vực quản trị để tạo biểu đồ kích thước

1.png
Đầu tiên, bạn cần đăng nhập vào trang quản trị website.Sau đó thực hiện:
  • Vào menu Các bài viết → Các phần trang→ Chọn Trang chung → Chọn mục Size Chart Modal.
👉 Đây là khu vực cho phép bạn tạo các đoạn nội dung dùng chung trên website như: (Header, Footer, Popup, Modal, Size Chart)

Tạo đoạn trang Size Chart mới

Trong danh sách các phần trang: Nhấn Tạo
Sau đó nhập thông tin:
  • Tên trang: common
  • Tên đoạn trang: size_chart_modal
👉 Đây là quy tắc đặt tên giúp hệ thống hiểu rằng: Đây là đoạn modal dùng chung toàn website

Viết nội dung biểu đồ kích thước

2.png
Trong khu vực soạn thảo, bạn có thể nhập code HTML + CSS để tạo biểu đồ.
Một biểu đồ kích thước thường gồm:
  • Tiêu đề
  • SIZE CHART
  • Bảng hướng dẫn chọn size
  • Hình minh họa cơ thể
  • Vị trí vòng ngực
  • Vị trí vòng eo
  • Vị trí vòng hông
  • Bảng size nữ/ Bảng size nam
👉Ngoài ra có thể bổ sung:
  • Ghi chú cách đo
  • Đơn vị cm / inch
Lưu ý sai số: Sau khi nhập nội dung → Nhấn Cập nhật

Thiết lập thông tin hiển thị

3.png
Ở cột bên phải màn hình quản trị, bạn cần kiểm tra:
  • Loại bài viết: Mảnh (Fragment)
  • Đường dẫn: ví dụ commonsizechartmodal
  • Trạng thái: Xuất bản
👉Việc thiết lập đúng sẽ giúp modal hiển thị ngoài website.

Sử dụng ChatGPT để thiết kế Size Chart đẹp hơn

4.png
Một ưu điểm lớn khi xây dựng website trên EzyPlatform là bạn có thể dùng ChatGPT để tạo layout biểu đồ nhanh và đẹp.Bạn có thể yêu cầu ChatGPT:
  • Tạo bố cục
  • Tạo HTML + CSS vẽ hình cơ thể đơn giản để minh họa vòng ngực eo hông
  • Gợi ý font chữ phù hợp website thời trang nữ
👉 Ví dụ prompt: "Hãy tạo cho tôi layout biểu đồ size thời trang dạng popup.Có tiêu đề lớn, hình minh họa cơ thể, bảng size nữ và nam, Thiết kế hiện đại, dễ đọc".
ChatGPT sẽ gợi ý:
  • Chia khối nội dung
  • Khoảng cách dòng
  • Căn giữa tiêu đề
  • Tạo bảng chuyên nghiệp
  • Tạo màu sắc thương hiệu

Kiểm tra hiển thị biểu đồ ngoài website

5.png
Sau khi hoàn tất việc thiết lập và hiển thị Size Chart trên website, bạn hãy truy cập lại trang web và mở thử một trang sản phẩm bất kỳ. Tại đây, nhấn vào nút “Size Chart” để kiểm tra hoạt động của hệ thống. Nếu cấu hình đúng, một cửa sổ popup sẽ xuất hiện ngay trên màn hình, hiển thị đầy đủ bảng hướng dẫn chọn size. Nội dung bảng size sẽ rõ ràng, font chữ dễ đọc, các thông số được trình bày khoa học và hình minh họa cơ thể được căn chỉnh cân đối, giúp khách hàng dễ dàng hình dung cách đo và lựa chọn kích thước phù hợp. Khi tính năng này hoạt động ổn định, giao diện website sẽ trở nên chuyên nghiệp, trực quan hơn và góp phần nâng cao trải nghiệm mua sắm của khách hàng.

Một số lưu ý quan trọng

Khi tạo Size Chart bạn nên:
✅ Dùng đơn vị cm để khách dễ hiểu
✅ Kiểm tra hiển thị trên desktop và mobile
✅ Không dùng ảnh quá nặng
✅ Giữ font chữ rõ ràng
✅ Đảm bảo màu tương phản tốt