ヘッダー、フッター、サイトクローム
クロームはストアフロントを包むすべてです — アナウンスメントバー、ヘッダー (ロゴ、ナビ、検索、アカウント、カート)、 サインイン済み会社購入者に自動表示される B2B グリーティングバー、そしてフッターです。Vertex では、このクロームのすべてが標準で B2B 対応 です: スイッチャー、バッジ、担当者ピルは会社購入者がサインインすると自動的に表示され、サインインしていないときは洗練された B2C レイアウトに優雅にデグレードします。
「B2B ヘッダー」と「B2C ヘッダー」を選択する必要はありません。Vertex は 1 つのヘッダーを描画し、会社購入者がサインインした瞬間に、その上にアンバー色の B2B グリーティングバーを レイヤー します。ゲストにはクリーンな白いヘッダーが表示され、サインイン済み購入者には同じヘッダーに加えて会社バッジ、NET 条件ピル、免税インジケーター、配送先スイッチャーが表示されます。
アナウンスメントバー
セクションファイル: sections/announcement-bar.liquid
メインヘッダー上部の APEX スタイルのトップバー — 左にテキスト、任意の左アイコン (truck / lightning / lock)、電話番号、ソーシャルアイコン、右に閉じるための ×。標準で dark と amber の 2 つの配色を同梱しています。
設定
| 設定 | 種類 | 注記 |
|---|---|---|
| テキスト | リッチテキスト | 短い価値メッセージ — 「$500 以上の注文で送料無料」、「資格のある購入者向けに NET-30 提供」。インラインリンクをサポート。 |
| 左アイコン | Select | truck · lightning · lock · none。SVG グリフをテキストとペアにします。 |
| 電話番号 | テキスト | 右揃えの電話ピル。モバイルではタップで発信 (tel: リンク)。 |
| Instagram URL | URL | ブランドソーシャルアイコン。入力時のみ描画。 |
| LinkedIn URL | URL | LinkedIn アイコン。 |
| X (Twitter) URL | URL | X アイコン。 |
| YouTube URL | URL | YouTube アイコン。 |
| 配色 | Select | dark (デフォルト) または amber。 |
リンクブロック
Link ブロックを追加して、小さなテキストリンクをアナウンスメントバーに追加します — Special Offers、Become a dealer、Resources。各ブロックは label と url を取ります。
非表示可能
右側の × ボタンは、現在の訪問者用にアナウンスメントバーを閉じます。状態は assets/announcement-dismiss.js 経由で localStorage に永続化されるため、訪問者がサイトデータをクリアするまでバーは非表示のままです。
amber 配色は B2B グリーティングバーのアクセントカラーと一致します。アナウンスメントが B2B のバリュープロポジション (NET-30 条件、販売店サインアップ、RFQ) の場合に使用してください。一般的なマーケティングには dark 配色を使用してください。
メインヘッダー
セクションファイル: sections/header.liquid
主要なナビゲーションサーフェス — ロゴ、ブランドテキスト、プライマリメニュー、任意のセカンダリメニュー、予測検索、ロケールと通貨スイッチャー、アカウント、カート。
設定
| 設定 | 種類 | 注記 |
|---|---|---|
| ロゴ | 画像 | 推奨: SVG または 2x PNG。Logo max height 数値設定で設定された最大高さに制約されます。 |
| ブランドテキストの上書き | テキスト | ロゴがない場合に使用する任意のテキスト (例: 「Vertex Supply」)。見出し書体で描画。 |
| プライマリメニュー | リンクリスト | メインナビゲーション。各親メニュー項目には子項目から駆動されるドロップダウンが付きます。 |
| サブメニュースタイル | Select | auto · mega · dropdown。Auto は親に 8 つ以上の子があるかグリッドレイアウトが検出されるとメガを選択。それ以外はフラットドロップダウンを描画。 |
| セカンダリメニュー | リンクリスト | 右揃えのユーティリティナビ (Special offers · Guides · Services · FAQ)。選択しない場合 secondary-menu リンクリストハンドルで自動検出。 |
| 検索プレースホルダー | テキスト | 翻訳可能。デフォルトは 「商品、SKU、部品番号で検索」。 |
| ロケールスイッチャーを表示 | チェックボックス | デフォルト オン。デスクトップヘッダーとモバイルドロワー内の言語ピルを表示 / 非表示にします。 |
| 通貨スイッチャーを表示 | チェックボックス | デフォルト オン。通貨ピルを表示 / 非表示にします。シングルマーケット B2B 購入者でも、支払い通貨が常に分かるよう情報提供のために表示。 |
| スクロール時に固定 | チェックボックス | スクロール時にヘッダーをビューポートに固定。 |
メニューの右側に描画されるもの
左から右の順に: 予測検索入力、言語ピル、通貨ピル、営業担当ピル (B2B 向け自動表示)、アカウント、カートカウンター。
営業担当ピル は会社の vertex.rep_name、vertex.rep_email、vertex.rep_phone メタフィールドから引き出されます。設定の詳細は B2B セットアップガイド を参照してください。
メガメニュー vs シンプルドロップダウン
サブメニュースタイルは menu_style 設定で親メニュー項目ごとに決定されます。2 つのフォーマット:
- メガメニュー — 任意のアイコンと専用ブランドグリッドを備えたマルチカラムグリッドパネル。Shop by category、Shop by brand、Industries — 8 つ以上の子または視覚的サブカテゴリを持つ親項目に使用。
- シンプルドロップダウン — フラットリスト。About、Resources、Account — 少数のページを持つ親項目に使用。
auto に設定された場合、親に子が 8 つ以上あればメガを選択し、それ以外はシンプルドロップダウンを選択します。
B2B グリーティングバー
セクションファイル: sections/b2b-greeting-bar.liquid
サインイン済み会社購入者向けにメインヘッダーの上に表示されるアンバー色の帯。マーチャント設定はありません — 顧客の状態に基づいて自動描画されます。
表示条件
次の 3 つすべてが真である必要があります:
customer.b2b?— 顧客が B2C アカウントではなく B2B (会社) 購入者であるcustomer.current_company— 少なくとも 1 つの会社に所属しているsettings.storefront_mode != 'b2c'— テーマが B2C 専用モードに固定されていない
いずれか 1 つでも失敗すれば (ゲスト、B2C 専用モード、会社所属なし)、グリーティングバーは描画されません。
表示内容
- 会社名 — 「
{company.name}としてサインイン中」 - NET 条件バッジ — 会社の支払い条件メタフィールドから NET-30 / NET-60 / NET-90
- 免税バッジ — Shopify ネイティブの会社税ステータスから
- 言語ピル — REP スタイルのアバター + ISO コード + シェブロン
- 通貨ピル — REP スタイルのアバター + ISO コード + シェブロン
- 配送先スイッチャー — 購入者が 1 ロケーションのときは静的ラベル、複数のときは完全なドロップダウン
画面 ≤ 1169px では、グリーティングバーは折りたたまれ、内容はハンバーガードロワーのアカウントセクションに移動します。アンバー色帯はモバイルで検索バーと垂直スペースを争わないように ≥ 1170px (デスクトップ) でのみ表示されます。
→ 完全な機能サーフェスは B2B 専用セクション を参照してください。
フッター
セクションファイル: sections/footer.liquid
サイトフッター — メニュー、ソーシャル、メール、決済アイコン、ニュースレター、リーガルリンク。
設定
| 設定 | 種類 | 注記 |
|---|---|---|
| フッターメニュー | リンクリスト | マルチカラ ムフッターナビ。各親はカラムヘッダーとして描画。 |
| Instagram URL | URL | 入力時のみ描画。 |
| Facebook URL | URL | 入力時のみ描画。 |
| LinkedIn URL | URL | 入力時のみ描画。 |
| X (Twitter) URL | URL | 入力時のみ描画。 |
| YouTube URL | URL | 入力時のみ描画。 |
| メール | テキスト | デフォルトは空。入力すると、コンタクトカラムに mailto: リンクとして描画。 |
| 決済アイコンを表示 | チェックボックス | デフォルト オン。リストを自分で維持する必要がないよう shop.enabled_payment_types を使用。 |
| ニュースレター見出し | テキスト | 例: 「トレードリストに参加」。 |
| ニュースレター紹介 | リッチテキスト | 短い安心感のコピー — 「月次配信、スパムなし」。 |
| リーガルメニュー | リンクリスト | プライバシー · 利用規約 · 返金 · クッキー。メニューを空のままにすると 自動的に /policies/* URL にフォールバック。 |
ニュースレターフォーム
ニュースレターブロックは Shopify ネイティブの顧客ニュー スレターフォームを使用するため、購読者は (newsletter accepts-marketing フラグ付きで) Shopify 顧客リストに書き込まれます。サードパーティ統合は不要です。
決済アイコンを手で選ぶ必要はありません — Vertex は shop.enabled_payment_types を読み取り、Shopify の決済設定で有効化したアイコンのみを描画します。Settings → Payments で Apple Pay を有効化 → フッターに表示。無効化 → 消えます。
予測検索
セクションファイル: sections/predictive-search.liquid (header.liquid で描画)
購入者の入力に応じて検索入力からドロップダウンします。4 つのパネルを表示:
- 商品 — 画像サムネイル、タイトル、ベンダー、価格。
vertex.mpnメタフィールド経由でメーカー部品番号を認識 ( したがって1N4148を検索するとダイオードを部品番号で見つけられます)。 - コレクション — タイトル + 画像。
- ページ — タイトル + URL。
- 推奨クエリ — Shopify ネイティブの検索候補。
MPN 認識
商品で vertex.mpn メタフィールド (single-line text) を設定した場合、予測検索は標準の商品タイトル / SKU / ベンダーに加えて、そのフィールドに対してもクエリを照合します。購入者が商品名ではなく部品番号で検索するテクニカルカタログにとって重要です。
→ 設定の詳細は メタフィールドセットアップガイド を参照してください。
レスポンシブ動作
ヘッダーには 1170px のハードブレイクポイントがあります — iPad Pro 縦向き (1024px) はハンバーガーフローのままで、ほとんどのラップトップがデスクトップレイアウトに着地するように選ばれています。
| ビューポート | レイアウト |
|---|---|
| < 1170px | ハンバーガーメニュー → ドロワー。ドロワーには次が含まれます: プライマリメニュー、セカンダリメニュー、配送先スイッチャー、ロケール + 通貨ピル (2 カラムグリッド)、営業担当カード (下部に幅いっぱい)、言語 + サインイン。 |
| ≥ 1170px | 完全なデスクトップナビ。メガメニュー / ドロップダウンパネル、予測検索入力、REP ピル、営業担当ピル、アカウント、カート。 |
カスタムドロップダウンパネル (ネイティブ <select> なし)
Vertex はどこにも ネイティブ <select> 要素を使用しません。言語、通貨、配送先スイッチャーはすべて、次を備えた共有 <details> + <summary> + カスタムパネルシステムを使用します:
- ホバー状態
- 現在の選択ハイライト + チェックアイコン
- フェードインアニメーション
- 相互排他 (1 つを開くと他は閉じる)
- クリック外で閉じる
- Escape で閉じる
- 完全なキーボードナビゲーション (矢印キー + Enter)
実装は assets/global.js にあります (closeAllDetails() ヘルパーを探してください)。これらのドロップダウンの再スタイリングは details[data-vertex-dropdown] セレクターを上書きする問題です — JS は不要です。
次のステップ
- ホームページマーケティングセクション → — ヒーロー、注目コレクション、お客様の声、FAQ、その他 25 以上のホームページセクションを設定
- 商品ページセクション → — メイン商品、商品タブ、関連商品、最近表示した商品、スティッキーカート
- B2B 専用セクション → — B2B グリーティングバー (クロスリンク)、B2B 機能プロモ、一括注文、RFQ、比較
- ストアフロントモードガイド → — Hybrid vs B2B-only vs B2C-only
- テーマ設定リファレンス → — すべてのテーマ全体設定の解説