Giới thiệu

Trong phần Ecommerce, sản phẩm chỉ hiển thị đúng trên website khi được gán màu sắc, và mỗi màu có ít nhất 1 ảnh đại diện.Điều này đặc biệt quan trọng với theme thời trang (Fashion Theme), vì website sẽ hiển thị sản phẩm theo từng màu sắc cụ thể.

Chuẩn bị hình ảnh sản phẩm trước khi đăng

Trước khi bắt đầu tạo sản phẩm trên hệ thống, bạn nên chuẩn bị đầy đủ hình ảnh sản phẩm chất lượng cao để đảm bảo sản phẩm hiển thị đẹp, chuyên nghiệp và tăng khả năng thu hút khách hàng.Một bộ hình ảnh sản phẩm tiêu chuẩn nên bao gồm:
  • Tối thiểu 8 – 10 hình ảnh cho mỗi sản phẩm
  • Ảnh chụp toàn bộ sản phẩm (full body)
  • Ảnh cận chi tiết chất liệu, đường may, logo
  • Ảnh sản phẩm khi người mẫu mặc thực tế
  • Ảnh phối đồ hoặc concept lookbook
  • Ảnh nhiều góc chụp khác nhau (trước – sau – ngang)
Kích thước ảnh cho website
Ảnh sản phẩm
  • Chuẩn: 800x800 hoặc 800x1200
  • Nền trắng / đồng nhất
  • Zoo, cận sản phẩm
  • Mỗi màu sản phẩm nên có ít nhất 1 ảnh
Ảnh banner homepage
  • Chuẩn: 1920x800 hoặc 1920x600
  • Full width màn hình
Ảnh danh mục (category / collection)
  • Chuẩn: 1200x675 hoặc 1600x800,1000x1500
  • Ảnh blog
  • Chuẩn: 1200x628 (chuẩn SEO + share Facebook)
Ngoài ra, bạn nên lưu ý:
  • Ảnh nên có nền sáng hoặc nền đồng nhất
  • Dung lượng ảnh tối thiểu 500 KB và đồng đều giữa các sản phẩm để website hiển thị đẹp
  • Dung lượng ảnh nên được tối ưu để website tải nhanh
  • Ảnh rõ nét, không bị vỡ hoặc mờ

Truy cập vào trang Admin

1.png
Đầu tiên, bạn cần truy cập vào Admin tại cột menu các tính năng bên trái chọn mục Ecommerce → Các sản phẩm.Tại đây bạn sẽ thấy danh sách các sản phẩm.

Thêm mới sản phẩm

7.png

Bước 1: Nhập thông tin sản phẩm

1.png
Tại màn hình Thêm sản phẩm, bạn cần nhập đầy đủ các thông tin sau:
Thông tin chung
  • Tên sản phẩm (*): Tên hiển thị ngoài website
  • Mã sản phẩm (*): Mã quản lý nội bộ
  • Mã vạch: (không bắt buộc)
  • Sản phẩm cha: Dùng khi sản phẩm có biến thể
  • Biểu tượng: Ảnh đại diện nhỏ của sản phẩm
  • Băng rôn: Ảnh banner hiển thị nổi bật
Thông tin kho & giá bán
  • Số lượng (*): Tồn kho ban đầu
  • Số lượng đã bán: Hệ thống tự cập nhật
  • Loại tiền (*): Ví dụ VND
  • Giá gốc (Bao gồm thuế)
  • Phần trăm chiết khấu
  • Giá bán (Bao gồm thuế) (*)
  • Loại sản phẩm: Ví dụ: Đơn lẻ
Thông tin hiển thị
  • Cửa hàng (*): Chọn cửa hàng hiển thị (ví dụ Fashion)
  • Thứ tự hiển thị: Số càng lớn hiển thị càng ưu tiên
  • Trạng thái (*): Chọn “Đã lưu trữ” hoặc trạng thái hiển thị
👉 Đây là mục rất quan trọng để sản phẩm có thể xuất hiện ngoài website.

Bước 2: Thông tin vận chuyển (nếu có)

