這是專為生鮮食品購物網站打造的 Zittme 官方佈景主題 Sinsunhan（sinsunhan） 的詳細手冊。它與電商模組搭配設計，最大的特色是由版面直接繪製首頁（主頁面）— 不必另外建立小工具頁面，就能完成具備輪播、每日特價、企劃活動、商品區塊、排行榜、討論區最新文章的購物網站首頁。預設支援深色模式與響應式設計，預設字型為 Pretendard。

本文件中的畫面皆直接擷取自實際的示範網站。您可以在 shopdemo.zitt.me 親自瀏覽示範。

組成

所有組成元件共用相同的設計 Token（品牌綠 · 字型 · 圓角 · 間距）。只要在版面設定一處變更重點色，就會一併套用到所有畫面。

安裝與套用

1. 將佈景主題檔案放在 themes/sinsunhan。（從商店安裝或解壓縮）
2. 在管理員 > 設計設定中選擇 Sinsunhan 佈景主題並套用。版面與模組面板會一次套用。
3. 在 Zittme 1.0.1 以上版本，套用佈景主題時站內信 · 訊息 · 通知中心面板也會一起變更。在 1.0.0 請分別於溝通 · 訊息 · 通知中心模組設定中選擇 신선한（Sinsunhan）。
4. 若已安裝電商模組，商店選單 · 頁首搜尋 · 首頁商品區塊會自動連動。若有多個商店模組，請在版面設定 > 主頁構成的「商店模組位址（mid）」中填入要使用的 mid。

建議環境：Zittme 1.0.1 以上、電商 0.2.15 以上。在 1.0.0 也能運作，但需如第 3 項所述手動指定部分面板。

建議一併調整的網站設定

• 切換為響應式：本佈景主題為響應式，建議關閉行動裝置專用檢視。請在系統設定 > 進階中關閉行動檢視，或不保留 config/config.user.inc.php 並關閉 mobile.enabled。若保持開啟，行動裝置上會改為顯示另外的行動版面。
• 關閉 XE 相容按鈕樣式：核心共用 CSS 中 XE 時期的 .btn 樣式（height 24px !important）可能覆蓋面板按鈕。在 config/config.user.inc.php 加入下面一行，並清空 files/cache/assets 內的檔案，即可乾淨移除。

define('DISABLE_XE_BTN_STYLES', true);

頁首

頁首由上而下分為 工具列（登入 · 管理連結 · 語言）→ 標誌 · 搜尋 · 我的頁面 · 購物車 · 通知 → 分類選單 三層。

• 管理員捷徑：以管理員身分登入時，工具列除了 管理員 之外，還會出現 購物管理（電商主控台）與 金流設定（zittme Pay 設定）連結。行動版選單抽屜的工具列也有相同連結。一般會員看不到這些連結。
• 全部分類巨型選單：以第 1 層分類作為欄標題，第 2 層以直向列表展開。欄數會依第 1 層分類數量自動增加（6 個以內 3 欄、8 個以內 4 欄、更多則 5 欄）。
• 通知鈴：僅在已安裝通知中心、至少啟用一種通知類型，且符合通知中心設定的顯示對象（PC · 行動裝置）時才會出現。按下鈴鐺會展開最近的通知，若通知中心的「顯示於會員選單」已開啟，下方會附上 查看全部通知 連結。若會員模組有指定 mid，連結會前往該位址，否則前往通知列表動作位址。

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

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

區塊類型	內容	來源（source）	數量（count）
商店分類磚	第 1 層分類捷徑磚	-	顯示的磚數
每日特價	折扣率前段商品每天輪替一件，午夜倒數計時	-	-
進行中的企劃活動卡片	以圖片卡片呈現電商企劃活動	-	卡片數
推薦 / 新品 / 折扣 / 熱門商品	商品卡片網格（含加入購物車列）	-	商品數
即時熱門排行	依購買數 → 瀏覽數排序第 1～N 名	-	名次數
橫幅條	將視覺輪播圖片重複用作中段橫幅	第幾張輪播的編號（留空則依序）	-
討論區最新文章	討論區文章列表。以逗號填入多個 mid 時會多欄排列	討論區 mid（例：notice,board）	文章數

區塊標題留空時，會使用各類型的預設標題。

分類磚圖示

分類磚預設會放大顯示分類名稱的第一個音節。若是英文 · 西班牙文這類難以用首字區分的語言，或想使用圖形圖示時，請使用版面設定 > 主頁構成中的分類圖示重複欄位。

項目	說明
分類名稱	必須與商店分類名稱完全一致（若為多語系名稱，則為目前語言所顯示的名稱）
圖示圖片	上傳圖片時以圖片優先。建議使用正方形 PNG · SVG
表情符號或文字	沒有圖片時改為顯示的表情符號或一兩個字

未登錄的分類會照常顯示第一個音節。

視覺輪播

在版面設定 > 首屏 分頁登錄輪播（背景圖片 · 標題 · 說明 · 按鈕 · 對齊）。控制項（箭頭 + 圓點）集中於右下角一處，因此在行動裝置上也不會遮住文字。

若一張輪播都未登錄，會自動沿用電商商店首頁橫幅 — 只要管理商店橫幅，首頁輪播也會一併填滿。

