生鮮食品ショッピングモールのための Zittme 公式テーマ Sinsunhan（sinsunhan）の詳細マニュアルです。コマースモジュールと組み合わせて使うよう設計されており、トップページ（メインページ）をレイアウトが直接描画することが最大の特徴です — ウィジェットページを別に作らなくても、スライダー・日替わり特価・特集・商品セクション・ランキング・掲示板の新着投稿がそろったショッピングモールのトップページが完成します。ダークモードとレスポンシブに標準対応し、標準フォントは Pretendard です。

この文書の画面は実際のデモサイトをそのままキャプチャしたものです。デモは shopdemo.zitt.me で直接ご覧いただけます。

構成

すべての構成要素が同じデザイントークン（ブランドグリーン・フォント・角丸・余白）を共有します。ポイントカラーはレイアウト設定の一か所で変更すれば、全画面に一緒に反映されます。

インストールと適用

1. テーマファイルを themes/sinsunhan に置きます。（ストアからのインストールまたは圧縮ファイルの展開）
2. 管理者 > デザイン設定で Sinsunhan テーマを選んで適用します。レイアウトとモジュールスキンが一度に適用されます。
3. Zittme 1.0.1 以上では、メッセージ・システムメッセージ・通知センターのスキンまでテーマ適用時に一緒に切り替わります。1.0.0 では、コミュニケーション・システムメッセージ・通知センターの各モジュール設定でそれぞれ 신선한 を選んでください。
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 に次の 1 行を入れ、files/cache/assets 内のファイルを空にすると、きれいに取り除けます。

define('DISABLE_XE_BTN_STYLES', true);

ヘッダー

ヘッダーは上から ユーティリティバー（ログイン・管理リンク・言語）→ ロゴ・検索・マイページ・カート・通知 → カテゴリメニュー の 3 段で構成されます。

• 管理者ショートカット：管理者としてログインすると、ユーティリティバーに 管理者 のほか ショップ管理（コマースコンソール）と Pay 設定（zittme Pay 設定）のリンクが一緒に表示されます。モバイルメニューのドロワーのツール行にも同じリンクがあります。一般会員には表示されません。
• 全カテゴリのメガメニュー：第 1 階層カテゴリを列見出しにし、第 2 階層を縦のリストで展開します。列数は第 1 階層カテゴリの数に応じて自動で増えます（6 個までは 3 列、8 個までは 4 列、それ以上は 5 列）。
• 通知ベル：通知センターがインストールされ、使用中の通知の種類が 1 つ以上あり、通知センター設定の表示対象（PC・モバイル）に該当する場合にのみ表示されます。ベルを押すと最近の通知が展開され、通知センターの「会員メニューに表示」がオンなら下に すべての通知を見る リンクが付きます。リンクは、会員モジュールに指定された mid があればそのアドレスへ、なければ通知一覧アクションのアドレスへ移動します。

テーマ内蔵メインページ（メイン構成）

サイトのトップページがメイン形式のときに、レイアウトが直接描画する領域です。レイアウト設定 > メイン構成 タブの「メインページセクション」繰り返しフィールドで、セクションを順に組み立てます。1 つも登録しなければ、標準構成（カテゴリ → 日替わり特価 → 特集 → おすすめ → バナー → ランキング → 新商品 → バナー → セール → 新着投稿）が使われます。

セクションの種類	内容	出典（source）	件数（count）
ショップカテゴリタイル	第 1 階層カテゴリへのショートカットタイル	-	表示するタイル数
日替わり特価	割引率上位の商品が日ごとに 1 つずつローテーション、深夜 0 時までのカウントダウン	-	-
開催中の特集カード	コマースの特集を画像カードで表示	-	カード数
おすすめ / 新商品 / セール / 人気商品	商品カードのグリッド（カートに入れるバー付き）	-	商品数
リアルタイム人気ランキング	購入数 → 閲覧数の順で 1〜N 位	-	順位数
バナーストリップ	ビジュアルスライドの画像を中間バナーとして再利用	何番目のスライドかの番号（空欄なら順番どおり）	-
掲示板の新着投稿	掲示板の投稿一覧。mid をカンマで複数入力すると複数段に配置	掲示板の mid（例：notice,board）	投稿数

セクションタイトルを空欄にすると、種類ごとの標準タイトルが使われます。

カテゴリタイルのアイコン

カテゴリタイルは標準でカテゴリ名の 最初の 1 音節（1 文字） を大きく表示します。英語・スペイン語のように最初の文字では区別しにくい言語や、絵のアイコンを使いたい場合は、レイアウト設定 > メイン構成の カテゴリアイコン 繰り返しフィールドを使います。

項目	説明
カテゴリ名	ショップのカテゴリ名と 完全に一致 する必要があります（多言語名の場合は現在の言語で表示される名前）
アイコン画像	画像をアップロードすると画像が優先されます。正方形の PNG・SVG を推奨
絵文字または文字	画像がないときに代わりに表示する絵文字や 1〜2 文字

登録していないカテゴリは、そのまま最初の 1 文字が表示されます。

ビジュアルスライダー

レイアウト設定 > ファーストビュー タブでスライドを登録します（背景画像・タイトル・説明・ボタン・配置）。コントロール（矢印 + ドット）は右下に 1 つにまとまっているので、モバイルでも文言を隠しません。

スライドを 1 つも登録しなければ、コマースのショップホームのバナーを自動で引き継ぎます — ショップのバナーを管理するだけで、トップページのスライダーも一緒に埋まります。

ショップ画面（コマーススキン）