3.png
Nếu sản phẩm cần giao hàng, bạn có thể cấu hình: Kho chứa/ Cân nặng/ Chiều dài – rộng – cao. Thuộc tính hàng hóa như: Dễ vỡ/ Chất lỏng /Hàng sang trọng/ Có cạnh sắc nhọn/ HSD ngắn
👉 Các thông tin này giúp hệ thống tính phí vận chuyển chính xác.

Bước 3: Thông tin kế toán & hóa đơn

4.png
Bạn có thể thiết lập thêm: Giá vốn/ Nhóm sản phẩm/ Loại thuế/ Đơn vị tính/ Phần trăm thuế
👉Các mục này phục vụ quản lý bán hàng và xuất hóa đơn.

Bước 4: Lưu sản phẩm

Sau khi nhập đầy đủ: Nhấn Gửi đi để lưu sản phẩm.Sau đó bạn có thể:
  • Gán sản phẩm vào danh mục
  • Gán vào bộ sưu tập
  • Kiểm tra hiển thị ngoài website

Thiết lập màu sắc và hình ảnh để sản phẩm hiển thị trên website

Để sản phẩm hiển thị đúng trên website (đặc biệt với theme thời trang), bạn bắt buộc phải tạo màu sắc và gán ảnh cho từng màu. Website sẽ dùng các màu này để hiển thị chấm màu, đổi ảnh theo lựa chọn của khách hàng.

Thêm ảnh đại diện và banner sản phẩm

6.png
2.png
Tại trang Chi tiết sản phẩm, bạn tìm đến các mục:
  • Biểu tượng → Ảnh đại diện nhỏ
  • Băng rôn → Ảnh hiển thị lớn
  • Nhấn Duyệt → chọn ảnh → lưu lại
👉Ảnh banner sẽ hiển thị lớn tại trang chi tiết sản phẩm ngoài website.

Thêm màu sắc cho sản phẩm

5.png
Tại trang chi tiết của sản phẩm, bạn cuộn xuống trang tìm đến mục Các màu sắc → nhấn Thêm mới. Hệ thống sẽ mở bảng "Thêm màu sản phẩm mới". Bạn chỉ cần chọn các thông tin như:
  • Các màu có sẵn: Bạn có thể lựa chọn các màu có sẵn hoặc thêm một màu mới.
  • Tên màu (*). Là đường dẫn trên website, chúng tôi đề xuất bạn sử dụng chữ viết thường tiếng anh và dấu gạch ngang, ví dụ: hello-world.
  • Tên hiển thị (*).Ví dụ: “Màu kem”, “Đen”, “Be” – đây là tên xuất hiện trên website.
  • Mã màu (HEX).Ví dụ: "#ffffff" → Website dùng mã này để hiển thị chấm màu lựa chọn.
  • Số lượng sản phẩm của màu đó.Ví dụ: 1000, 2000,...
Sau đó, nhấn Thêm để tạo màu cho sản phẩm.

Thêm hình ảnh cho từng màu sắc

4.png
2.png
3.png
Sau khi đã tạo màu, bạn nhấn vào mã màu của mục màu vừa tạo để mở giao diện các đa phương tiện màu sản phẩm.Tại đây, bạn có thể tải lên ảnh trong phần thệm mới về ảnh mẫu mặc về màu sắc mà bạn có sẵn từ 2–5 ảnh cho mỗi màu tùy ý của bạn và lặp lại với tất cả các màu đã tạo.

Kiểm tra kết quả trên website

1.png
Sau khi hoàn tất, bạn truy cập vào trang website sẽ hiển thị đúng màu cho từng sản phẩm mà bạn tạo. Khi người dùng bấm chọn sản phẩm bất kì, toàn bộ ảnh của màu đó sẽ hiển thị tương ứng và kèm theo thông tin về giá, số lượng,...Nếu sản phẩm không có màu hoặc không có ảnh trong màu, sản phẩm sẽ không hiển thị đúng hoặc không xuất hiện trên website.

Lưu ý

✅ Mỗi sản phẩm phải có ít nhất 1 màu, mỗi màu phải có tối thiểu 1 ảnh
✅ Mã màu (HEX) ảnh hưởng đến hiển thị chấm màu
✅ Tên màu và tên hiển thị phải rõ ràng
✅ Ảnh nên đồng nhất về kích thước và nền
✅ Cửa hàng phải chọn đúng (Fashion cho theme thời trang)