{"product_id":"2026-05-18","title":"【Horizon】コレクションページでデスクトップ列数を固定する方法","description":"\u003cp\u003eHorizonテーマのコレクションページでPC表示の列数を固定できるカスタムセクションの実装例です。テーマエディタに「グリッドモード」設定を追加し、Horizonデフォルトのカードサイズ自動調整と、1〜8列の列数固定を切り替えられます。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"PC列数を4列に固定したコレクションページ\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-18_1.png?v=1778972661\" 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-18_2.png?v=1778972666\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch2\u003e仕組み\u003c\/h2\u003e\n\u003cp\u003eHorizonのデフォルトグリッドは \u003ccode\u003erepeat(auto-fill, minmax(165px, 1fr))\u003c\/code\u003e で列数を自動決定します。ウィンドウ幅に応じて列数が増減するため、ストアのデザイン意図と合わないケースがあります。\u003c\/p\u003e\n\u003cp\u003eこのカスタムセクションでは「列数固定」モードを選択した場合にのみ、CSS変数 \u003ccode\u003e--product-grid-columns-desktop\u003c\/code\u003e を \u003ccode\u003erepeat(N, 1fr)\u003c\/code\u003e で上書きします。セクションIDで絞り込んだセレクターを使うため、他のコレクションや既存セクションには影響しません。\u003c\/p\u003e\n\n\u003ch2\u003e実装手順\u003c\/h2\u003e\n\n\u003ch3\u003e1. カスタムセクションファイルを作成する\u003c\/h3\u003e\n\u003cp\u003eテーマファイルの \u003ccode\u003esections\/\u003c\/code\u003e フォルダに \u003ccode\u003ecustom-main-collection-fixed-columns.liquid\u003c\/code\u003e を新規作成します。内容はテーマ標準の \u003ccode\u003emain-collection.liquid\u003c\/code\u003e をそのままコピーし、以下の2か所を追加します。\u003c\/p\u003e\n\n\u003cp\u003eまず、\u003ccode\u003e\u0026lt;\/results-list\u0026gt;\u003c\/code\u003e の直後に CSS変数のオーバーライドブロックを追加します。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"CSSオーバーライドのLiquidコード\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-18_4.png?v=1778972674\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e次に、\u003ccode\u003e{% schema %}\u003c\/code\u003e の \u003ccode\u003esettings\u003c\/code\u003e 配列の先頭に「グリッドモード」と「PC表示の列数」の設定を追加します。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"schema settingsにgrid_modeとpc_columnsを追加したコード\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-18_3.png?v=1778972670\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003e2. テンプレートJSONを作成する\u003c\/h3\u003e\n\u003cp\u003eテーマファイルの \u003ccode\u003etemplates\/\u003c\/code\u003e フォルダに \u003ccode\u003ecollection.fixed-columns.json\u003c\/code\u003e を新規作成します。テーマ標準の \u003ccode\u003ecollection.json\u003c\/code\u003e をコピーし、メインセクションの \u003ccode\u003e\"type\"\u003c\/code\u003e を \u003ccode\u003e\"custom-main-collection-fixed-columns\"\u003c\/code\u003e に書き換えます。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"テンプレートJSONのセクションtype変更\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-18_6.png?v=1778972682\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003e3. コレクションにテンプレートを割り当てる\u003c\/h3\u003e\n\u003cp\u003eShopify管理画面の「商品」→「コレクション」から対象コレクションを開き、右サイドバーの「テーマテンプレート」から \u003ccode\u003efixed-columns\u003c\/code\u003e を選択して保存します。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"コレクション管理画面でfixed-columnsテンプレートを割り当てる\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-18_5.png?v=1778972678\" class=\"zoomable-image\" style=\"max-width:100%;border-radius:8px;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e割り当て後、テーマエディタを開いてコレクションページを確認し、「グリッドモード」を「列数固定」に変更、「PC表示の列数」で任意の列数を設定します。\u003c\/p\u003e\n\n\u003ch2\u003e注意事項\u003c\/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e「グリッドモード：サイズ指定」の場合は従来どおりカードサイズで列数が自動決定されます\u003c\/li\u003e\n  \u003cli\u003eCSS変数の上書きはPC（750px以上）のみに適用されます。モバイルの列数はテーマ標準の「モバイルカードサイズ」設定に従います\u003c\/li\u003e\n  \u003cli\u003eグリッドビューのズームアウト（密表示）切替を使う場合、ズームアウト時はこの設定が無効になり自動列数に戻ります\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cp\u003e関連TIPS: \u003ca href=\"\/products\/2026-05-16\"\u003eコレクションページの途中にバナー画像を表示する設定例\u003c\/a\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48866167980283,"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-18_db9ef119-a0a8-4be1-a5b6-14aeebd1c3de.png?v=1779025739","url":"https:\/\/store-dojo.com\/products\/2026-05-18","provider":"STORE DOJO","version":"1.0","type":"link"}