Horizonテーマのコレクションページで、商品をランキング形式（1位、2位、3位…）で表示するカスタマイズです。テーマファイルの編集は不要で、カスタムLiquidセクションにコードを貼り付けるだけで動作します。ページ分割（ページネーション）と同一ページ読み込み（「もっと見る」ボタン）の両方に対応しています。
デスクトップ・モバイルの表示例
商品画像の左上にランキング番号のバッジが表示されます。1〜3位は色分けで目立つようにしています。
設定方法：コレクションテンプレートにカスタムLiquidセクションを追加
テーマエディタでコレクションテンプレートに「カスタムLiquid」セクションを追加し、コードを挿入するだけです。ベンダーファイル（テーマのオリジナルファイル）を一切変更せずに実現しています。
仕組みの解説
CSSカウンターを使ってランキング番号を自動付与しています。ページ分割の場合はJavaScriptでURLの page パラメータを読み取り、2ページ目以降のカウンター開始値を調整します。同一ページ読み込み（「もっと見る」ボタン等）の場合はCSSカウンターが自然にインクリメントするため、追加のJSは不要です。
【補足】ランキング対象のコレクションを限定する
コレクションテンプレートを複製して「ranking」などの名前を付け、ランキングを表示したいコレクションのテーマテンプレートをそちらに設定することで、全コレクションに影響せず特定のコレクションだけにランキングを表示できます。
Dawn向けの同様のTIPSはこちらにあります。Horizonではこちらのブログ記事で紹介しているカスタマイズ方針に沿い、テーマのオリジナルファイルを一切変更せずに実現しています。
