レイアウトの設定 — 位置と間隔
これらの設定は、ページ上のメニュー全体の位置、他の要素に対するスタッキング順序、およびサブメニューの幅を制御します。
メニューのパディングとマージン
メニュー全体のコンテナの外側と内側の間隔を制御します — デザインのアイテムレベルのパディングとは異なります。
| フィールド | 説明 |
|---|---|
| マージン 上 / 右 / 下 / 左 (px) | メニューと画面の端または周囲の要素との間のスペース |
| パディング 上 / 右 / 下 / 左 (px) | アイテムが表示される前のメニューコンテナ内のスペース |
使用するタイミング:
- iOSでTabbarをブラウザのナビゲーションバーの上に押し上げる:
Margin Bottom = 34 - メガメニューとヘッダーの間にスペースを追加する:
Margin Top = 8
Z-インデックス
メニューのスタッキング順序は、他のページ要素（ヘッダー、チャットウィジェット、ポップアップなど）に対してです。
| フィールド | 説明 | デフォルト |
|---|---|---|
| Z-インデックス | 整数値 — 高いほど上に表示 | 自動 |
調整するタイミング:
- メニューが固定ヘッダーに覆われている → ヘッダーの値より上にZ-インデックスを増加させる。
- メニューがチャットウィジェットを覆っている → ウィジェットの下にZ-インデックスを減少させる。
一般的な参照値: テーマのヘッダーは通常1000–9999、チャットウィジェットは通常9999–99999です。
サブメニューの幅
ドロップダウンサブメニュー（Tabbar、単一列のメガメニュー）に適用されます。
| フィールド | 説明 | デフォルト |
|---|---|---|
| サブメニューの幅 (px) | 単一列のサブメニューパネルの幅 | 360px |
デスクトップ — サブメニューの動作と幅
メニューがデスクトップに表示されるときに適用されます。
| フィールド | 説明 |
|---|---|
| ホバー時にサブメニューを表示 | クリックせずにマウスホバーでサブメニューを開く |
| フル展開サブメニュー幅 (px) | 複数列のサブメニューの幅（デスクトップメガメニュー） |
| サブメニューの方向 | サブメニューが開く方向: 右 / 左 / 上 / 下 |
マルチサイト (Elite)
メインのShopifyストアの外部にある複数のドメインにメニューを埋め込む。
| フィールド | 説明 |
|---|---|
| マルチサイト | カンマ区切りのドメインリスト（例: brand.com,shop.brand.com） |