Streetlab 佈景主題（時尚購物網站）

這是專為時尚 · 街頭品牌購物網站打造的 Zittme 官方佈景主題 Streetlab（streetlab） 的手冊。以純白底色搭配單一墨黑色整理成單色調，在具備排行分頁與品牌條的首頁中，商品照片成為主角。它與 Sinsunhan 佈景主題使用相同的骨架（佈景主題內建主頁面、以重複欄位組合區塊），本文未提及的內容請一併參閱 Sinsunhan 佈景主題（購物網站） 文件。

示範：fashiondemo.zitt.me

組成

重點色在版面設定 > 基本中變更，並一併套用到所有畫面。預設值為墨黑色。

安裝與套用

1. 從商店安裝，或解壓縮至 themes/streetlab。
2. 在管理員 > 設計設定中選擇 Streetlab 並套用。版面與模組面板會一次變更。
3. 若有電商模組，商店選單 · 頁首搜尋 · 首頁商品區塊會自動連動。若有多個商店模組，請在版面設定 > 主頁構成的「商店模組位址（mid）」中填入要使用的 mid。

建議環境：Zittme 1.0.1 以上、電商 0.2.16 以上。本佈景主題為響應式，建議關閉行動裝置專用檢視。

商品名稱標示規範 — 品牌行

本佈景主題不會為每個商品另外儲存品牌。取而代之的是，將商品名稱寫成 品牌 / 商品名稱 的形式，斜線前的部分會被拆出作為品牌，以小字顯示在上一行，斜線後的部分則以大字顯示為商品名稱。

• 例：將商品名稱登錄為 BLACKLINE / Lambswool Crewneck 時，列表卡片 · 詳情 · 購物車 · 訂單列中會以 BLACKLINE 作為品牌行、Lambswool Crewneck 作為商品名稱顯示。
• 分隔符號是兩側各有一個空格的斜線（ / ）。沒有斜線時，只顯示商品名稱而不顯示品牌行。
• 商品管理中的「附加資訊」與這個品牌行無關。附加資訊是在詳情頁摘要下方以表格顯示的另一個項目。
• 搜尋 · 排序 · 訂單中會直接使用完整商品名稱（品牌 / 商品名稱）。

頁首

由標誌 · 上方選單 · 搜尋 · 我的頁面 · 購物車 · 通知鈴組成。選單列顏色（深色 · 重點色 · 淺色）與寬度（內文寬度 · 100%）可在版面設定中選擇。在行動裝置上會收合為抽屜選單，並可另外設定深色模式按鈕與語言選擇的位置（抽屜內 · 頁首 · 頁尾）。

佈景主題內建主頁面（主頁構成）

當網站首頁為主頁型態時，由版面直接繪製。在版面設定 > 主頁構成 分頁的「主頁面區塊」重複欄位中依序組合，若一個都沒有，則使用預設構成（分類 → 排行榜 → 新品 → 品牌條 → 橫幅 → 企劃活動 → 推薦 → 每日特價 → 橫幅 → 折扣 → 最新文章）。

區塊類型	內容	來源（source）	數量（count）
商店分類磚	第 1 層分類捷徑。圖示在「分類圖示」重複欄位中設定	-	磚數
推薦 / 新品 / 折扣 / 熱門商品	商品卡片網格。卡片上顯示品牌行 · 折扣率 · 原價	-	商品數
每日特價	折扣率前段商品每天輪替一件	-	-
進行中的企劃活動卡片	以圖片卡片呈現電商企劃活動	-	卡片數
即時熱門排行（分類分頁）	點擊分類分頁切換的排名列表	-	名次數
品牌條	將「品牌」重複欄位中登錄的品牌排成一行。有標誌圖片時顯示標誌，否則顯示名稱	-	品牌數
橫幅條	將視覺輪播圖片重複用作中段橫幅	第幾張輪播的編號	-
討論區最新文章	討論區文章列表。以逗號填入多個 mid 時會多欄排列	討論區 mid（例：notice,board）	文章數

品牌條

在版面設定 > 主頁構成 > 品牌 重複欄位中登錄品牌名稱 · 標誌圖片 · 連結網址。首頁的品牌條區塊會讀取這份列表。它與商品名稱中的品牌行並未連結，因此建議直接在連結網址中填入該品牌的商品列表（搜尋結果等）。

示範首頁的「About the platform」區塊

示範網站首頁下方的黑色介紹區塊（大標題 + 4 個數字）並非佈景主題區塊，而是手動放入示範網站首頁頁面的 HTML 小工具。數字也是直接填寫的值。若要使用相同區塊，請在首頁（小工具頁面）以 HTML 小工具放入下方標記，並將樣式放入版面設定的頁首腳本（或網域設定的附加 HTML 頁首）。

<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>

商店畫面（電商面板）

• 列表：分類分頁 · 搜尋 · 排序（陳列順序 · 最新 · 熱門 · 價格）。卡片上顯示推薦 · NEW 徽章、品牌行、折扣率與原價。
• 詳情：品牌行 · 商品名稱 · 摘要 · 價格 · 點數回饋 · 運費 · 選項選擇 · 立即購買 · 加入購物車。商品管理的「附加資訊」會以表格顯示在摘要下方。
• 企劃活動：將電商企劃活動（?v=promo&p=slug）以橫幅 · 介紹文 · 商品網格呈現。
• 購物車 · 訂單 · 付款 · 我的購物：與 Sinsunhan 佈景主題流程相同，付款會接續至 zittme Pay 面板。

頁尾

在版面設定 > 頁尾中填寫網站介紹文字、客服中心電話 · 服務時間 · 電子郵件、社群網址（Instagram · Facebook · YouTube · 部落格）、底部說明文字、營業 · 聯絡資訊、著作權標示。通訊交易業申報編號等法定標示請填寫在「營業 · 聯絡資訊」中。

版面設定全部項目

基本

標誌圖片 · 深色模式標誌 · 標誌文字 · 重點色 · 內文最大寬度（1060 · 1180 · 1320）· 選單列寬度 · 選單列顏色 · 行動版深色模式按鈕位置 · 行動版語言選擇位置 · 色彩模式（依裝置設定 · 永遠淺色 · 永遠深色）

首屏

視覺輪播顯示（僅主頁 · 子頁也顯示 · 不使用）· 自動切換間隔 · 視覺輪播（背景圖片 · 標題 · 說明 · 按鈕名稱 · 按鈕連結）

主頁構成

分類圖示 · 品牌 · 商店模組位址（mid）· 主頁面區塊（類型 · 標題 · 來源 · 數量）

內文 · 側欄

使用整合搜尋 · 在側欄顯示登入框

頁尾

網站介紹文字 · 客服中心電話 · 服務時間 · 洽詢電子郵件 · 4 種社群網址 · 底部說明文字 · 營業 · 聯絡資訊 · 著作權標示