{"product_id":"2026-05-16","title":"【Horizon】コレクションページの途中にバナー画像を表示する設定例","description":"\u003cp\u003eHorizonテーマのコレクションページで、商品グリッドの途中に全幅バナー画像を挿入できるカスタムセクションの実装例です。ページャー・無限スクロールどちらにも対応し、ページが切り替わるたびにバナーを自動ループ表示できます。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"コレクションページの途中にバナーが挿入された様子\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-16_1.png?v=1778907666\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"バナーのページ別ループ設定\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-16_2.png?v=1778936338\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch2\u003e設定\u003c\/h2\u003e\n\n\u003ch3\u003eバナーの挿入位置\u003c\/h3\u003e\n\u003cp\u003eテーマエディタの「挿入位置（N件目の後）」で、バナーが表示される商品の番号を指定します。例えば「8」に設定すると、8件目の商品の直後にバナーが全幅で表示されます。\u003c\/p\u003e\n\u003cp\u003e挿入位置はページ内の商品件数を基準にした番号指定のため、グリッドの列数（画面幅によって変わります）と組み合わせて考える必要があります。4列グリッドで「8」に設定した場合、バナーは2行目と3行目の間に入ります。\u003c\/p\u003e\n\n\u003cdiv style=\"background:#f5f5f5;border-left:3px solid #999;padding:10px 16px;margin:12px 0;border-radius:0 4px 4px 0;\"\u003e\u003cp style=\"margin:0\"\u003eHorizonの標準グリッドは4列ですが、画面幅によって自動的に3列・5列に変化します。挿入位置が列数の倍数でない場合、バナーが行の途中に割り込む見た目になることがあります。どの画面幅でも行の区切りに合わせたい場合は、3・4・5の最小公倍数である「60」のような数の約数（例：4・5・6・12・15・20など）を選ぶ方法があります。\u003c\/p\u003e\u003c\/div\u003e\u003ch3\u003eページ別バナーのループ\u003c\/h3\u003e\n\u003cp\u003eバナー画像は最大3枚まで設定でき、設定枚数に応じて自動ループします。\u003c\/p\u003e\n\u003cp\u003e1枚設定 — 全ページで同じバナーを繰り返す\u003cbr\u003e\n2枚設定 — P1→[A] P2→[B] P3→[A] P4→[B]…\u003cbr\u003e\n3枚設定 — P1→[A] P2→[B] P3→[C] P4→[A]…\u003c\/p\u003e\n\n\u003ch3\u003ePC・モバイルの画像切替\u003c\/h3\u003e\n\u003cp\u003e各バナーにPC用・モバイル用を別々に設定できます（モバイルは749px以下で切替）。モバイル用を省略するとPC用が全デバイスで表示されます。\u003c\/p\u003e\n\n\u003ch2\u003e実装方法\u003c\/h2\u003e\n\n\u003ch3\u003e1. sections\/custom-main-collection.liquid を作成する\u003c\/h3\u003e\n\u003cp\u003eHorizonの \u003ccode\u003emain-collection.liquid\u003c\/code\u003e をコピーして \u003ccode\u003esections\/custom-main-collection.liquid\u003c\/code\u003e として保存します。以下のコードを追加します。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"sections\/custom-main-collection.liquid を作成する（VS Code）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-16_6.png?v=1778914770\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"スキーマ設定（新規追加）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-16_4.png?v=1778910916\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"バナー挿入ロジック（新規追加）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-16_5.png?v=1778907840\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003e2. コレクションテンプレートを作成する\u003c\/h3\u003e\n\u003cp\u003eテーマエディタから新しいコレクションテンプレートを作成し、\u003ccode\u003emain\u003c\/code\u003e セクションの参照先を \u003ccode\u003ecustom-main-collection\u003c\/code\u003e に変更します。作成後、Shopify管理画面で対象のコレクションにこのテンプレートを割り当てます。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"テンプレートの作成（テーマエディタ）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-16_3.png?v=1778913949\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"collection.inline-banner.json の変更箇所\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-16_7.png?v=1778915386\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003e3. 対象コレクションにテンプレートを割り当てる\u003c\/h3\u003e\n\u003cp\u003eShopify管理画面のコレクション編集ページを開き、右側の「テーマテンプレート」から作成したテンプレートを選択して保存します。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"コレクションにテンプレートを割り当てる\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-16_8.png?v=1778939458\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48864962052347,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-16_43370b94-8a84-419d-a8c5-21dbf542677c.png?v=1778912593","url":"https:\/\/store-dojo.com\/products\/2026-05-16","provider":"STORE DOJO","version":"1.0","type":"link"}