ショップホームは、バナースライダー・カテゴリタイル・特集・おすすめ/新商品/セールのセクションで構成されます。バナーはコマース管理 > フロント設定で登録します。



一覧画面の上部には、第 1 階層カテゴリのチップと現在のカテゴリの第 2 階層チップ、検索と並べ替えが配置されます。モバイルではチップの行が複数行に折り返されず、左右スワイプ の 1 行で表示されます。



商品詳細は、通常オプション・追加オプション・組み合わせ型オプション（軸 × 軸）をすべてサポートします。上の画面は、挽き目 × 容量の 2 軸の組み合わせ型オプションの例です。価格の下には、ポイント特典・送料・配送/鮮度/交換の案内がひとまとまりで続きます。案内文はコマース設定 > 配送・交換返品の案内で管理します。

特集



コマース管理で特集を作成すると、ショップホームとメインページの特集カードに自動で表示されます。バナーは画像・単色・グラデーションから選べます。

特集の表示期間（start_date / end_date）を DB やスクリプトで直接入れる場合は、必ず 14 桁（YmdHis） で保存してください。8 桁で入れると日付の比較で常に期間切れとして扱われ、表示されません。

掲示板スキン

掲示板スキン設定の 一覧の形式 で、掲示板ごとに異なる見た目を選べます。

形式	用途	例
リスト型	お知らせなどの一般的な掲示板。カードフレーム + 区切り線の行	下のお知らせ画面
ウェブマガジン型	サムネイル + 要約のあるコミュニティ	下の自由掲示板画面
カード型	サムネイル中心のギャラリー	-
FAQ型	質問をクリックすると回答が展開されるアコーディオン	下の Q&A 画面







ウェブマガジン型・カード型・FAQ型の必須設定

サムネイルと要約を表示するには、2 つの設定が必要です。

1. 掲示板の一覧設定に「要約」カラムを含める — 一覧設定に summary がないと、一覧の取得そのものが本文を読み込まないため、要約・FAQ の回答が空のまま表示されます。
2. 文書設定のサムネイル対象を「本文を含む」（content）にする — 標準値（添付ファイルのみ）では、本文の画像からサムネイルを作りません。設定を変更したあとは、files/thumbnails 内のファイルを空にして既存の失敗キャッシュ（0 バイトのファイル）を削除すると、再生成されます。

会員・メッセージ・通知センター

会員スキンは、ログイン・会員登録・マイページを 1 枚のカードに収め、入力欄・セレクト・ボタンの高さを 46px に統一しました。メッセージ（コミュニケーション）と通知センターの画面は、会員スキンのマイページの枠（左側にプロフィール + 右側に内容）をそのまま引き継ぎ、会員メニューと同じ場所で開きます。システムメッセージ（エラー・案内）画面は、レイアウトの外でも単独で完結するように作られています。

モバイル



• 下部に ホーム・カテゴリ・検索・カート・マイページ の 5 タブのバーが固定されます。
• カテゴリタブはショップカテゴリの ボトムシート（第 1 階層ヘッダー + 第 2 階層チップ）を、検索タブはショップ検索のボトムシートを下から表示します。ショップがないサイトでは、代わりにメニューのドロワーが開きます。
• メニューのドロワーは、アカウントボタン・カテゴリチップ・メニュー一覧・ダークモード/言語ツールで構成されます。管理者には、ツール行にショップ管理・Pay 設定のリンクが追加されます。

フッター

レイアウト設定 > フッター タブで構成します。項目を空欄にすると、そのブロックは表示されません。

項目	説明
サイト紹介文	ロゴの下の 1 行紹介
カスタマーセンターの電話番号 / 営業時間	左側のカスタマーセンターブロック。電話番号を空欄にするとブロック全体が非表示になります
お問い合わせメール	メールでのお問い合わせリンク
事業者・連絡先情報	改行した各行が 1 項目として表示
Instagram・Facebook・YouTube・ブログのアドレス	入力したものだけ SNS アイコンで表示
下部の案内文	著作権表記の上の小さな免責・案内文
著作権表記	最下部の表記

ページタイプと LNB

サイトマップのメニュークラスに m（メイン）/ sl（サブ）/ sf（全幅）を入力してページタイプを指定します。サイトのトップページはクラスを指定しなくてもメインとして扱われ、会員・メッセージ・決済の画面は自動で全幅になります。このテーマのサブページは LNB なしで本文を全幅 で表示します。

レイアウト設定の全項目

基本

項目	標準値	説明
ロゴ画像 / ダークモード用ロゴ	なし	高さ 40px 基準。空欄ならロゴテキストを使用
ロゴテキスト	なし	空欄ならサイトタイトル
ポイントカラー	ブランドグリーン	ボタン・リンク・アクティブ表示・スキンの強調色をまとめて決定
本文の最大幅	1180px	1060 / 1180 / 1320
メニューバーの幅・色	本文幅・ダーク	全幅、ポイントカラー・ライトも選択可能
モバイルのダークモード・言語ボタンの位置	メニューのドロワー内	ヘッダー・フッターに移動可能
カラーモード	デバイスの設定に合わせる	自動 / 常にライト / 常にダーク

ファーストビュー

ビジュアルスライダーの表示条件・自動切り替えの間隔・スライド一覧（繰り返しフィールド）。

メイン構成

ショップモジュールのアドレス（mid）・カテゴリアイコン（繰り返しフィールド）・メインページセクション（繰り返しフィールド）。上の「テーマ内蔵メインページ」を参照してください。

本文・サイド

統合検索の使用有無・（旧互換）サイドのログインボックス。

フッター

上の「フッター」の表を参照してください。