Giao diện Streetlab (cửa hàng thời trang)

Đây là hướng dẫn cho Streetlab (streetlab), giao diện chính thức của Zittme dành cho cửa hàng thời trang · thương hiệu streetwear. Tông đơn sắc chỉ gồm nền trắng tinh và một màu đen mực, và ở trang chủ có tab xếp hạng cùng dải thương hiệu, ảnh sản phẩm là nhân vật chính. Giao diện dùng chung bộ khung với giao diện Sinsunhan (trang chủ tích hợp sẵn trong giao diện, lắp ráp 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: fashiondemo.zitt.me

Thành phần

Màu nhấn được đổi trong Cài đặt layout > Cơ bản và áp dụng cho toàn bộ màn hình. Giá trị mặc định là đen mực.

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

1. Cài từ cửa hàng hoặc giải nén vào themes/streetlab.
2. Vào Quản trị > Cài đặt thiết kế, chọn Streetlab rồi áp dụng. Layout và skin mô-đun đổi cùng lúc.
3. Nếu có mô-đun thương mại, menu cửa hàng · ô tìm kiếm trên header · các khối sản phẩm ở 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 muốn dùng vào "Địa chỉ mô-đun cửa hàng (mid)" trong Cài đặt layout > Bố cục trang chủ.

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 bạn nên tắt chế độ xem riêng cho di động.

Quy ước ghi tên sản phẩm — dòng thương hiệu

Giao diện này không lưu thương hiệu riêng cho từng sản phẩm. Thay vào đó, nếu bạn ghi tên sản phẩm theo dạng Thương hiệu / Tên sản phẩm, phần trước dấu gạch chéo được tách làm thương hiệu hiển thị nhỏ ở dòng trên, phần sau hiển thị lớn làm tên sản phẩm.

• Ví dụ: đăng ký tên sản phẩm là BLACKLINE / Lambswool Crewneck thì ở thẻ danh sách · chi tiết · giỏ hàng · dòng đơn hàng, BLACKLINE hiển thị ở dòng thương hiệu và Lambswool Crewneck hiển thị làm tên sản phẩm.
• Dấu phân cách là một dấu gạch chéo có khoảng trắng hai bên ( / ). Nếu không có dấu gạch chéo, chỉ hiển thị tên sản phẩm mà không có dòng thương hiệu.
• "Thông tin bổ sung" trong quản lý sản phẩm không liên quan đến dòng thương hiệu này. Thông tin bổ sung là một mục riêng hiển thị dạng bảng dưới phần tóm tắt ở trang chi tiết.
• Tìm kiếm · sắp xếp · phiếu đặt hàng dùng nguyên tên sản phẩm đầy đủ (Thương hiệu / Tên sản phẩm).

Header

Gồm logo · menu trên cùng · tìm kiếm · trang cá nhân · giỏ hàng · chuông thông báo. Bạn chọn màu thanh menu (tối · màu nhấn · sáng) và chiều rộng (theo nội dung · 100%) trong cài đặt layout. Trên di động, menu gập thành ngăn kéo, và bạn có thể chỉ định riêng vị trí nút chế độ tối và chọn ngôn ngữ (trong ngăn kéo · header · footer).

Trang chủ tích hợp sẵn trong giao diện (Bố cục trang chủ)

Layout tự vẽ khi trang đầu website ở dạng trang chủ. Bạn lắp ráp theo thứ tự bằng trường lặp "Khối trang chủ" trong tab Bố cục trang chủ của Cài đặt layout, nếu không có khối nào thì dùng cấu hình mặc định (danh mục → xếp hạng → sản phẩm mới → dải thương hiệu → banner → khuyến mãi → đề xuất → ưu đãi trong ngày → banner → giảm giá → bài viết mới).

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 tới 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. Thẻ hiển thị dòng thương hiệu · tỷ lệ giảm · giá gốc	-	Số sản phẩm
Ưu đãi trong ngày	Mỗi ngày luân phiên một sản phẩm có tỷ lệ giảm cao nhất	-	-
Thẻ khuyến mãi đang diễn ra	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 (tab danh mục)	Danh sách xếp hạng thay đổi khi bấm tab danh mục	-	Số hạng
Dải thương hiệu	Các thương hiệu đăng ký trong trường lặp "Thương hiệu" xếp thành một hàng. Có ảnh logo thì hiện logo, không thì hiện tên	-	Số thương hiệu
Dải banner	Dùng lại ảnh slide trình chiếu làm banner giữa trang	Số thứ tự slide	-
Bài viết mới từ bảng tin	Danh sách bài viết của bảng tin. Nhập nhiều mid cách nhau bằng dấu phẩy để xếp nhiều cột	mid bảng tin (ví dụ: notice,board)	Số bài viết

Dải thương hiệu

Đăng ký tên thương hiệu · ảnh logo · địa chỉ liên kết trong trường lặp Thương hiệu tại Cài đặt layout > Bố cục trang chủ. Khối dải thương hiệu ở trang chủ đọc danh sách này. Danh sách không liên kết với dòng thương hiệu trong tên sản phẩm, nên bạn nên tự ghi vào địa chỉ liên kết danh sách sản phẩm của thương hiệu đó (kết quả tìm kiếm, v.v.).

Khối "About the platform" ở trang chủ demo

Khối giới thiệu màu đen ở phía dưới trang chủ website demo (tiêu đề lớn + 4 con số) không phải khối của giao diện mà là widget HTML được chèn thủ công vào trang đầu của website demo. Các con số cũng là giá trị được ghi tay. Để dùng khối tương tự, hãy chèn mã dưới đây vào trang đầu (trang widget) bằng widget HTML, còn phần style đặt trong script header của cài đặt layout (hoặc HTML header bổ sung trong cài đặt tên miền).

<section class="sl-editorial">
  <div class="sl-editorial-copy">
    <span class="sl-eyebrow">About the platform</span>
    <h2>Built for<br />brands that<br />move fast</h2>
    <p>소개 문장</p>
  </div>
  <div class="sl-editorial-list">
    <div><strong>12</strong><span>Brands</span></div>
    <div><strong>24</strong><span>Products</span></div>
    <div><strong>6</strong><span>Categories</span></div>
    <div><strong>3</strong><span>Campaigns</span></div>
  </div>
</section>

<style>
.sl-editorial { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin: 0; background: #000; color: #fff; }
.sl-editorial-copy { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(36px, 5vw, 76px); }
.sl-editorial-copy .sl-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.sl-editorial-copy h2 { margin: 0; font-family: var(--hr-display, inherit); font-size: clamp(32px, 4.4vw, 68px); font-weight: 400; line-height: .92; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.sl-editorial-copy p { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.6); }
.sl-editorial-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); }
.sl-editorial-list div { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 190px; padding: 24px; background: #000; }
.sl-editorial-list strong { font-family: var(--hr-display, inherit); font-size: 34px; font-weight: 400; line-height: 1; color: #fff; }
.sl-editorial-list span { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); }
@media (max-width: 860px) { .sl-editorial { grid-template-columns: minmax(0,1fr); } .sl-editorial-list { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); } }
</style>

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 (theo thứ tự trưng bày · mới nhất · phổ biến · giá). Thẻ có huy hiệu đề xuất · NEW, dòng thương hiệu, tỷ lệ giảm và giá gốc.
• Chi tiết: Dòng thương hiệu · tên sản phẩm · tóm tắt · giá · ưu đãi tích điểm · phí vận chuyển · chọn tùy chọn · mua ngay · thêm vào giỏ. "Thông tin bổ sung" trong quản lý sản phẩm hiển thị dạng bảng dưới phần tóm tắt.
• Khuyến mãi: Vẽ chương trình khuyến mãi thương mại (?v=promo&p=slug) bằng banner · câu giới thiệu · lưới sản phẩm.
• Giỏ hàng · đặt hàng · thanh toán · mua sắm của tôi: Cùng luồng với giao diện Sinsunhan, thanh toán tiếp tục qua skin zittme Pay.

Footer

Trong Cài đặt layout > Footer, điền câu giới thiệu website, điện thoại · giờ làm việc · email chăm sóc khách hàng, địa chỉ mạng xã hội (Instagram · Facebook · YouTube · blog), câu hướng dẫn cuối trang, thông tin doanh nghiệp · liên hệ, ghi chú bản quyền. Các thông tin pháp lý như số đăng ký kinh doanh thương mại điện tử được ghi vào "Thông tin doanh nghiệp · liên hệ".

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 nội dung tối đa (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 (theo cài đặt thiết bị · luôn sáng · luôn tối)

Màn hình đầu

Hiển thị slider trình chiếu (chỉ trang chính · cả trang phụ · không dùng) · khoảng thời gian tự chuyển · slide trình chiếu (ảnh nền · tiêu đề · mô tả · tên nút · liên kết nút)

Bố cục trang chủ

Biểu tượng danh mục · thương hiệu · địa chỉ mô-đun cửa hàng (mid) · khối trang chủ (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 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 hướng dẫn cuối trang · thông tin doanh nghiệp · liên hệ · ghi chú bản quyền