Horizonテーマのコレクションページで、商品グリッドの途中に全幅バナー画像を挿入できるカスタムセクションの実装例です。ページャー・無限スクロールどちらにも対応し、ページが切り替わるたびにバナーを自動ループ表示できます。
設定
バナーの挿入位置
テーマエディタの「挿入位置（N件目の後）」で、バナーが表示される商品の番号を指定します。例えば「8」に設定すると、8件目の商品の直後にバナーが全幅で表示されます。
挿入位置はページ内の商品件数を基準にした番号指定のため、グリッドの列数（画面幅によって変わります）と組み合わせて考える必要があります。4列グリッドで「8」に設定した場合、バナーは2行目と3行目の間に入ります。
Horizonの標準グリッドは4列ですが、画面幅によって自動的に3列・5列に変化します。挿入位置が列数の倍数でない場合、バナーが行の途中に割り込む見た目になることがあります。どの画面幅でも行の区切りに合わせたい場合は、3・4・5の最小公倍数である「60」のような数の約数（例：4・5・6・12・15・20など）を選ぶ方法があります。
ページ別バナーのループ
バナー画像は最大3枚まで設定でき、設定枚数に応じて自動ループします。
1枚設定 — 全ページで同じバナーを繰り返す
2枚設定 — P1→[A] P2→[B] P3→[A] P4→[B]…
3枚設定 — P1→[A] P2→[B] P3→[C] P4→[A]…
PC・モバイルの画像切替
各バナーにPC用・モバイル用を別々に設定できます（モバイルは749px以下で切替）。モバイル用を省略するとPC用が全デバイスで表示されます。
実装方法
1. sections/custom-main-collection.liquid を作成する
Horizonの main-collection.liquid をコピーして sections/custom-main-collection.liquid として保存します。以下のコードを追加します。
2. コレクションテンプレートを作成する
テーマエディタから新しいコレクションテンプレートを作成し、main セクションの参照先を custom-main-collection に変更します。作成後、Shopify管理画面で対象のコレクションにこのテンプレートを割り当てます。
3. 対象コレクションにテンプレートを割り当てる
Shopify管理画面のコレクション編集ページを開き、右側の「テーマテンプレート」から作成したテンプレートを選択して保存します。
