本文へスキップ
JA
ログイン 会員登録
ドキュメント

公式資料

Streetlab テーマ（ファッションショップ）

Streetlab テーマ（ファッションショップ）

ファッション・ストリートブランドのショッピングモールのための Zittme 公式テーマ Streetlab（streetlab）のマニュアルです。真っ白な背景にインクブラック 1 色でまとめたモノクロームのトーンで、ランキングタブとブランドストリップを備えたトップページでは商品写真が主役になります。Sinsunhan テーマと同じ骨格（テーマ内蔵メインページ、繰り返しフィールドによるセクションの組み立て）を使うため、ここにない内容は Sinsunhan テーマ（ショッピングモール） の文書もあわせてご覧ください。

デモ：fashiondemo.zitt.me

Streetlab のデモ

構成

構成要素場所役割
レイアウトthemes/streetlab/layouts/streetlabサイトの骨格 + テーマ内蔵メインページ
コマーススキンthemes/streetlab/modules/commerceショップホーム・一覧・詳細・カート・注文・マイショッピング・特集
掲示板スキンthemes/streetlab/modules/boardリスト型・カード型・ウェブマガジン型・FAQ型
会員・メッセージ・通知センター・システムメッセージスキンthemes/streetlab/modules/{member, communication, ncenterlite, message}ログイン・マイページ・メッセージ・通知・システム案内
予約・zittme Pay・お問い合わせ・知識Q&Aスキンthemes/streetlab/modules/{reservation, zittme_pay, contact, kin}該当モジュールがインストールされたサイトでのみ適用

ポイントカラーはレイアウト設定 > 基本で変更し、全画面に一緒に反映されます。標準値はインクブラックです。

インストールと適用

  1. ストアからインストールするか、themes/streetlab に圧縮ファイルを展開します。
  2. 管理者 > デザイン設定で Streetlab を選んで適用します。レイアウトとモジュールスキンが一度に切り替わります。
  3. コマースモジュールがあれば、ショップメニュー・ヘッダー検索・トップページの商品セクションが自動で連動します。ショップモジュールが複数ある場合は、レイアウト設定 > メイン構成の「ショップモジュールのアドレス（mid）」に使用する mid を入力します。
    4. 推奨環境：Zittme 1.0.1 以上、コマース 0.2.16 以上。レスポンシブテーマなので、モバイル専用ビューはオフにすることをおすすめします。

    商品名の表記ルール — ブランド行

    このテーマは商品ごとにブランドを別に保存しません。代わりに 商品名を ブランド / 商品名 の形で入力すると、スラッシュの前をブランドとして切り出して上の行に小さく、後ろを商品名として大きく表示します。

    • 例：商品名を BLACKLINE / Lambswool Crewneck で登録すると、一覧カード・詳細・カート・注文の行に BLACKLINE がブランド行として、Lambswool Crewneck が商品名として表示されます。
    • 区切り文字は、両側に空白があるスラッシュ（ / ）1 つです。スラッシュがなければ、ブランド行なしで商品名だけが表示されます。
    • 商品管理の「追加情報」は、このブランド行とは関係ありません。追加情報は、詳細ページの要約の下に表で表示される別の項目です。
    • 検索・並べ替え・注文書には、商品名全体（ブランド / 商品名）がそのまま使われます。

    ヘッダー

    ロゴ・上部メニュー・検索・マイページ・カート・通知ベルで構成されます。メニューバーの色（ダーク・ポイント・ライト）と幅（本文幅・100%）をレイアウト設定で選びます。モバイルではドロワーメニューに折りたたまれ、ダークモードボタンと言語選択の位置（ドロワー内・ヘッダー・フッター）を個別に決められます。

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

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

    セクションの種類内容出典（source）件数（count）
    ショップカテゴリタイル第 1 階層カテゴリへのショートカット。アイコンは「カテゴリアイコン」繰り返しフィールドで設定-タイル数
    おすすめ / 新商品 / セール / 人気商品商品カードのグリッド。カードにブランド行・割引率・定価を表示-商品数
    日替わり特価割引率上位の商品が日ごとに 1 つずつローテーション--
    開催中の特集カードコマースの特集を画像カードで表示-カード数
    リアルタイム人気ランキング（カテゴリタブ）カテゴリタブを押して切り替える順位一覧-順位数
    ブランドストリップ「ブランド」繰り返しフィールドに登録したブランドを 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 のスキンに続きます。

    フッター

    レイアウト設定 > フッターで、サイト紹介文、カスタマーセンターの電話・営業時間・メール、SNS のアドレス（Instagram・Facebook・YouTube・ブログ）、下部の案内文、事業者・連絡先情報、著作権表記を入力します。通信販売業の届出番号のような法的表記は「事業者・連絡先情報」に入力します。

    レイアウト設定の全項目

    基本

    ロゴ画像・ダークモード用ロゴ・ロゴテキスト・ポイントカラー・本文の最大幅（1060・1180・1320）・メニューバーの幅・メニューバーの色・モバイルのダークモードボタンの位置・モバイルの言語選択の位置・カラーモード（デバイスの設定・常にライト・常にダーク）

    ファーストビュー

    ビジュアルスライダーの表示（メインのみ・サブにも・使用しない）・自動切り替えの間隔・ビジュアルスライド（背景画像・タイトル・説明・ボタン名・ボタンのリンク）

    メイン構成

    カテゴリアイコン・ブランド・ショップモジュールのアドレス（mid）・メインページセクション（種類・タイトル・出典・件数）

    本文・サイド

    統合検索の使用・サイドにログインボックスを表示

    フッター

    サイト紹介文・カスタマーセンターの電話番号・営業時間・お問い合わせメール・SNS のアドレス 4 種・下部の案内文・事業者・連絡先情報・著作権表記