【Horizon】コレクションページでデスクトップ列数を固定する方法

【Horizon】コレクションページでデスクトップ列数を固定する方法

UI/UX改善

用途

コレクション編集

詳細を表示する

HorizonテーマのコレクションページでPC表示の列数を固定できるカスタムセクションの実装例です。テーマエディタに「グリッドモード」設定を追加し、Horizonデフォルトのカードサイズ自動調整と、1〜8列の列数固定を切り替えられます。

PC列数を4列に固定したコレクションページ

テーマエディタでグリッドモードと列数を設定する画面

仕組み

Horizonのデフォルトグリッドは repeat(auto-fill, minmax(165px, 1fr)) で列数を自動決定します。ウィンドウ幅に応じて列数が増減するため、ストアのデザイン意図と合わないケースがあります。

このカスタムセクションでは「列数固定」モードを選択した場合にのみ、CSS変数 --product-grid-columns-desktop を repeat(N, 1fr) で上書きします。セクションIDで絞り込んだセレクターを使うため、他のコレクションや既存セクションには影響しません。

実装手順

1. カスタムセクションファイルを作成する

テーマファイルの sections/ フォルダに custom-main-collection-fixed-columns.liquid を新規作成します。内容はテーマ標準の main-collection.liquid をそのままコピーし、以下の2か所を追加します。

まず、</results-list> の直後に CSS変数のオーバーライドブロックを追加します。

CSSオーバーライドのLiquidコード

次に、{% schema %} の settings 配列の先頭に「グリッドモード」と「PC表示の列数」の設定を追加します。

schema settingsにgrid_modeとpc_columnsを追加したコード

2. テンプレートJSONを作成する

テーマファイルの templates/ フォルダに collection.fixed-columns.json を新規作成します。テーマ標準の collection.json をコピーし、メインセクションの "type" を "custom-main-collection-fixed-columns" に書き換えます。

テンプレートJSONのセクションtype変更

3. コレクションにテンプレートを割り当てる

Shopify管理画面の「商品」→「コレクション」から対象コレクションを開き、右サイドバーの「テーマテンプレート」から fixed-columns を選択して保存します。

コレクション管理画面でfixed-columnsテンプレートを割り当てる

割り当て後、テーマエディタを開いてコレクションページを確認し、「グリッドモード」を「列数固定」に変更、「PC表示の列数」で任意の列数を設定します。

注意事項

「グリッドモード：サイズ指定」の場合は従来どおりカードサイズで列数が自動決定されます
CSS変数の上書きはPC（750px以上）のみに適用されます。モバイルの列数はテーマ標準の「モバイルカードサイズ」設定に従います
グリッドビューのズームアウト（密表示）切替を使う場合、ズームアウト時はこの設定が無効になり自動列数に戻ります

関連TIPS: コレクションページの途中にバナー画像を表示する設定例

ご購入（すべて¥0です）いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ：Horizon 3.5.1

sections/custom-main-collection-fixed-columns.liquid（新規作成）

{% javascript %} const url = new URL(window.location.href); if (url.hash) { document.addEventListener( 'DOMContentLoaded', () => { const card = document.getElementById(url.hash.slice(1)); if (card) { card.scrollIntoView({ behavior: 'instant' }); } }, { once: true }...