商店畫面（電商面板）



商店首頁由橫幅輪播 · 分類磚 · 企劃活動 · 推薦/新品/折扣區塊組成。橫幅請在電商管理 > 前台設定中登錄。



列表畫面上方配置第 1 層分類標籤、目前分類的第 2 層標籤，以及搜尋與排序。在行動裝置上，標籤列不會折成多行，而是以左右滑動的單行顯示。



商品詳情支援一般選項 · 附加選項 · 組合型選項（軸 × 軸）。上方畫面是研磨度 × 容量 2 軸組合型選項的範例。價格下方會連續顯示點數回饋 · 運費 · 配送/新鮮/換貨說明。說明文字請在電商設定 > 配送 · 退換貨說明中管理。

企劃活動



在電商管理中建立企劃活動後，會自動顯示於商店首頁與主頁面的企劃活動卡片。橫幅可選擇圖片 · 單色 · 漸層。

若直接以 DB 或腳本寫入企劃活動的顯示期間（start_date / end_date），務必以 14 位數（YmdHis） 儲存。若寫入 8 位數，日期比較時一律會被視為期間已結束而不顯示。

討論區面板

在討論區面板設定的列表形式中，可為每個討論區選擇不同樣式。

形式	用途	範例
列表型	公告等一般討論區。卡片框 + 分隔線列	下方公告畫面
雜誌型	附縮圖 + 摘要的社群	下方自由討論區畫面
卡片型	以縮圖為主的圖庫	-
FAQ 型	點擊問題即展開答案的手風琴	下方問答畫面







雜誌型 · 卡片型 · FAQ 型必要設定

要顯示縮圖與摘要，需要兩項設定。

1. 在討論區列表設定中加入「摘要」欄位 — 若列表設定中沒有 summary，列表查詢本身就不會取得內文，摘要 · FAQ 答案會顯示為空白。
2. 將文件設定的縮圖對象設為「包含內文」（content） — 在預設值（僅附件）下，不會用內文圖片製作縮圖。變更設定後，必須清空 files/thumbnails 內的檔案，刪除既有的失敗快取（0 位元組檔案），才會重新產生。

會員 · 站內信 · 通知中心

會員面板將登入 · 註冊 · 我的頁面放在單一卡片中，並將輸入欄 · 下拉選單 · 按鈕高度統一為 46px。站內信（溝通）與通知中心畫面直接沿用會員面板的我的頁面框架（左側個人資料 + 右側內容），在與會員選單相同的位置開啟。系統訊息（錯誤 · 提示）畫面設計成即使在版面之外也能自成一體。

行動裝置



• 下方固定顯示 首頁 · 分類 · 搜尋 · 購物車 · 我的頁面 5 個分頁列。
• 分類分頁會從下方開啟商店分類底部面板（第 1 層標題 + 第 2 層標籤），搜尋分頁則開啟商店搜尋底部面板。在沒有商店的網站上會改為開啟選單抽屜。
• 選單抽屜由帳號按鈕 · 分類標籤 · 選單列表 · 深色模式/語言工具組成。管理員的工具列會另外加上購物管理 · 金流設定連結。

頁尾

在版面設定 > 頁尾 分頁中設定。項目留空時，該區塊不會顯示。

項目	說明
網站介紹文字	標誌下方的一行介紹
客服中心電話 / 服務時間	左側客服中心區塊。電話留空時整個區塊會隱藏
洽詢電子郵件	電子郵件洽詢連結
營業·聯絡資訊	每一行換行內容顯示為一個項目
Instagram · Facebook · YouTube · 部落格網址	僅將已填寫的項目顯示為社群圖示
底部說明文字	著作權上方的小型免責·說明文字
著作權標示	最下方的標示

頁面類型與 LNB

在網站地圖的選單類別中填入 m（主頁）/ sl（子頁）/ sf（全寬）來指定頁面類型。網站首頁即使未指定類別也會視為主頁，會員 · 站內信 · 付款畫面會自動成為全寬。本佈景主題的子頁面以無 LNB、內文全寬的方式運作。

版面設定全部項目

基本

項目	預設值	說明
標誌圖片 / 深色模式標誌	無	以高度 40px 為準。留空則使用標誌文字
標誌文字	無	留空則使用網站標題
重點色	品牌綠	同時決定按鈕 · 連結 · 啟用標示 · 面板強調色
內文最大寬度	1180px	1060 / 1180 / 1320
選單列寬度 · 顏色	內文寬度 · 深色	可選擇填滿全寬、重點色 · 淺色
行動版深色模式 · 語言按鈕位置	選單抽屜內	可移至頁首 · 頁尾
色彩模式	依裝置設定	自動 / 永遠淺色 / 永遠深色

首屏

視覺輪播顯示條件 · 自動切換間隔 · 輪播列表（重複欄位）。

主頁構成

商店模組位址（mid）· 分類圖示（重複欄位）· 主頁面區塊（重複欄位）。請參考上方「佈景主題內建主頁面」。

內文·側欄

是否使用整合搜尋 ·（舊版相容）側欄登入框。

頁尾

請參考上方「頁尾」表格。