このページの内容
- 2つの方法を比較する
- 方法1：Liquidカスタマイズ版 —テーマエディタから画像・リンクを管理できる本格実装
- 方法2：カスタムLiquid＋JavaScript版 —テーマ本体を変更しない簡易実装
2つの方法を比較する
| 方法1：Liquidカスタマイズ版 | 方法2：カスタムLiquid＋JS版 | |
|---|---|---|
| テーマ本体の変更 | あり（5ファイル） | なし |
| テーマエディタからの管理 | 可（ドロワーバナー設定パネル） | 不可（コード内のURLを書き換え） |
| テーマアップデートの影響 | 受ける可能性あり（要確認） | 受けない |
| 実装の手順数 | 5ファイル変更＋翻訳キー追加 | カスタムLiquidに貼るだけ |
| バナー表示位置 | メニュー項目より上 | ナビゲーションリスト下部 |
| Horizonアニメーション対応 | あり | あり（MutationObserver使用） |
方法1：Liquidカスタマイズ版
テーマエディタの「ドロワーバナー」設定から画像とリンク先を変更できる本格的な実装方法です。テーマのアップデート後も設定が保持され、CSSの読み込みには custom.globals.liquid スニペットを活用しており、theme.liquid への変更を1行に抑えた安全な実装です。
完成イメージ
ハンバーガーアイコンをタップするとドロワーが開き、メニュー項目より上にバナー画像が表示されます。バナーにリンク先を設定すれば、クーポンページや特集ページへの誘導に使えます。
テーマエディタでの設定
実装後はコードを触らずに、テーマエディタのメニューブロック内「ドロワーバナー」セクションから画像とリンク先を設定できます。
実装手順
変更・作成するファイルは5つです。テーマの直接編集（theme.liquid の変更）は1行のみで、残りはすべて新規ファイルの作成か既存ファイルへの追記です。
① layout/theme.liquid — L30 に1行追加
stylesheets スニペットの直後に custom.globals の読み込みを追加します。これがテーマファイルへの唯一の変更です。
② snippets/custom.globals.liquid — 新規作成
custom.css と custom.js を読み込む中間スニペットです。このパターンにより、theme.liquid への変更を1行に抑えつつ、今後のカスタマイズもこのスニペット経由で管理できます。
③ assets/custom.css — 新規作成
バナーのスタイルを定義します。border-radius にはテーマのCSS変数を使い、テーマの角丸設定に追従するようにしています。
④ blocks/_header-menu.liquid — スキーマに設定フィールドを追加
ファイル末尾の settings 配列の最後（drawer_dividers の直後）に、バナー画像とリンク先の設定フィールドを追加します。
⑤ snippets/header-drawer.liquid — バナー表示コードを追加
閉じるボタン（</button>）の直後、<nav> タグの直前にバナー表示コードを挿入します。リンク先が設定されている場合は <a> タグで囲み、設定されていない場合はリンクなしで画像のみ表示します。
翻訳キーの追加
スキーマに追加した t:content.drawer_banner / t:settings.drawer_banner_image / t:settings.drawer_banner_link に対応する翻訳キーをロケールファイルに追加します。
locales/en.default.schema.json — content / settings オブジェクトに追加します。
locales/ja.schema.json — 同様に content / settings オブジェクトに追加します（翻訳キーの内容はコード内に含まれています）。
【補足】custom.globals.liquid パターンについて
テーマに独自のCSSを追加する方法はいくつかありますが、theme.liquid に直接 <link> タグを書く方法はテーマアップデート時に差分が生じやすく管理が煩雑になります。custom.globals.liquid スニペットを挟む構成にすることで、theme.liquid への変更を {%- render 'custom.globals' -%} の1行だけに限定できます。将来カスタムJSを追加したい場合も custom.globals.liquid 側を変更するだけで済みます。
【補足】menu-drawer__animated-element クラスについて
バナー要素に menu-drawer__animated-element クラスを付与しているのは、Horizonテーマ標準のドロワーアニメーション（フェードインや下から滑り込む動き）をバナーにも適用するためです。--menu-drawer-animation-index: 0 でアニメーション順序を最初（0番目）に指定しており、メニュー項目よりも先にアニメーションが開始されます。
方法2：カスタムLiquid＋JavaScript版
テーマ本体のファイルを一切変更せず、「カスタム Liquid」セクションへのコード貼り付けだけで実装できる簡易版です。
完成イメージ
この方法の特徴
| 項目 | 内容 |
|---|---|
| 変更ファイル数 | 0（テーマ本体を変更しない） |
| 設定場所 | テーマエディタ →「カスタム Liquid」セクション |
| テーマ更新の影響 | 受けない |
| バナー変更方法 | コード内の2か所のURLを書き換えて保存 |
設定手順
- Shopify管理画面「コンテンツ」→「ファイル」からバナー画像をアップロードし、URLをコピーする
- サンプルコードの
banner_image_urlとbanner_link_urlを書き換える - テーマエディタで任意のページ（全ページ共通のフッターなど）に「カスタム Liquid」セクションを追加し、コードを貼り付けて保存する
補足
- バナーはナビゲーションリストの直下、ユーティリティリンク（アカウント・カートなど）の上に表示されます
- Horizonはページ読み込み後にJavaScriptでドロワーの内容を更新する仕組み（Section Hydration）を持ちます。サンプルコードはこの更新が完了したタイミングで再挿入する実装になっています
