{"product_id":"2026-03-17","title":"【Horizon】Shopifyのテーマ「Horizon」でコレクションをランキング形式で表示したい場合の実装例","description":"\u003cp\u003eHorizonテーマのコレクションページで、商品をランキング形式（1位、2位、3位…）で表示するカスタマイズです。テーマファイルの編集は不要で、カスタムLiquidセクションにコードを貼り付けるだけで動作します。ページ分割（ページネーション）と同一ページ読み込み（「もっと見る」ボタン）の両方に対応しています。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003eデスクトップ・モバイルの表示例\u003c\/h3\u003e\n\u003cp\u003e商品画像の左上にランキング番号のバッジが表示されます。1〜3位は色分けで目立つようにしています。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Horizonテーマでコレクションをランキング形式で表示した完成イメージ（デスクトップ・モバイル）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-03-17_1.png?v=1773742347\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003e設定方法：コレクションテンプレートにカスタムLiquidセクションを追加\u003c\/h3\u003e\n\u003cp\u003eテーマエディタでコレクションテンプレートに「カスタムLiquid」セクションを追加し、コードを挿入するだけです。ベンダーファイル（テーマのオリジナルファイル）を一切変更せずに実現しています。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"コレクションテンプレートにカスタムLiquidセクションを追加してコードを挿入する設定手順\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-03-17_2.png?v=1773748406\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003e仕組みの解説\u003c\/h3\u003e\n\u003cp\u003eCSSカウンターを使ってランキング番号を自動付与しています。ページ分割の場合はJavaScriptでURLの \u003ccode\u003epage\u003c\/code\u003e パラメータを読み取り、2ページ目以降のカウンター開始値を調整します。同一ページ読み込み（「もっと見る」ボタン等）の場合はCSSカウンターが自然にインクリメントするため、追加のJSは不要です。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003e【補足】ランキング対象のコレクションを限定する\u003c\/h3\u003e\n\u003cp\u003eコレクションテンプレートを複製して「ranking」などの名前を付け、ランキングを表示したいコレクションのテーマテンプレートをそちらに設定することで、全コレクションに影響せず特定のコレクションだけにランキングを表示できます。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003cp\u003eDawn向けの同様のTIPSは\u003ca href=\"\/products\/2023-01-23\"\u003eこちら\u003c\/a\u003eにあります。Horizonでは\u003ca href=\"\/blogs\/tips\/how-to-customize-shopify-horizon-theme-safely\"\u003eこちらのブログ記事\u003c\/a\u003eで紹介しているカスタマイズ方針に沿い、テーマのオリジナルファイルを一切変更せずに実現しています。\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48434134024443,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-03-17_1c27512b-8e94-4407-add1-db41bcd7e994.png?v=1773747680","url":"https:\/\/store-dojo.com\/products\/2026-03-17","provider":"STORE DOJO","version":"1.0","type":"link"}