Giao diện Goungyeol (cửa hàng làm đẹp)

Đây là hướng dẫn sử dụng Goungyeol (goungyeol), giao diện chính thức của Zittme dành cho cửa hàng mỹ phẩm · làm đẹp trực tuyến. Giống một cửa hàng làm đẹp tuyển chọn, giao diện để nhiều khoảng trắng, đặt ảnh sản phẩm lớn trên các thẻ góc vuông, và phối màu nhấn hồng fuchsia với nền trắng ngà ửng hồng. Giao diện dùng chung khung với giao diện Sinsunhan (trang chính tích hợp trong giao diện, lắp ráp các khối bằng trường lặp), nên với nội dung không có ở đây, hãy xem thêm tài liệu Giao diện Sinsunhan (cửa hàng trực tuyến).

Demo: shopdemo2.zitt.me

Thành phần

Cài đặt và áp dụng

1. Cài từ cửa hàng hoặc giải nén vào themes/goungyeol.
2. Trong Quản trị > Cài đặt thiết kế, chọn Goungyeol để áp dụng.
3. Nếu có mô-đun thương mại, menu cửa hàng · ô tìm kiếm ở đầu trang · khối sản phẩm trên trang chủ sẽ tự động liên kết. Nếu có nhiều mô-đun cửa hàng, hãy nhập mid vào "Địa chỉ mô-đun cửa hàng (mid)" trong Cài đặt layout > Bố cục trang chính.

Môi trường khuyến nghị: Zittme 1.0.1 trở lên, thương mại 0.2.16 trở lên. Đây là giao diện đáp ứng nên khuyến nghị tắt chế độ xem riêng cho di động.

Dòng thương hiệu · điểm đánh giá · xếp hạng trên thẻ sản phẩm

• Dòng thương hiệu: mục Tóm tắt (summary) của sản phẩm hiển thị thành dòng thương hiệu trên thẻ và trang chi tiết. Nếu chỉ ghi ngắn tên thương hiệu vào phần tóm tắt, sản phẩm sẽ được hiển thị hai dòng "Thương hiệu / Tên sản phẩm" như cửa hàng tuyển chọn. (Giao diện Streetlab tách bằng / trong tên sản phẩm nên hai cách khác nhau.)
• Điểm đánh giá · số đánh giá: hiển thị điểm trung bình và số lượng đánh giá sản phẩm của mô-đun thương mại trên thẻ. Sản phẩm chưa có đánh giá thì không hiển thị.
• Số thứ hạng · huy hiệu giảm giá: khối xếp hạng hiển thị số thứ hạng, còn sản phẩm giảm giá hiển thị huy hiệu tỷ lệ giảm chồng lên thẻ.

Trang chính tích hợp trong giao diện (bố cục trang chính)

Lắp ráp theo thứ tự bằng trường lặp "Khối trang chính" trong tab Bố cục trang chính của Cài đặt layout. Nếu không có khối nào thì dùng bố cục mặc định.

Loại khối	Nội dung	Nguồn (source)	Số lượng (count)
Ô danh mục cửa hàng	Lối tắt đến danh mục cấp 1. Biểu tượng lấy từ trường lặp "Biểu tượng danh mục"	-	Số ô
Sản phẩm đề xuất / mới / giảm giá / phổ biến	Lưới thẻ sản phẩm	-	Số sản phẩm
Ưu đãi trong ngày	Mỗi ngày luân phiên một sản phẩm trong nhóm có tỷ lệ giảm cao nhất	-	-
Thẻ chương trình khuyến mãi đang diễn ra	Hiển thị chương trình khuyến mãi của mô-đun thương mại dưới dạng thẻ ảnh	-	Số thẻ
Xếp hạng phổ biến theo thời gian thực	Hạng 1~N theo số lượt mua → số lượt xem	-	Số thứ hạng
Dải banner	Dùng lại ảnh slide trực quan làm banner giữa trang	Số thứ tự của slide	-
Biên tập	Một ô ảnh + một ô chữ. Dùng nguyên ảnh · tiêu đề · mô tả · nút của slide trực quan	Số thứ tự của slide (để trống là 1)	-
Bài mới nhất của bảng tin	Danh sách bài của bảng tin. Nhập nhiều mid cách nhau bằng dấu phẩy thì hiển thị nhiều cột	mid bảng tin (ví dụ notice,board)	Số bài

Cách tạo khối biên tập

1. Trong Cài đặt layout > Trang đầu > Slide trực quan, đăng ký thêm một slide có đủ ảnh · tiêu đề · mô tả · nút. (Nếu không muốn slide này xuất hiện trên thanh trượt, hãy đặt nó ở cuối thứ tự và điều chỉnh số lượng trong "Hiện thanh trượt trực quan".)
2. Thêm "Biên tập" vào Khối trang chính và nhập số thứ tự của slide đó vào mục nguồn.
3. Nếu để trống tiêu đề khối thì dùng tiêu đề mặc định, nếu nhập thì câu đó hiển thị thành nhãn nhỏ.

Màn hình cửa hàng (skin thương mại)

• Danh sách: tab danh mục · tìm kiếm · sắp xếp. Trên thẻ có dòng thương hiệu (tóm tắt) · điểm đánh giá · huy hiệu giảm giá.
• Chi tiết: dòng thương hiệu · tên sản phẩm · giá · ưu đãi tích điểm · phí giao hàng · tùy chọn · mua ngay · giỏ hàng. "Thông tin bổ sung" trong quản lý sản phẩm hiển thị thành bảng bên dưới phần tóm tắt.
• Chương trình khuyến mãi · giỏ hàng · đặt hàng · mua sắm của tôi: cùng luồng với giao diện Sinsunhan, thanh toán được chuyển tiếp sang skin zittme Pay.

Chân trang

Trong Cài đặt layout > Chân trang, điền câu giới thiệu website, số điện thoại · giờ làm việc · email của trung tâm chăm sóc khách hàng, địa chỉ mạng xã hội, câu thông báo cuối trang, thông tin doanh nghiệp · liên hệ và dòng bản quyền.

Toàn bộ mục cài đặt layout

Cơ bản

Ảnh logo · logo chế độ tối · chữ logo · màu nhấn · độ rộng tối đa của nội dung (1060 · 1180 · 1320) · độ rộng thanh menu · màu thanh menu · vị trí nút chế độ tối trên di động · vị trí chọn ngôn ngữ trên di động · chế độ màu

Trang đầu

Hiện thanh trượt trực quan · khoảng thời gian tự động chuyển · slide trực quan (ảnh nền · tiêu đề · mô tả · tên nút · liên kết nút · căn lề chữ)

Bố cục trang chính

Biểu tượng danh mục · địa chỉ mô-đun cửa hàng (mid) · khối trang chính (loại · tiêu đề · nguồn · số lượng)

Nội dung · thanh bên

Dùng tìm kiếm tích hợp · hiện hộp đăng nhập ở thanh bên

Chân trang

Câu giới thiệu website · số điện thoại trung tâm chăm sóc khách hàng · giờ làm việc · email liên hệ · 4 loại địa chỉ mạng xã hội · câu thông báo cuối trang · thông tin doanh nghiệp · liên hệ · dòng bản quyền