{"product_id":"2026-04-04","title":"【Horizon】Shopifyのテーマ「Horizon」のドロワーメニュー上部にバナー画像を表示する設定例","description":"\u003cdiv style=\"border: 2px solid #e0e0e0; border-radius: 8px; padding: 16px 24px; margin-bottom: 32px; background: #f8f8f8;\"\u003e\n\u003cp style=\"font-weight: bold; margin: 0 0 10px;\"\u003eこのページの内容\u003c\/p\u003e\n\u003cul style=\"margin: 0; padding-left: 1.5em; line-height: 2;\"\u003e\n\u003cli\u003e\u003ca href=\"#compare\"\u003e2つの方法を比較する\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\n\u003ca href=\"#method1\"\u003e方法1：Liquidカスタマイズ版\u003c\/a\u003e　\u003csmall\u003e—テーマエディタから画像・リンクを管理できる本格実装\u003c\/small\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003ca href=\"#method2\"\u003e方法2：カスタムLiquid＋JavaScript版\u003c\/a\u003e　\u003csmall\u003e—テーマ本体を変更しない簡易実装\u003c\/small\u003e\n\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003ch3 id=\"compare\"\u003e2つの方法を比較する\u003c\/h3\u003e\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e\u003c\/th\u003e\n\u003cth\u003e方法1：Liquidカスタマイズ版\u003c\/th\u003e\n\u003cth\u003e方法2：カスタムLiquid＋JS版\u003c\/th\u003e\n\u003c\/tr\u003e\n\u003c\/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003eテーマ本体の変更\u003c\/td\u003e\n\u003ctd\u003eあり（5ファイル）\u003c\/td\u003e\n\u003ctd\u003eなし\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eテーマエディタからの管理\u003c\/td\u003e\n\u003ctd\u003e可（ドロワーバナー設定パネル）\u003c\/td\u003e\n\u003ctd\u003e不可（コード内のURLを書き換え）\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eテーマアップデートの影響\u003c\/td\u003e\n\u003ctd\u003e受ける可能性あり（要確認）\u003c\/td\u003e\n\u003ctd\u003e受けない\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e実装の手順数\u003c\/td\u003e\n\u003ctd\u003e5ファイル変更＋翻訳キー追加\u003c\/td\u003e\n\u003ctd\u003eカスタムLiquidに貼るだけ\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eバナー表示位置\u003c\/td\u003e\n\u003ctd\u003eメニュー項目より上\u003c\/td\u003e\n\u003ctd\u003eナビゲーションリスト下部\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eHorizonアニメーション対応\u003c\/td\u003e\n\u003ctd\u003eあり\u003c\/td\u003e\n\u003ctd\u003eあり（MutationObserver使用）\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/tbody\u003e\n\u003c\/table\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch2 style=\"border-left: 4px solid #1a73e8; padding-left: 12px; margin-top: 40px;\" id=\"method1\"\u003e方法1：Liquidカスタマイズ版\u003c\/h2\u003e\n\u003cp\u003eテーマエディタの「ドロワーバナー」設定から画像とリンク先を変更できる本格的な実装方法です。テーマのアップデート後も設定が保持され、CSSの読み込みには \u003ccode\u003ecustom.globals.liquid\u003c\/code\u003e スニペットを活用しており、\u003ccode\u003etheme.liquid\u003c\/code\u003e への変更を1行に抑えた安全な実装です。\u003c\/p\u003e\n\u003ch3\u003e完成イメージ\u003c\/h3\u003e\n\u003cp\u003eハンバーガーアイコンをタップするとドロワーが開き、メニュー項目より上にバナー画像が表示されます。バナーにリンク先を設定すれば、クーポンページや特集ページへの誘導に使えます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-04_1.png?v=1775285615\" alt=\"Horizonテーマのドロワーメニュー上部にバナー画像が表示されている例\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマエディタでの設定\u003c\/h3\u003e\n\u003cp\u003e実装後はコードを触らずに、テーマエディタのメニューブロック内「ドロワーバナー」セクションから画像とリンク先を設定できます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-04_2.png?v=1775285615\" alt=\"テーマエディタのドロワーバナー設定パネルで画像とリンク先を設定している様子\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e実装手順\u003c\/h3\u003e\n\u003cp\u003e変更・作成するファイルは5つです。テーマの直接編集（theme.liquid の変更）は1行のみで、残りはすべて新規ファイルの作成か既存ファイルへの追記です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e① layout\/theme.liquid — L30 に1行追加\u003c\/h3\u003e\n\u003cp\u003e\u003ccode\u003estylesheets\u003c\/code\u003e スニペットの直後に \u003ccode\u003ecustom.globals\u003c\/code\u003e の読み込みを追加します。これがテーマファイルへの唯一の変更です。\u003c\/p\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-04_3.png?v=1775285615\" alt=\"layout\/theme.liquid の L30 に custom.globals の render タグを追加したコード\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e② snippets\/custom.globals.liquid — 新規作成\u003c\/h3\u003e\n\u003cp\u003e\u003ccode\u003ecustom.css\u003c\/code\u003e と \u003ccode\u003ecustom.js\u003c\/code\u003e を読み込む中間スニペットです。このパターンにより、\u003ccode\u003etheme.liquid\u003c\/code\u003e への変更を1行に抑えつつ、今後のカスタマイズもこのスニペット経由で管理できます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-04_4.png?v=1775285615\" alt=\"snippets\/custom.globals.liquid の全体コード。custom.css と custom.js を読み込む link タグと script タグ\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e③ assets\/custom.css — 新規作成\u003c\/h3\u003e\n\u003cp\u003eバナーのスタイルを定義します。\u003ccode\u003eborder-radius\u003c\/code\u003e にはテーマのCSS変数を使い、テーマの角丸設定に追従するようにしています。\u003c\/p\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-04_5.png?v=1775285615\" alt=\"assets\/custom.css の全体コード。ドロワーバナーの padding と border-radius を定義\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e④ blocks\/_header-menu.liquid — スキーマに設定フィールドを追加\u003c\/h3\u003e\n\u003cp\u003eファイル末尾の \u003ccode\u003esettings\u003c\/code\u003e 配列の最後（\u003ccode\u003edrawer_dividers\u003c\/code\u003e の直後）に、バナー画像とリンク先の設定フィールドを追加します。\u003c\/p\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-04_6.png?v=1775285615\" alt=\"blocks\/_header-menu.liquid の schema settings 末尾に drawer_banner の設定フィールドを追加したコード\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e⑤ snippets\/header-drawer.liquid — バナー表示コードを追加\u003c\/h3\u003e\n\u003cp\u003e閉じるボタン（\u003ccode\u003e\u0026lt;\/button\u0026gt;\u003c\/code\u003e）の直後、\u003ccode\u003e\u0026lt;nav\u0026gt;\u003c\/code\u003e タグの直前にバナー表示コードを挿入します。リンク先が設定されている場合は \u003ccode\u003e\u0026lt;a\u0026gt;\u003c\/code\u003e タグで囲み、設定されていない場合はリンクなしで画像のみ表示します。\u003c\/p\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-04_7.png?v=1775285615\" alt=\"snippets\/header-drawer.liquid の nav タグ直前にバナー表示コードを挿入したコード\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e翻訳キーの追加\u003c\/h3\u003e\n\u003cp\u003eスキーマに追加した \u003ccode\u003et:content.drawer_banner\u003c\/code\u003e \/ \u003ccode\u003et:settings.drawer_banner_image\u003c\/code\u003e \/ \u003ccode\u003et:settings.drawer_banner_link\u003c\/code\u003e に対応する翻訳キーをロケールファイルに追加します。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003elocales\/en.default.schema.json\u003c\/strong\u003e — \u003ccode\u003econtent\u003c\/code\u003e \/ \u003ccode\u003esettings\u003c\/code\u003e オブジェクトに追加します。\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003elocales\/ja.schema.json\u003c\/strong\u003e — 同様に \u003ccode\u003econtent\u003c\/code\u003e \/ \u003ccode\u003esettings\u003c\/code\u003e オブジェクトに追加します（翻訳キーの内容はコード内に含まれています）。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【補足】custom.globals.liquid パターンについて\u003c\/h3\u003e\n\u003cp\u003eテーマに独自のCSSを追加する方法はいくつかありますが、\u003ccode\u003etheme.liquid\u003c\/code\u003e に直接 \u003ccode\u003e\u0026lt;link\u0026gt;\u003c\/code\u003e タグを書く方法はテーマアップデート時に差分が生じやすく管理が煩雑になります。\u003ccode\u003ecustom.globals.liquid\u003c\/code\u003e スニペットを挟む構成にすることで、\u003cstrong\u003e\u003ccode\u003etheme.liquid\u003c\/code\u003e への変更を \u003ccode\u003e{%- render 'custom.globals' -%}\u003c\/code\u003e の1行だけに限定\u003c\/strong\u003eできます。将来カスタムJSを追加したい場合も \u003ccode\u003ecustom.globals.liquid\u003c\/code\u003e 側を変更するだけで済みます。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【補足】menu-drawer__animated-element クラスについて\u003c\/h3\u003e\n\u003cp\u003eバナー要素に \u003ccode\u003emenu-drawer__animated-element\u003c\/code\u003e クラスを付与しているのは、Horizonテーマ標準のドロワーアニメーション（フェードインや下から滑り込む動き）をバナーにも適用するためです。\u003ccode\u003e--menu-drawer-animation-index: 0\u003c\/code\u003e でアニメーション順序を最初（0番目）に指定しており、メニュー項目よりも先にアニメーションが開始されます。\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch2 style=\"border-left: 4px solid #34a853; padding-left: 12px; margin-top: 40px;\" id=\"method2\"\u003e方法2：カスタムLiquid＋JavaScript版\u003c\/h2\u003e\n\u003cp\u003eテーマ本体のファイルを一切変更せず、「カスタム Liquid」セクションへのコード貼り付けだけで実装できる簡易版です。\u003c\/p\u003e\n\u003ch3\u003e完成イメージ\u003c\/h3\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-04_8.png\" alt=\"テーマエディタでカスタムLiquidセクションにコードを貼り付けた設定例とドロワー表示結果\"\u003e\u003c\/p\u003e\n\u003ch3\u003eこの方法の特徴\u003c\/h3\u003e\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e項目\u003c\/th\u003e\n\u003cth\u003e内容\u003c\/th\u003e\n\u003c\/tr\u003e\n\u003c\/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e変更ファイル数\u003c\/td\u003e\n\u003ctd\u003e0（テーマ本体を変更しない）\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e設定場所\u003c\/td\u003e\n\u003ctd\u003eテーマエディタ →「カスタム Liquid」セクション\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eテーマ更新の影響\u003c\/td\u003e\n\u003ctd\u003e受けない\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eバナー変更方法\u003c\/td\u003e\n\u003ctd\u003eコード内の2か所のURLを書き換えて保存\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/tbody\u003e\n\u003c\/table\u003e\n\u003ch3\u003e設定手順\u003c\/h3\u003e\n\u003col\u003e\n\u003cli\u003eShopify管理画面「コンテンツ」→「ファイル」からバナー画像をアップロードし、URLをコピーする\u003c\/li\u003e\n\u003cli\u003eサンプルコードの \u003ccode\u003ebanner_image_url\u003c\/code\u003e と \u003ccode\u003ebanner_link_url\u003c\/code\u003e を書き換える\u003c\/li\u003e\n\u003cli\u003eテーマエディタで任意のページ（全ページ共通のフッターなど）に「カスタム Liquid」セクションを追加し、コードを貼り付けて保存する\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003e補足\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003eバナーはナビゲーションリストの直下、ユーティリティリンク（アカウント・カートなど）の上に表示されます\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eHorizonはページ読み込み後にJavaScriptでドロワーの内容を更新する仕組み（Section Hydration）を持ちます。\u003c\/strong\u003eサンプルコードはこの更新が完了したタイミングで再挿入する実装になっています\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48612254515451,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-04.jpg?v=1775288648","url":"https:\/\/store-dojo.com\/products\/2026-04-04","provider":"STORE DOJO","version":"1.0","type":"link"}