Giao diện Damon (cửa hàng nội thất)

Đây là hướng dẫn sử dụng giao diện chính thức Damon (damon) của Zittme dành cho cửa hàng nội thất · đồ gia dụng. Màu sắc được gói gọn trong nền yến mạch và một tông nâu óc chó duy nhất, kết hợp tiêu đề kiểu serif, khoảng trắng rộng và lưới 3 cột mật độ thấp để khách có thể ngắm lâu từng sản phẩm. Giao diện dùng chung bộ khung với giao diện Sinsunhan (trang chính tích hợp sẵn 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, bạn hãy xem thêm tài liệu Giao diện Sinsunhan (cửa hàng trực tuyến).

Demo: damon-demo.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/damon.
2. Tại Quản trị > Cài đặt thiết kế, chọn Damon rồi áp dụng.
3. Nếu có mô-đun thương mại, menu cửa hàng · ô tìm kiếm ở header · khối sản phẩm ở trang chính sẽ được liên kết tự động. 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.
4. Loại trang được xác định bằng cách ghi m (trang chính) / sl (trang phụ) / sf (toàn chiều rộng) vào lớp menu trong sơ đồ website. Các màn hình thành viên · tin nhắn · thanh toán tự động hiển thị toàn chiều rộng.

Môi trường khuyến nghị: Zittme 1.0.1 trở lên, thương mại 1.1.1 trở lên. Vì đây là giao diện responsive, bạn nên tắt chế độ xem riêng cho di động.

Header và chế độ màu

• Wordmark nằm ở giữa, bên trái là ô tìm kiếm sản phẩm, bên phải là biểu tượng giỏ hàng · thông báo. Nếu để trống ảnh logo, chữ logo sẽ hiển thị thành wordmark kiểu serif.
• Trên di động có thanh tab dưới cùng (Trang chủ · Danh mục · Tìm kiếm · Giỏ hàng · Trang cá nhân).
• Chế độ màu có thể chọn giữa Tự động (theo cài đặt thiết bị) · Sáng · Tối. Ở chế độ Tự động, giá trị khách truy cập chọn sẽ được lưu trong trình duyệt.

Trang chính tích hợp sẵn 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, bố cục mặc định sẽ được dùng (ô danh mục → sản phẩm mới → banner → đề xuất → thương hiệu → chương trình khuyến mãi → xếp hạng → banner → giảm giá → ưu đãi trong ngày → bài mới nhất của bảng tin).

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 3 cột	-	Số sản phẩm
Ưu đãi trong ngày	Mỗi ngày hiển thị một sản phẩm giảm giá khác nhau	-	-
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 thương mại dưới dạng thẻ ảnh	-	Số thẻ
Xếp hạng phổ biến	Danh sách hạng 1~N có tab danh mục	-	Số hạng
Hàng thương hiệu	Logo · tên · liên kết đã đăng ký trong trường lặp "Thương hiệu"	-	Số thương hiệu
Dải banner	Tái sử dụng ảnh slide hình ảnh làm banner ở giữa trang	Số thứ tự slide (để trống thì lần lượt)	-
Bài mới nhất của bảng tin	Danh sách bài của bảng tin. Ghi nhiều mid cách nhau bằng dấu phẩy để hiển thị nhiều cột	mid bảng tin (ví dụ: notice,board)	Số bài

Nếu để trống tiêu đề khối, tiêu đề mặc định theo từng loại sẽ được hiển thị.

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

• Danh sách: danh mục · tìm kiếm · sắp xếp. Thẻ sản phẩm hiển thị tên người bán (cửa hàng) · tỷ lệ giảm giá · giá gốc.
• Chi tiết: tên sản phẩm · giá · ưu đãi tích điểm · phí vận chuyển · tùy chọn · mua ngay · giỏ hàng, hướng dẫn vận chuyển · kích thước · đổi hàng, tab đánh giá · hỏi đáp, thông tin người bán.
• Cửa hàng người bán: khi bật chợ mở, mỗi cửa hàng có ảnh đầu trang · tìm kiếm trong cửa hàng · danh sách sản phẩm tiêu biểu · mới · tất cả.
• 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.

Footer

Tại Cài đặt layout > Footer, điền câu giới thiệu website, đ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. Menu footer được kết nối với "Menu footer" trong sơ đồ website.

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

Cơ bản

Ảnh logo · logo chế độ tối · chữ logo · màu nhấn · chiều rộng tối đa của nội dung (1060 · 1180 · 1320) · chiều 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

Màn hình đầu tiên

Hiển thị slider hình ảnh · khoảng thời gian tự chuyển · slide hình ảnh (ả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 · thương hiệu · đị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ổng hợp · hiển thị hộp đăng nhập ở thanh bên

Footer

Câu giới thiệu website · số điện thoại 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